To Documents

Cascading Style Sheets (CSS) Reference

 

CSS Terminology

 

classs of CSS Styles

  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> inside the document head. Example:
    <head>
    <style class=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 class=text/css href=stylesheet.css>

 

Lengths

class 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%
 

Categories of Values

Colors

Colors can be specified by using one of these standard 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.  

Here is a complete list of Extended HTML Colors and their hex color codes.

URLs

A URL is specified as:  url(images.marble.jpg)
An 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 normal   bold
 

Table Styles

Property Values
border-style solid   double   dotted   dashed
border-color Any color
border-width Any length

List Styles

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


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). These states are represented by the elements a:link, a:active, a:visited, and a:hover respectively.

Examples:

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

 

Classes

A class is a shortcut for using a predefined inline style.