The example below illustrates a typical style rule. The p represents the HTML element <p></p>. The style rule contains instructions to use the font-family arial at 90% size. If the visitor's browser can't find the arial font, it will use its default sans-serif font instead. A style rule consists of a selector and a set of one or more declarations surrounded by curly braces. In this example the p is a selector. A declaration is the combination of a property and its values . In this example, font-family and font-size are properties, and the font names and 90% are values. Use a colon between the property and its values. Use a semi-colon at the end of each declaration. The declaration is contained by the curly braces { and }.
p { font-family: arial, sans-serif; font-size: 90%; }
Element selectors refer to HTML elements. You can create style rules for a single HTML tag such as the first rule below. You can also create style rules that apply to a group of HTML tags by separating them with commas as in the second rule below.
h1 { font-family: sans-serif; color: maroon; }
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; color: maroon; }
Contextual selectors indicate the style of an HTML in a given context. The example below will set the color of bold text to green wherever the <b></b> tag pair is contained within a <h1></h1> tag pair.
h1 b { color: green; }
Class selectors change the style of HTML content identified as belonging to a given class using the class attribute. The example below shows the style rule and the HTML class attribute. Notice the selector begins with a period.
.huge { font-size: 300%; }
<p class="huge">This will be really big text.</p>
ID selectors change the style of HTML content identified using the ID attribute. The example below shows the style rule and the HTML ID attribute as it would appear in an HTML document. Notice the selector begins with a hash mark.
#tiny { font-size: 50%; }
<p id="tiny">This will be really small text.</p>
Pseudo-class selectors are available for the <a></a> tag only to reflect the different states of a link. Note the use of the colon within the selector.
a:link { color: blue; }
a:visited { color: black; }
a:active { color: green; }
a:hover { color: red; }
Pseudo-element selectors are available to identify sub-parts of an element. The commonly used pseudo-elements are first-letter (for dropcaps, mostly) and first-line. The dropcap effect is usually created using a class selector as seen below. This allows you to create a drop cap effect on any paragraph just by changing its class attribute value.
p.dropcap:first-letter { font-size: 300%; float: left; color: red; }
p:first-line { color: red; }
You may choose values using keywords, length values, percentage values, colors, and URLs.
Keywords include values such as small, large, medium, normal, dotted, etc.
Length values are positive or negative numbers followed by a two-character abbreviation to indicate the unit of measurement. Absolute values can be stated in inches (in), centimeters (cm), points (pt, 72 points to an inch), or picas (pc, 1 pica is 12 points). Relative values may be stated in Em-height (em, the height of the character box for a given font), X-height (ex, the height of the lower-case x in a given font), or pixels (px). In practice, pt is the most consistently implemented absolute value and em is the best choice for a relative value. X-height is reliable only on IE5Mac.
Percentage values are often used for font-size and line-height. Percentage values are relative to the default values of the visitor's browser.
Colors may be given in hexadecimal or rgb notations or color names may be used.
The standard hex-pair notation gives red, green, and blue values for a color in three pairs of two-character hexadecimal numbers (#FFFFFF for white, #000000 for black, #FF0000 for red, etc.). The short form hexadecimal notation uses only the first character of each pair and assumes the second character to be the same (#F0F would create the same purple color as #FF00FF).
RGB notation may use percentage values or decimal values (0 to 255) for red, green, and blue. Both notations below would produce a purple color by combining red and blue with no green.
rgb (100%,0%,100%)
rgb (255,0,255)
Keywords exist for the 16 colors aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
URLs are often used to choose background images for a page. CSS defines urls as relative to the page containing the style sheet.
url( niftybackground.jpg )