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 families 1.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: Verdana Arial Black Trebuchet MS Arial Geneva

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: Times Times New Roman Georgia

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: Courier Courier New Andale Mono

12 font-family Cursive Cursive family Fonts that look handwritten Playful or stylized feel Useful for headings Examples: Comic Sans Apple 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 Ninja Impact

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 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 Mono Arial Arial Black Comic Sans Courier New Georgia Impact Times New Roman Trebuchet 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 element below gets its font style from its parent welcome to my webpage

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 A B C D E F –Decimal value

39 Understanding Hex code color Separate hex color into its three components #CC6600 –Hex value CC –Color value Red Green Blue

40 Convert hex number into its decimal equivalent #CC6600 CC Red Green Blue For CC, use the left-most value C and determine its decimal value which happens to be 12 Hex value A B C D E F Decimal value CC has a decimal value of 12

41 Convert hex number into its decimal equivalent #CC6600 CC Red Green Blue C has a decimal value of 12 Times decimal value by * 16 = 192 Add total above with right most value (C, C=12) 12 to get decimal equivalent = is decimal equivalent of CC in hex

42 Convert hex number into decimal reviewed 5 steps #B817E0 B8 17 E0 1.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= decimal equivalent in hex

43 Convert hex number into its decimal equivalent #CC6600 CC Red Green Blue Repeat convert steps for each component CC –Hex value CC –Decimal equivelent

44 Hex code shorthand #ccbb00 = #cb0 #11eeaa = #1ea #ccbb10 can’t be abbreviated

45 Different ways to specify color For 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