Cascading Style Sheets

Cascading Style Sheets Reference

CSS Terminology

The three parts of a CSS style declaration are the selector, property, and value.
A property is separated from its value by a colon (:). Property/value pairs are separated with semicolons (;).
In this inline style <body style="color:maroon">,
body is the selector, color is the property, and maroon is the value.
In this internal style sheet <style> p {font-family:Arial; font-weight:bold} </style>,
p is the selector, font-family and font-weight are the properties, and Arial and bold are the values.

Types of CSS Styles

Inline: Place as an attribute in an opening tag (not a closing tag). Example:

<h1 style="font-size: 200%; font-style: italic;">
Chapter 1
</h1>
Internal style: Also called document-level. Place between <style> and </style> in the head of the document. Example:

<head>
<style type="text/css">
h1 {font-size: 200%; font-style: italic;}
</style>
</head>
External style: Also called linked. Create a separate .css file containing the style declarations. Include the following tag in the head of the document to link to the .css file:

<link rel=stylesheet type="text/css" href="stylesheet.css">

Lengths

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

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 for a background image is specified as: url(images/marble.jpg)
An URL can also contain an absolute address: url(http://www.depaul.edu)

Color

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

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
color *	A color

Table Styles

Property	Values
border-style	solid double dotted dashed
border-color	Any color
border-width	Any length
border *	See lecture notes

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

* You should know these tags for the midterm and final exams. You should also know the following.

List Styles

Values for the list-style-type 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.

Class definition:
.blue { font-family:Arial; color:blue }
Inline style:
Here is the <span class="blue">blue lettering</span> in the sentence.

Web reference

All of the properties and values are listed at W3C Schools CSS Reference.

To Documents