CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!color. The value 255 equals 100% of the color. Using 255 for red, green, and blue
makes white.- background-color:WindowInfoBackground; assigns the operating system color
WindowInfoBackground to background-color. Notice how operating system color
constants are in CamelCase.
7 - font-style:italic; assigns the constant value of italic to font-style. The font-
style property also allows two other constant values: normal and oblique. - font-size:20px; assigns a length of 20 pixels to font-size. You can assign a variety
of measurements to most properties including px (pixel), em (height of the font or
font-size), ex (height of the letter “x”), pt (point, i.e., 1/72 of an inch), in (inch), cm
(centimeter), mm (millimeter), and pc (pica, i.e., 12 points, or 1/6 of an inch). - font-family:"Century Gothic", verdana, arial, sans-serif; assigns a comma-
delimited list of font names to font-family. If the first font name is unavailable, a
browser uses the second, and so forth. The last font name should be one of the
generic font names: “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”, which
work in every browser. Whenever a font name contains a space, it must be
enclosed in double quotes, such as "Century Gothic". - line-height:150%; assigns 150% of the font-size to line-height.
- margin:1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).
- border:4px double black; creates a black, 4-pixel, double-line border. Notice how
border takes three space-delimited values that represent the border’s width, style,
and color. The sequence of the values does not matter. border is a shortcut
property for three properties: border-width, border-style, and border-color.
There are several other shortcut properties including background, font, list-
style, margin, and padding. - padding:0.25em; assigns one-quarter of the font size to padding (i.e., font-size
multiplied by 0.25). - background-image:url("gradient.jpg"); assigns the gradient.jpg image to
background-image using the url function, which takes the URL of a file as its only
parameter. I always put a URL in quotes, but you have to only if the URL contains
whitespace. - background-repeat:repeat-x; assigns the constant repeat-x to background-
repeat. Other background-repeat values include repeat-y, repeat, and no-repeat. - margin:0; assigns zero to margin. Zero is the only length that may be specified
without a unit of measurement. All other lengths must be immediately followed by
a measurement, such as 1px, -1.5em, 2ex, 14pt, 0.5in, -3cm, 30mm, or 5pc. - font-weight:900; assigns the constant 900 to font-weight. This number is actually
a constant. You can use the following constants for font-weight: normal, bold,
bolder, lighter, 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , or 900. (Note that browser
(^7) Each time you assign the same property to the same element, the new rule overrides the previous rule.
Since the example contains four background-color rules in a row, the last one is applied.