standards-compliant XHTML

CSS basics

Cascading Style Sheets (CSS) is a standard layout language for the Web. It’s application allow designers and developers to easily control elements of presentation (font styles and sizes, colors, spacing) without modifying structured (X)HTML. A single CSS file can control the presentation of thousands of (X)HTML pages, making for consistent designs and smaller file sizes. While CSS is intended to replace use of table layouts, frames and other presentation hacks, it can be used in combination with these approaches and still be of great benefit.

CSS uses some plain English terms like “color”, “font” and “margin”. A CSS statement is called a rule; consider the following rule which would make all <h1> text blue: h1 { color: blue } A rule consists of two main parts: selector (h1) and declaration (color: blue). The declaration has two parts: property (color) and value (blue).

Examples can help

It can be difficult to understand all of these concepts without some detailed and complete examples, ‘Steal these layouts’ can help.

Print the cheat sheet for quick reference

Some folks enjoy the printed page for scanning and reading, ‘CSS cheat sheet’ offers a print-optimized summary of this page without all the explaination.

Linking to style sheets

While there are four methods for referencing style sheets, we are only including the two preferred by those who separate style from content. These methods must appear in the <head> portion of the document:

Link

<link rel="stylesheet" type="text/css" href="simple.css" />
A reference style sheet “simple.css”; typically, 4.0 and higher browsers understand this reference.

@import

<style type="text/css" media="all">@import "sophisto.css";</style>
A sophistocated reference style sheet “sophisto.css”; typically, only 5.0 and higher browsers understand this reference.

Note: @import has a great advantage: only standards-compliant (5.0+) browsers understand this reference; use this when you want to hide CSS from non-compliant (Netscape 4.x comes to mind) browsers.

Grouping and inheritance

Multiple tags can share a common set of selectors:

h1, h2, h3, h4, h5, h6 { font-weight: bold }
Selectors are separated by commas (,).

Also, declarations can be grouped:

p { font-weight: bold; color: red; font-size: 13px }
Declarations are separated by semi-colons (;).

Inheritance: elements will assume the style of previous elements:

h1 { color: red }
...
<h1>Welcome to <em>my</em> Web page!</h1>
Emphasized (<em>) text will be red because it’s enclosed in the <h1> element and therefore inherits color: red.

Class and ID

Classes allow different selectors to share declarations:

.note { border: 1px }
...
<p class="note">This paragraph is a note; it has a 1 pixel border around it.</p>
<h4 class="note">This heading is a note; it has a 1 pixel border around it.</p>
The class="note" attribute can be applied to any element to create a 1 pixel border. Class is different from ID in that it can be used unlimited times.

ID styles a single selector per it’s declaration:

#redbox { background-color: red }
...
<p id="redbox">IDs are considered unique and only this element can have the “redbox” ID.</p>
IDs are unique and can only be used once in a document.

Font

One of the most heavily argued subjects on the Web reguards font styles and sizes. Keeping font sizes in a relative unit is always a safe way to go for usability and readability.

h1 { font-family: Verdana, Arial, sans-serif; }
h1 { font-weight: bold; }
h1 { font-size: 1.3em; }

Shorthand

h1 { font: bold 1.3em italic verdana, sans-serif; }
Renders all h1 text 1.3 EMs tall, in bold Verdana — if Verdana does not exist the next specified font will be used (Arial, or a generic sans-serif if Arial is not found). It is good practice to always include a generic alternative of a typeface.

Note: Most 4.x (and IE 5.x for Windows) browsers do not allow for increasing a fixed font size (anything in px). This could potentially render text unreadable for some visitors.

Font-family generic values: serif (Times), sans-serif (Helvetica or the terrible rip-off Arial), cursive (Zapf-Chancery), fantasy (Western), and monospace (Courier).

Font-style values: normal (default), italic, and oblique.

Font-weight values: normal, bold, bolder, lighter, 100, 200, 300, 400 (or normal), 500, 600, 700 (or bold), 800, and 900.

Other text properties

Typographers will enjoy tracking (horizontal spacing between characters), word spacing and leading (vertical spacing between lines) control with CSS.

All values can be px, em, or % (percent)

word-spacing: 11px;
Adjusts spacing between words.

letter-spacing: 100%;
Adjusts spacing between letters (tracking).

line-spacing: 3em;
Adjusts spacing between lines (leading).
Hint: line-height can be controled in the shorthand form of font (e.g. font: 11px/3em Georgia, Times, serif;).

text-align: right;
Describes how text is aligned in an element (left, right, center, or justify).

text-transform: uppercase;
Transform any characters to another case (uppercase, lowercase, capitalize, or none).

Note: tracking is far from perfect in CSS. It may be best to avoid tight tracking (negative values) for things other than headings (h1, h2, h3).

Color

If you use color to emphasize content, be sure your content still makes sense without your style sheet.

color: red;
or color: #FF0000; (same as above)
or color: rgb(255,0,0); (same as above)

Shorthand (each character is repeated)

em { color: #FF0000; }
becomes em { color: #F00; }

Just as strong { color: #66CC66; }
becomes strong { color: #6C6; }

The above would render <em></em> and <strong></strong> a color, but using these elements ensures that text will be emphasized even without your style sheet.

Background

background-color: #554411;
background-image: url(texture.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 100% 100%;

Shorthand (color shorthand is same as above)

background: #541 url(texture.gif) repeat-y fixed 100%;

CSS body backgrounds can be placed anywhere on the screen. Backgrounds can be applied to almost any element, including: div, span, h1, and ul.

Lists

Lists are often utilized for navigation menus and their appearance can be drastically altered with CSS.

ul { margin: 0 }
This CSS will eliminate the hard returns above and below an unordered list.

ul, li { margin: 0; padding: 0; display: inline }
An unorderd list (<ul>) is great for navigation menus; each menu item is a list item (<li>) and by utilizing display: inline the entire list will occur on a single line.

Note: by manipulating display: inline along with padding values for a, great sudo-graphical menus can be reproduced with plain text.

CSS units

Units are either absolute or relative. Relative units (em, pt, % [percent]) are dynamic; relative font sizes can be scaled up/down by the user. Absolute units (px) provide the designer with more control over size and position, but can compromise users, resulting in content that is too small/large, overlapping and otherwise inaccessible.

Box model

CSS treats all elements with a box-like formatting model. The box model allows for a few standard declarations to be applied to almost any CSS selector; width, height, margin, border, padding, color, background-color, font and display are a few. Consider this example of a heading:

h1 {
width: 200px;
margin: 0;
border: 1px dotted;
padding: 3px 7px;
color: #fff;
background-color: #7E95AC;
font: bold 16px arial, sans-serif;
}
In a standards-compliant Web browser, this CSS will render all <h1> tags similar to:
h1 heading example

Some things to consider about the box model: