To Documents

Cascading Style Sheets (CSS) Reference

Syntax Basics

Syntax rules are the basic units of syntax for CSS. A rule includes at least two parts: a selector
(the name of an HTML tag) followed by curly braces { }.  The braces enclose property : value
pairs separated by semicolons, i.e.:

selector { property1 : value1; property2 : value1 value2 value3; ... }

For example,

h1 { font-size: 200%; font-style: italic; color: red }

h1 is the selector
font-size, font-style, and color are style properties
200%, bold, and red are style values

Methods of Using CSS Specifications

  1. Inline: Place as an attribute in the start tag of an element.  Example:
    <h1 style="font-size: 200%; font-style: italic; ">
     
  2. Document-level: Place within <style> and </style> within the document head. Example:
    <head>
    <style type="text/css">
        h1  {font-size: 200%; font-style: italic; }
    </style>
    </head>
     
  3. External: Also called linked. Create a separate .css file with formatting information. Include
    the following line within the document head to link to the .css file:
    <link rel=stylesheet type="text/css" href="stylesheet.css">
 

Precedence Rules

  1. A document-level style sheet takes precedence over an external style sheet.

  2. An inline style takes precedence over a document-level style sheet.

  3. An html attribute takes precedence over a CSS style.

  4. If more than one style applies, the style applied last applies.

 

Lengths

Type Unit Example
Absolute Inch 0.5in
Absolute Centimeter 1.2cm
Absolute Millimeter 8mm
Absolute Point 12pt
Pixels Pixel 25px
Relative Em 2em
Relative Ex 1.3ex
Percentage Percent 150%


Colors

Colors can be specified by using one of the predefined color names:
aqua  black  blue  fuchsia  gray  green  lime  maroon 
navy  olive  purple  red  silver  teal  yellow  white

Colors can also be specified by using a hex color code such as #F0A431
 

URLs

A URL is specified like this:  url(images/marble.jpg)
A URL can also contain an absolute address:  url(http://www.depaul.edu)
 

Text

Property Values
letter-spacing A length
line-height A length
text-align left  center  right  justify
text-decoration none  underline  overline  line-through
text-indent A length (positive or negative)
vertical-align baseline  middle  sub  super  text-top
text-bottom  top  bottom
word-spacing A length


Color

Property Values
background-attachment scroll  fixed
background-color A color
background-image A URL
background-repeat repeat  repeat-x  repeat-y  no-repeat
color A color


Fonts

Property Values
font-family Any font that resides on the browser's computer.
font-size A length
font-style normal  italic
font-weight 0 to 999.  400 is normal.  700 is bold.
 

List Styles

Values for the list-style-type property:
circle  disc  numeric  upper-alpha  lower-alpha  upper-roman  lower-roman
 


Hyperlinks

There are four states that a hyperlink can be in: link (not selected and not visited), active (currently selected and
being processed by the browser), visited (already visited by the user), and hover (the mouse has moved
over the link).  Examples:

a:link    { color: blue; }
a:active  { color: red; font-weight: bold }
a:visited { color: green; }
a:hover   { color: white; background-color: red; }