Cascading Style Sheets ( CSS )
Cascading Style Sheets ( CSS ) are a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
By attaching style sheets, authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags. The W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994.
Style sheets allow web authors to take control of the web page and apply very specific typographic styles and spacing instructions for each element on the page.
How Do Style Sheets Work?
Style sheets consist of one or more rules for describing how a page element should be displayed.
The following example contains a number of rules for H1s and the formatting of paragraphs.
The first set of rules applies to all H1s: font-family specifies that H1s should be set in verdana, arial, helvetica or a sans-serif font; font-size specifies the size should be 1.1em (em is a length value and a relative measurement which is more web-friendly).
The second set of rules specifies that paragraphs will be font size 0.7em and text will be turquoise blue in color (using the RGB color value).
h1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.1em;
}
p {
font-size: 0.7em;
color: #006699;
}
A style rule is made up of two main sections: the selector (which identifies the element to be affected) and the declaration (the style or display instructions to be applied to that element). In the example above H1 and p are the selectors. The declaration, enclosed in curly brackets, is made up of a property and its value. Properties are separated from their values by the colon (:) character followed by a space. A property is a stylistic parameter that can be defined, such as color or font-family.
A declaration may contain several property/value pairs (as above). Multiple properties must be separated by semicolons (;).
Values are dependent on the property. Some properties take length measurements, some take color names, and others have a predefined list of accepted values.
Style sheets can be applied to HTML documents in 3 ways, as inline style directions, as style elements embedded at the top of the HTML file, and as external files that can be either linked to or imported into the document.
Inline Styles:
Style information can be added to an individual element by adding the style attribute within the HTML tag for that element e.g.
<h1 style="font: verdana, arial, helvetica, sans-serif; font-size: 1.1em">. This heading will be 1.1em in size and will use the first available font from the list</h1>
Inline style information is tied to each individual content element and any changes need to be made in every tag and in every file rather than on a global level.
Embedded Style Sheets:
A more compact method for adding style sheets is to embed a style block in the top of the HTML document using the <style> element.
The following example shows style rules embedded in a simple HTML document:
<html>
<head>
<style type="text/css">
<!--
h1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.1em;
}
p {
font-size: 0.7em;
color: #006699;
}
-->
</style>
<title>Style Sheets</title>
</head>
......
</html>
The </style> element must be placed within the <head> tags in the document. It is usually necessary to place HTML comment tags (<!-- and -->) around the </style> contents. This hides the style information from older browsers which don't understand the <style> tag.
External Style Sheets:
The most powerful way to use style sheets is to put them into a separate file. In this way you can make stylistic changes consistently throughout a site by editing the style file.
The style file is a simple text document. It cannot contain HTML tags or comments. Style sheets should be named with the .css suffix. There are 2 ways to call upon a style sheet from within an HTML document:
Linking:
The most standard way is to create a link to the style sheet using the <link> tag in the <head>:
<head>
<link rel="stylesheet" href="pathname/stylesheet.css" type="text/css">
</head>
Importing:
An alternative method to linking is to import an external style sheet into the <style> element using the @import function:
<!--
<style type="text/css">
@import url (http://pathname/stylesheet.css);
</style>
-->
The drawback to @import is its limited browser support (it is currently only supported by Internet Explorer v4.0+ and Netscape v6.0).
In both cases multiple style sheets can be applied to the same document. When additional @import functions are added within the <style> element, the style information from the last file read takes precedence over the previous files.
