Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML, and in fact, any XML language. Presentation, again, refers to the way the document is displayed or delivered to the user, whether on a computer screen, a cell phone display, printed on paper, or read aloud by a screen reader. With style sheets handling the presentation, HTML can handle the business of defining document structure and meaning, as intended.
CSS is a separate language with its own syntax. This chapter covers CSS terminology and fundamental concepts that will help you get your bearings for the upcoming chapters.
The Benefits of CSS
Not that you need further convincing that style sheets are the way to go, but here is a quick rundown of the benefits of using style sheets.
• Precise type and layout controls. You can achieve print-like precision using CSS. There is even a set of properties aimed specifically at the printed page.
• Less work. You can change the appearance of an entire site by editing one style sheet.
• More accessible sites. When all matters of presentation are handled by CSS, you can mark up your content meaningfully, making it more accessible for non-visual or mobile devices.
• Reliable browser support. Every browser in current use supports CSS Level 2 and many cool parts of CSS Level 3.
How Style Sheets Work
1. Marking up the document
It is important to choose elements that accurately describe the meaning of the content. The markup creates the structure of the document, sometimes called the structural layer, upon which the presentation layer can be applied.
In this and the upcoming chapters, you’ll see that having an understanding of your document’s structure and the relationships between elements is central to your work as a style sheet author.
2. Writing the rules
A style sheet is made up of one or more style instructions (called rules or rule sets) that describe how an element or group of elements should be displayed. The first step in learning CSS is to get familiar with the parts of a rule. As you’ll see, they’re fairly intuitive to follow. Each rule selects an element and declares how it should look.
The following example contains two rules. The first makes all the h1 elements in the document green; the second specifies that the paragraphs should be in a small, sans-serif font.
h1 { color: green; }
p { font-size: small; font-family: sans-serif; }
In CSS terminology, the two main sections of a rule are the selector that identifies the element or elements to be affected, and the declaration that provides the rendering instructions. The declaration, in turn, is made up of a property (such as color) and its value (green), separated by a colon and a space.
3. Attaching the styles to the document
- External style sheets. An external style sheet is a separate, text-only document that contains a number of style rules. It must be named with the .css suffix. The .css document is then linked to or imported into one or more HTML documents (we’ll discuss how in Chapter 13). In this way, all the files in a website may share the same style sheet. This is the most powerful and preferred method for attaching style sheets to content.
- Embedded style sheets. This is the type of style sheet we worked with in the exercise. It is placed in a document using the style element, and its rules apply only to that document. The style element must be placed in the head of the document. This example also includes a comment (see the Comments in Style Sheets sidebar).
<head> <title>Required document title here</title> <style> /* style rules go here */ </style> </head>
- Inline styles. You can apply properties and values to a single element using the style attribute in the element itself, as shown here:
<h1 style="color: red">Introduction</h1>
To add multiple properties, just separate them with semicolons, like this:
<h1 style="color: red; margin-top: 2em">Introduction</h1>
Inline styles apply only to the particular element in which they appear. Inline styles should be avoided, unless it is absolutely necessary to override styles from an embedded or external style sheet.
Comments in Style Sheets
Sometimes it is helpful to leave yourself or your collaborators comments in a style sheet. CSS has its own comment syntax, shown here:
/* comment goes here */
Content between the /* and */ will be ignored when the style sheet is parsed, which means you can leave comments anywhere in a style sheet, even within a rule.
body {
font-size: small;
/* font-size:large; */
}
Resources for further reading
No comments yet (leave a comment)