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).
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="site.css" />
A reference style sheet “site.css”; typically, 4.0 and higher browsers understand this reference.
@import
<style type="text/css" media="all">@import "doc.css";</style>
A sophistocated reference style sheet “doc.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 selectors can share a common declaration:
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 enclosing 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
The basic syntax for writing style sheet rules (definitions) is element / class / id (selector) name followed by a space or a tab and style sheet attributes (declaration) enclosed in curly brackets. Each attribute is separated by a semicolon (;):
TD {font-family: Arial; font-size: 12px; margin-left: 20; margin-right: 20;}
You can assign a style to a subset of elements in a document (for example the <P> element) by creating a "class." The syntax for creating a class is:
p.classname {margin-left: 15px; margin-right: 15px}
You could then use that class of the <P> element with the following syntax:
<P class="classname">
You can also create classes that are not bound to a particular element and apply them to any element you choose:
.important {color: red; font-weight: bold;}
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 lets you define a rule that applies only to one element in the entire document. You can bind it to a particular element or leave it by itself. Whether you choose to bind it to an element or not, an ID can only be used once. ID's are identified in the style sheet by a # in front of it:
#specialid {border: 3px; color: purple;}
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 assign a name to an element. This name must be unique in a document.
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:
Some things to consider about the box model:
- Have patience, as it can be complicated and render unexpectedly in certain browsers.
- Margin values are applied to the outside of a box.
- Padding values are applied to the inside of a box.
- All HTML elements are treated as a box; virtually any element can be moved, positioned, colored and altered with proper use of CSS.
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 (space between characters), word spacing and leading (space 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
List 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 inline unorderd list (<ul>) is great for menus; each menu item is a list item (<li>) and display the entire list 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.
Examples can help
It can be difficult to understand all of these concepts without some detailed and complete examples, these pages (to come) should help.
Print the cheat sheet for quick reference
A print-optimized page for scanning and reading, ‘CSS cheat sheet’ offers a summary of this page without all the explaination.