6.2 Style Sheet Structure

A style sheet contains one or more styles, usually called rules. Each rule has the following structure:

Selector {formatting}

• Selector specifies which parts of the HTML document the rule is to be applied to.
• Formatting defines the formatting of the rule.

A style sheet can be located either within the HTML document (in the section) or as a separate file that is linked to the HTML document. In fact, a given HTML document can have internal and external style sheets.

Style rules cascade so that the end result is a combination of the document’s various style sheets. If a certain aspect of formatting is not specified for a child element, it will (in most cases) inherit the formatting of its parent (enclosing) element.

To create an inherit style sheet, place the following in the head section of the HTML document:

<style>
style rules comes here
</style>

To use an external style sheet, use a text editor to create a text file containing the style rules and save it with the .ccs extension. Then place a reference to the file in the head section of the HTML document as follows:

<link rel=”stylesheet” type=”text/css” href=”MyStyleSheet.css” />

This assumes that the style sheet file is in the same folder on the Web server as the Web page. If not, then specify the full path in the href attribute. The rel=”stylesheet” and type=”text/css” parts of the link tag tells the browser what kind of file is being linked to, and how the browser should handle the content. You should always include these attributes when linking to a .css file. A style sheet can also contain comments. They are ignored in processing and can be useful for documenting your styles. A comment starts with the characters /* and ends with */, as in this example:

/* This is a CSS comment. */