Cascading Style Sheets – An Overview
CSS separates style rules from the structured content to which they apply. This overview will first explain how to create CSS rules, and then how to apply the styles to HTML.
Creating CSS Rules
A CSS rule designates a style to be applied to an element. A rule consists of a selector and a declaration. A selector identifies the HTML content to be styled. A declaration describes the styles to be applied. The following example applies the color green to level 1 headings:
h1 { color: green }
The selector is h1 and the declaration, contained inside the curly braces, consists of a property and value separated with a colon.
A declaration can have multiple property-value pairs separated by semicolons. A rule may be typed on one line or line breaks may be added to improve readability, as in the example below:
p {
font-family: "times new roman ", serif;
color: red;
text-align: left
}
This rule sets the font in the paragraph element to Times New Roman or the default serif font on the computer, the font color to red, and the alignment to left.
As you can see in the example, the value for the font-family property may have several parts separated by commas, and if a font name contains more than one word (such as Times New Roman) it should be surrounded by straight quotation marks.
Multiple selectors may be indicated for a single CSS rule by listing a number of selectors separated by commas. The following example assigns a font type and color to paragraphs, ordered lists and unordered lists:
p, ol, ul {
font-family: verdana, sans-serif;
color: red
}
Applying Styles to HTML
There are three methods of applying styles to HTML:
1. External Style Sheets
An external style sheet is used to apply a given style to a number of pages. The rules describing the style are saved as a separate text file with a .css filename extension (for example, mystyle.css). Here is an example of a simple external style sheet defining the appearance of headings, paragraphs and lists:
h1, h2, h3, h4 {
font-family: verdana, sans-serif;
color: green;
text-align: center
}
p, ol, ul {
font-family: "times new roman ", serif;
color: maroon;
text-align: left
}
Next, a link to that file is placed in the head section of each page to which the style is to be applied, using the <link> tag:
<link rel="stylesheet" type="text/css" href="mystyle.css">
The rel and type attributes don’t change; the value of the href attribute is the name of the file containing the style sheet rules.
2. Internal Style Sheets
An internal style sheet is used to apply style to a single page. In this case, the style sheet itself is placed in the head section of the document using the <style> tag:
<style type="text/css">
h1, h2, h3, h4 {
font-family: verdana, sans-serif;
color: green;
text-align: center
}
p, ol, ul {
font-family: "times new roman", serif;
color: maroon;
text-align: left
}
</style>
3. Inline Style Sheets
An inline style sheet is used to apply style to only a specific portion of the page. The rules are placed as an attribute inside an HTML tag:
<p style="font-family: arial; color: brown"> … </p>
The Concept of “Cascading”
When multiple rules conflict, the style sheet rules “cascade” so that rules closest to the actual content take precedence. Thus, the rules of an internal style sheet will take precedence over those of an external style sheet, and the rules of an inline style sheet will take precedence over those of the internal style sheet.
Units of Measurement
Two types of units may be used with CSS – absolute and relative.
Absolute units refer to measurements that are independent of the context. They include:
The use of absolute units can cause problems since HTML pages can be viewed on a wide variety of output devices.
Relative units of measurement are calculated in reference to the element’s initial (default) value. They include:
Relative units of measurement provide more flexibility, since they typically depend on the font size. Thus they will scale to the appropriate size depending on the output medium.
Classes
Classes are rule sets that can be selectively associated with any HTML element. The selector for a class rule set starts with a period, followed by the name that you want to assign to the selector. For example:
.special {
font-size: 0.75em;
font-family: verdana, sans-serif;
background-color: yellow
}
To apply a set of class rules, use a class attribute with the value set to the name of the class. For example:
<p class="special"> This paragraph will use smaller Verdana font and yellow background color</p>
The <div> tag in combination with classes can be used to apply style to a number of block-level elements (for example, a series of paragraphs):
.notes { font-size: smaller; }
<div class="notes">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>
The <span> tag can be used to apply style to any sequence of characters:
.warning { color: red; }
<p>An important<span class="warning">warning</span>:</p>