1 css styling with fonts and colors. 2 css cascading style sheets and fonts css provides style or...
Post on 19-Dec-2015
226 Views
Preview:
TRANSCRIPT
1
CSS Styling
with Fonts and Colors
2
CSS Cascading Style Sheets and fonts
• CSS provides Style or Presentation options for our html pages
• CSS properties help you style your text
• CSS can control typeface, style, color, and even decorations
• CSS uses “font families”
• CSS “font families” specify the fonts to use in each element of your page
3
CSS font-family property
• Only certain fonts are commonly installed on most computers
• Care should be taken when specifying fonts
body {font-family: Verdana, Geneva, Arial,
san-serif;}
4
CSS font-size property
• CSS offers several ways to specify font sizes
• Can specify fonts in a way that allows your users to increase the font size without affecting your design
body {font-size: 14px;
}
5
CSS color property
• Changing the text color with the color property
• Use 16 predefined colors, RGB, or “hex codes”
body {
color: silver;
}
6
CSS font-weight property
• Changing the weight of fonts with the font-weight property
• Use lighter, normal, bold, bolder
body {
font-weight: bold;
}
7
CSS text-decoration property
• Decorate text with the text-decoration property
• Use none, underline, overline, line-through, blink
body {
text-decoration : underline;
}
8
CSS font-family property
• font-family contains contains a set of fonts that share common charecteristics
• Five font families1. Sans-serif
2. Serif
3. Monospace
4. Cursive
5. Fantasy
• Each family includes a larger set of fonts
9
font-family Sans-serif
• Sans-serif family
• Fonts without serifs (tails)
• Considered more readable on computer screens
Examples:
VerdanaArial BlackTrebuchet MS ArialGeneva
10
font-family Serif
• Serif family
• Fonts with serifs (tails), the decorative barbs and hooks on the ends of the letters
• Elegant traditional look
• Associated with newspaper print
Examples:
TimesTimes New RomanGeorgia
11
font-family Monospace
• Monospace family
• Fonts with constant width characters
• All characters share a same fixed width, typewriter look
• Useful for displaying with computer code
Examples:
CourierCourier NewAndale Mono
12
font-family Cursive
• Cursive family
• Fonts that look handwritten
• Playful or stylized feel
• Useful for headings
Examples:
Comic SansApple Chancery
13
font-family Fantasy
• Fantasy family
• Stylized decorative fonts
• Not widely available or recommended for mainstream web design
• Useful for personal pages
Examples:
Last NinjaImpact
14
Specifying font-families
• Font family should contain a list of alternative fonts
• Alternative fonts should be from the same font family, but not required
• Font names must be spelled correctly
• Last font should be a generic system font like sans-serif or serif
body {font-family: Verdana, Geneva, Arial,
san-serif;}
15
Specifying font-families
• Browser interprets the fonts listed in your font-family specification, checks if font is installed on users computer
• Enables you to list preferred fonts
• Checks if Verdana is available, if not check for Geneva, if not check for Arial, if not use sans-serif
(browser will use the default font in that family)
body {
font-family: Verdana, Geneva, Arial, san-serif;
}
16
Specifying font-families
• Font-family property is set on the <body> element
• Fonts with multiple words must be put in double quotes “Courier New”
• Any elements within, will inherit these fonts
body {
font-family: “Courier New”, san-serif;
}
17
Font dilemma
• Can’t control what fonts users have installed on their computer
• Some fonts commonly appear on Mac’s but not PC’s
• Examples of fonts common on both Mac and PC:
Andale MonoArialArial BlackComic SansCourier NewGeorgiaImpactTimes New RomanTrebuchet MS Verdana
18
Specifying font size using px
• font-size property
• Can specify your font size in pixels (how many pixels tall to make letters)
• Specifying font-size will still enable user to increase the font size within their browser
body {font-size: 14px;
}
19
Specifying font size as relative
• Instead of specifying font size in pixels, a font size can be specified as a percentage
• Percentage specifies how big it should be relative to another font size
body {font-size: 14px;
}h1 {
font-size: 150%;}
20
Specifying font size as relative
• Body font size in pixels and a level one heading as 150% of its parent element (body 14px)
• h1 heading will appear as 150% of 14px or approx 21px
body {font-size: 14px;
}h1 {
font-size: 150%;}
21
Specifying font size using em
• Instead of specifying font size in pixels, or percentage, a font size can be specified using em
• em is another unit of measure, specifying a scaling factor
body {font-size: 14px;
}h1 {
font-size: 150%;}h2 {
font-size: 1.2em;}
22
Specifying font size using em
• Font-size for h2 will be scaled by 1.2
• h2 heading will be 1.2 times the font size of the parent element (body 14px) h2 will be approx 17px
body {font-size: 14px;
}h1 {
font-size: 150%;}h2 {
font-size: 1.2em;}
23
Specifying font size using keywords
• Instead of specifying font size in pixels, or percentage, or em, another way is to instead use keywords
• Keywords are another way of defining size value
• Use xx-small, x-small, small, medium, large, x-large, or xx-large
body {
font-size: small;
}
24
Specifying font size using keywords
• Use xx-small, x-small, small, medium, large, x-large, or xx-large
• Each size is about 20% larger than the previous size
• Each brand of browser may define sizing slightly different
• Font size of small will appear close to 12 pixels
body {font-size: small;
}
25
Font sizing recommendations
Which sizing to choose?
• Use keywords small or medium for body font size
• Use either em or percentages to specify the other elements (like h1, h2), these elements will then be relative to your body size
body { font-size: small; }
h1 { font-size: 150%; }
h2 { font-size: 120%; }
26
Problems with specifying font size using px
• Internet Explorer? (web browser) does NOT support text the resizing of font size (through browser) if font sizes are specified using pixels
• Using pixels will reduce the accessibility of your pages by many users
• If you use keywords for your body’s font size and then em or % Internet Explorer will properly scale if user adjusts font sizing through browser
27
Ideal Font properties example
body {
font-family: Verdana, Geneva, Arial, san-serif;
font-size: small;
}
h1 {
font-size: 170%;
}
h2 {
font-size: 130%;}
28
CSS font-weight property
• Changing the weight of fonts with the font-weight property
• Allows you to control how heavy or bold, text will look
• Bolder and lighter are relative to its inherited value but are not supported consistently by browsers, thus not often used
• Use lighter, normal, bold, bolder
body {font-weight: bold;
}
29
Combining common properties Combine common properties into one rule, use comma
body {
font-family: Verdana, Geneva, Arial, san-serif;
font-size: small;
}
h1, h2 {
font-weight: normal;
}
h1 {
font-size: 170%;}
h2 {
font-size: 130%;}
30
font-style property
• Italic text is slanted and has extra curls on the serif
• Not all fonts support the italic style, oblique displays instead
body {
font-style: italic;
}
31
font-style property
• Oblique text is slanted using normal letters
body {
font-style: oblique;
}
32
Childs getting font styles from parents
• Most elements get their font styles from their parents
blockquote { font-style: italic;
}
• The <p> element below gets its font style from its parent <blockquote>
<body><blockquote><p>welcome to my webpage </p></blockquote></body></html>
33
Specifying color using RGB
• Web colors are specified using RGB
• Red, Green, Blue
• Additive colors, mixing all three creates the color white
• Mixing portions of these three colors can create all the colors we will use
• Removing all three colors 0% Red, 0% Green, 0%
34
Specifying color by name
• Only 17 predefined named colors
• Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow
body {background-color: silver;
}
35
Specifying color in red, green, blue values
• Specify the amount of red, green, blue
• Specify in percentage, amounts of each color
body {
background-color: rgb(80%, 40%, 0%) ;
}
36
Specifying color in red, green, blue values
• Specify using the numeric value between 0 and 255
• There are 256 different rgb colors
• Percentage relates to the color numeric value, 80% of 255 is 204
body {
background-color: rgb(204, 102, 0) ;
}
37
Specifying color in hex codes (recommended)
• Specify the amount of red, green, blue using the hex codes
• Start out with # then the first two digits represent red, the second two digits represent green, then the last two represent blue
• #CC6600 each set of two digits represent a number from 0 to 255, two digits made up of letters or numbers
body {background-color: rgb(#CC6600 ) ;
}
38
Hex codes based on 16 digits
• Ten digits 0 to 9
• Six digits A-F
• Enables using a single digit to count from 0 to 15– Hex value 0123456789 A B C D E F– Decimal value 0123456789 10 11 12 13 14
15
39
Understanding Hex code color
• Separate hex color into its three components
#CC6600
– Hex value CC 66 00– Color value Red Green Blue
40
Convert hex number into its decimal equivalent
#CC6600
CC 66 00
Red Green Blue
• For CC, use the left-most value C and determine its decimal value which happens to be 12
Hex value 0123456789 A B C D E F
Decimal value 0123456789 10 11 12 13 14 15
• CC has a decimal value of 12
41
Convert hex number into its decimal equivalent
#CC6600
CC 66 00
Red Green Blue
• C has a decimal value of 12• Times decimal value by 16
12 * 16 = 192• Add total above with right most value (C, C=12) 12 to get
decimal equivalent
192 + 12 = 204• 204 is decimal equivalent of CC in hex
42
Convert hex number into decimal reviewed5 steps
#B817E0 B8 17 E01. Separate hex color into its three (color) components
2. Start with the first color, use the left-most value 11 in example above (determine its decimal value if a letter, B=11)
3. Times decimal value 11 by 16 to get pretotal 11*16=176
4. Add pretotal with right most value 8 (determine its decimal value if a letter) 176+8=184
5. 184 decimal equivalent in hex
43
Convert hex number into its decimal equivalent
#CC6600
CC 66 00
Red Green Blue
• Repeat convert steps for each component
CC 66 00
204 102 0
– Hex value CC 66 00– Decimal equivelent 204 102 0
44
Hex code shorthand
• #ccbb00 = #cb0
• #11eeaa = #1ea
• #ccbb10 can’t be abbreviated
45
Different ways to specify colorFor example: Orange color
80% red, 40% green, and 0% blue
body { background-color: rgb(80%, 40%, 0%); }
(percentage)
body { background-color: rgb(204, 102, 0); }
(Scale 0-255)
body { background-color: rgb #cc6600; }
(Hex code recommended)
46
CSS text-decoration property
em { text-decoration : none; }
em { text-decoration : underline; }
em { text-decoration : overline; }
em { text-decoration : line-through; }
em { text-decoration : blink; }(not fully supported)
em { text-decoration : overline overline; }(combining decorations to achieve both)
47
Websafe colors no longer important
• Almost all computers can now display millions of colors
• Don’t have to worry about web safe palette, that was so 10 years ago!
48
Ways to pick colors
• Color charts
Do a online search for HTML Hex color chart
• Graphic applications
Use a color picker to get the RGB and hex code
49
Color recommendations
• Use colors with high contrast for the text and background to aid readability
• Black text with White background has the highest contrast
• Use dark hues for text and light hue for the background
• Avoid blue and orange and red and blue together
-end
top related