CSS Tutorial
What Is CSS?
This manual is designed to be the textbook for a comprehensive course in CSS (cascading style sheets). No prior knowledge of CSS is necessary. However, a working knowledge of HTML is required.
The initial sections contain all the CSS that is currently supported in CSS1, and should render in IE6, assuming you care to support that browser. These preliminary sections include best practices too. The remaining sections introduce more advanced concepts of CSS2.1 and CSS3 that are supported by compliant browsers such as Firefox, Safari, Opera, and Internet Explorer 9, as well as properties that are not currently supported in any browser. There is an appendix containing a complete reference list of CSS1 and CSS2.1 properties, including quite a few CSS3 proposed properties.
Seeing that a poor implementation of CSS increases document weight, page load time, and developer churn, it is important for web developers to have a full grasp of what CSS is, and what it can do. Just as we separate presentation code from backend code, we should also strive to better separate HTML from CSS, that is, content from style. In other words, a more intelligent use of CSS will translate into cost reduction.
Cascading Style Sheets (CSS) is a slightly misleading term, since a website might have only one CSS file (style sheet), or the CSS might be embedded within an HTML file. It is better to think of CSS as a technology (in the singular). CSS is comprised of statements that control the styling of HTML documents. Simply put, an HTML document should convey content. A CSS document should control the styling of that content.
Because of this no formatting should be found in HTML—though there are occasional exceptions to this rule. HTML files should only contain semantic markup and content, though the term content is admittedly broad to include JavaScript. This means that we should no longer use styling attributes such as align, border, width, height, etc. in our HTML, nor tables for layout, though data tables are required to convey tabular information. Here are some examples of deprecated XHTML. The deprecated portions are highlighted.
<div align="center"></div>
<img src="this.gif" border="0" alt="" />
<table height="200">...
<td width="30"></td>
All these examples can easily be replaced with CSS. Don't worry if you don't understand these declarations yet.
div {text-align: center;}
img {border: 0 none;}
table {height: 200px;}
td {width: 30px;}
An HTML file points to one or more external style sheets (or in some cases a list of declarations embedded within the head of the HTML file) which then controls the style of the HTML document. These style declarations are called CSS rules.
CSS Rules
To apply a style, CSS uses the HTML document tree to match an element, attribute, or value in an HTML file. For an HTML page to properly use CSS, it should be well-formed and valid, and possess a valid doctype. If these conditions are not met the CSS match may not yield the desired results.
There are two types of CSS statements: rule-sets and at-rules. A rule set, also known simply as a rule, is the more common statement, and consists of a selector and a declaration block, sometimes simply called a block. The selector can be an element, class, or ID, and may include combinators, pseudo-elements, or pseudo-classes.
X {declaration; declaration;}
X {property: value; property: value;}
div > p {font-size: 1em; color #333;}
@import "subs.css";
The declaration block consists of the braces and everything in between. Within the declaration block are declarations, which consist of properties and values. Properties are separated from their values (also known as styles) by colons, and declarations are delimited by semi-colons. (Properties are also known as attributes, but that terminology is not used in this document lest we confuse CSS properties with HTML attributes.) White space inside a declaration block is ignored, which facilitates formatting the code in developer-friendly ways. For example, both of the following statements are valid and equivalent, though the latter slightly increases document weight.
h1 {color: blue; margin-top: 1em;}
h1 {
color: blue;
margin-top: 1em;
}
Ensure, however, that there is no white space between a value and its unit of measurement (e.g. 1.2em, not 1.2 em).
As opposed to rule sets, at-rules statements consist of the at-keyword "@", an identifier, and a declaration. This declaration is defined as all the content contained within a set of curly braces, or by all content up until the next semicolon. Note the following two examples.
@media print {
p {font-size: 10pt;}
tt {font-family: monospace;}
}
@import url(addonstyles.css);
Other examples of at-keywords are media, font-face, and page. At-rules will be treated separately below.
Properties
I have decided not to include a description of all CSS1 and CSS2.1 Properties (such as font-size, text-transform, border, margin, and many others) because they are numerous and can be examined in the Property References section of this site. Moreover, they are used throughout this tutorial and can be easily deduced. So we move directly to CSS1 selectors.