CSS Properties and Values

Sources

• This reference sheet is based on material from w3schools.com and Liz Castro's HTML book (5th edition: Appendix B).
• The properties follow CSS recommendation 2 from W3C (WWW Consortium).

Selectors

This reference covers all the CSS2 properties and values you can implement in your styles. Of course, you will also need to specify which elements in your web documents are affected by using selectors in your external style sheets (styles defined in separate files and linked to one or more of your HTML pages) and internal style sheets (styles defined within HEAD section of an HTML page). Selectors are not required for inline styles since these style definitions are embedded within the element tags they affect.

Here's the style definition syntax: selector { property: value(s); }

where property:value(s); can be repeated any number of times within a style definition and multiple values are separated by spaces (but a space ater the colon is optional).

And here are a few pointers regarding selectors (the rest of this document covers properties and values):

1. The selector is often set to an HTML element tag. For example, to render all level 1 headers in red:

h1 { color: red; }

2. Mutiple HTML element tags can be separated by commas, e.g:

h1,h2,h3 { color: red; }

3. To specify particular instances of an HTML element, a class attribute can be included within each tag definition, as shown int he following example:

<h1 class="major"> a class of important headings </h1>

...and then used in a single style definition like so:

h1.major { color: red; } /* class uses period */

4. To specify a particular instance of an element, an id attribute can be used in the tag definition:

<h1 id="special"> identifying a specific heading </h1>

...and then used in the style definition like so:

h1#special { color: blue; } /* id uses number sign */

5. To specify a style that affects a class or id for any type of element, just leave out the tag portion:

.major { color: red; } /* class uses period */
#special { color: blue; } /* id uses number sign */

6. Two special HTML tags are often used in conjuction with styles (and have no other purpose except in programming):

<span id="reference"> encloses a portion of a line </span>

<div id="notes">
   encloses several lines
   encloses several lines
   encloses several lines
</div>

...now the selector can refer to these HTML tags with the specified class or id, like so:

span#reference { color: green; }
div#notes { color: olive; }

Notation

• Each CSS Property is shown as a row in the table below, along with a brief description, a list of possible values, and an indication of whether the property is inherited from its parent.
  
• A value shown in bold is the default for that particular property (i.e. if the property is not set)
  
• A value shown in italics is a placeholder and must be replaced with an appropriate literal value
  
• A value name followed by a percent sign (%) must be specified as a number from 0..100, followed by a % at the end (e.g. 50%)
  
• UNITS: A value name followed by a "pos" or appearing as length must be specified as a measurement with one of the following unit specifiers:
  • relative units: px (pixels) and em (text-height or "em-size"), for example 120px and 2em... these are relative to the screen resolution and current text height respectively
  • absolute units: in (inches), cm (centimetres), mm (millimetres), pt (points = 1/72 inch), and pc (pica = 1/6 in = 12 pts). Here are examples that represesent the same distance expressed in the various units: 0.5in, 1.27cm, 12.7mm, 36pt, 3pc
  • Refer to the w3schools CSS Units page for more information
    
• COLOURS: In CSS, colours can be specified in one of four ways:
1. by name - like HTML, except there are many more named colours available with CSS
2. by Hexadecimal RGB values: #rrggbb where r,g,b = 0..9,A..F as in HTML
   for example: #22FF44
3. by Decimal RGB values with the rgb function: rgb(n,n,n) where n = 0..255
   for example: rgb(34,255,68)
4. by Percentage RGB values: rgb(p%,p%,p%) where p = 0..100
   for example: rgb(13%,100%,26%)
• For colour samples refer to the w3schools CSS Colour Reference page or to our own JavaScript-generated 5,000 Colour Samples

Sections

• Background - background colour and/or image for elements
• Border - all aspects of a border on every sides of an element
• Control - element position, float, display and visibility (and cursor types)
• Dimension - element height, width, min/max range, and text line height
• Font - font characteristics incl: family, size, style, weight (see Text properties also)
• Generated Content - to add content to a page using pseudo-elements
• List and Marker - list characteristics: style, position, type , and offset
• Margin - spacing outside each of the four sides of an element
• Outlines - element outline colour, size, and width
• Padding - spacing inside each of the four sides of an element
• Positioning - element placement in relation to parent or page (plus depth index)
• Table - fine border, caption, cell, and layout settings
• Text - color, line/word/char spacing, alignment, decoraton, indent, etc. (see Font also)
• Pseudo-classes - elements can be formatted based on their state or dynamics
• Pseudo-elements - isolates a part of an element to be formatted separately

Background

Border

Control

Dimension

Font

Generated Content

List and Marker

Margin

Outlines

Padding

Positioning

Table

Text

Pseudo-classes

Pseudo-elements