Chapter 8. Styling with Fonts and Colors: Expanding Your Vocabulary
Font family
A font family is a set of fonts that share common characteristics. The font families for the Web are serif, sans-serif, monospace, cursive, and fantasy. Serif and sans-serif fonts are most common.
CSS color hex code structure
A six digit code where each digit is in the range 0-F. The first two digits represent the amount of red, the second two the amount of green, and the third two the amount of blue.
CSS pre-defined colors
CSS has 16 basic colors, including black, white, red, blue, and green, and 150 extended colors.
Web color: Black
Created by mixing 0% red, 0% green, and 0% blue.
Web color: White
Created by mixing 100% red, 100% green, and 100% blue.
Web colors
Created by mixing different amounts of red, green, and blue.
Font size keywords
Default font sizes that are translated by the browser into pixel values. Standard keywords are: xx-small, x-small, small, medium, large, x-large, and xx-large.
Specifying font sizes
Font sizes are specified using px ("pixels"), em, %, or keywords.
Font-weight property
Specifies bold text.
Font-style property
Specifies italic or oblique text.
Font size in em or %
Specifies the font size relative to the font size of the parent element.
CSS color specifications
Specify colors by specifying the amount of red, green, and blue using percentages, a numerical value 0-255, or that value's corresponding hex code.
Installed fonts
Unless web fonts are used, the browser will use the fonts installed on the computer, which may not match the fonts specified in the CSS font properties. Specify font alternatives in the CSS font-family property in case the computer doesn't have the preferred font. Always make the last alternative a generic font, like serif or san-serif, so the browser can make an appropriate substitution if necessary.
Finding CSS color hex codes
Use a photo editing application's color picker or an online tool to find the hex code of a specific color.
CSS font properties
Use font properties such as font-family, font-weight, font-size, and font-style to control the appearance of text elements.
Font size specification in the body rule
Use font size keywords to set the base font size in the body rule so the browser can scale the font sizes if the user wants larger or smaller text.
Web fonts
Use the @font-face rule to specify a web font. The browser will download the font files referenced by the rule.
Font size in pixels ("px")
Specifies the height of the letters in pixels.
Text-decoration property
Specifies underlined text. Use this property sparingly, users often confuse underlined text as linked text.
Italic versus oblique
Italic is an italic version of a font, oblique is the normal font slanted.
Advantage of relative font sizes
Relative font sizes can make web pages more maintainable
