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
- Inline: Place as an attribute in the start tag of an element.
Example:
<h1 style="font-size: 200%; font-style: italic; ">
- 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>
- 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
- A document-level style sheet takes precedence over an external style sheet.
- An inline style takes precedence over a document-level style sheet.
- An html attribute takes precedence over a CSS style.
- 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;
}