Stylesheet Summary

Writing rules

In an external stylesheet, only the rules are included. The property and value information is written inside curly braces.

        element_symbol_1 {property1:value1; property2:value2}
        element_symbol_2 {property1:value1; property2:value2}
        ...

In a stylesheet in the document HEAD, the sheet is placed between style tags. The property and value information is written inside curly braces following the element symbol.

    <style type="text/css">
        element_symbol_1 {property1:value1; property2:value2}
        element_symbol_2 {property1:value1; property2:value2}
        ...
    </style>

Inline, as the value of style attribute in a tag, the property and value information is written inside quotes.

     <element_symbol style="property1:value1; property2:value2" >

Special attributes

Classes

The class attribute categorizes an element as part of a group. Several elements can be given the same class. The class is specified in the style rule with a dot, preceded by the element (asterisk * to indicate any element), and followed by the class name. For example, *.menubar

IDs

The ID attribute identifies an element uniquely within the document. It can be used only once per document. The element is specified in the style rule with the symbol # immediately followed by the ID. For example, #firstpara

Pseudo-classes

Pseudo-classes are special cases of elements. The ones we use are for anchors - a:link, a:visited, a:active, and a:hover.

Example stylesheet

        body {background-color:#ffffff;  color: black}
        h1 {font-family:"Comic sans", cursive;  
            color: #ff9922}
        a  {color: blue}
        a:hover (color: lime}
        p {color: black; 
           margin-left: 10px;  margin-right: 10px}
        #special {font-size: 150%;  
                  color: orange; 
                  margin-left: 20px; margin-right: 20px}
        img {height: 200px;  width: 100px; 
             border-style: groove;  border-color: red}

Style properties summary

property	applies to	description	some posible values
background-color	most elements displayed as boxes (body, p, h1, h2, strong, etc. Also input)	the color that fills the element's rectangular box	a color value in the #xxxxxx form, or one of the 17 named colors.
background-image	most elements (body, p, h1, h2, strong, etc.)	the background image that tiles the rectangular box	a URL in the form url(location_of_image), with the relative or absolute URL in the parentheses.
color	most elements	the color of the text in the element	same as background-color
font-family	most elements	which font (typeface) to use to display the text.	Any font family names. Muliple names are separated by commas. Names that include a space must be enclosed in quotes.
font-size	most elements	how large to display the text	xx-small, x-small, small, medium, large, x-large, and xx-large; also in percentage, pixels, or ems
font-weight	most elements	boldness of the text	bold, normal
font-style	most elements	other style of the text	italic, normal
text-align	most block elements (body, p, h1, etc.), not inline ones	how the text is lined up along the sides of the block	left, right, center, justify
margin	most elements	space to allow around the outside of all four sides of the box	length (pixels) or percentage
margin-top, margin-bottom, margin-left, margin-right	most elements	space to allow outside one side of the box	length (pixels), percentage, or auto
height, width	most block elements, including images and horizontal rules	the dimensions (height and width) of the box	length (pixels) or percentage (of the next outer box)
border-color	most elements, including images and horizontal rules	color of the border around the box	same as background-color
border-style	most elements	defines the general pattern to use for the border. Appearance will vary with different browsers.	none, solid, dotted, dashed, double, groove, ridge, inset, outset. Note: default is none; you must specify a border-style to have a border.
border-width	most elements	thickness of the border	thin, thick, length (pixels), or percentage
border	most elements	specifies multiple properties at once.	border style, width, and color values
Note; you can also specify border-right, border-left, border-top, border-bottom separately.
list-style-type	ul and ol	Specifies the type of marker or number to be used with list items.	none (for both types) disc, circle, square (for ul) decimal, upper-alpha, lower-alpha, upper-roman, lower-roman (for ol)
vertical-align	td	Specifies the vertical alignment of the text in the table cell.	top, bottom, center
display	all elements	Specifies how the element is to be rendered, including possibly removing it completely.	block, inline, none