Cascading Style Sheets Review

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

  1. 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>

  2. 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>
     

  3. 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)  

Background

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

* 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.