Which element should we use to point the browser to an external style sheet?

As add more pages to your site, you'll find it may become harder to keep the formatting consistent. Plus as you acquire more skills and become more concerned about how your web pages look, you may also become frustrated with the design limitations of HTML.

Originally, HTML's focus was to make highly formatted documents available over the Internet, and it was never meant to be a page layout language. But with the rapid expansion of the web from the original particle physics community to what we see today, there grew to be the emergence of the new field of "web design", and concern about how best to present digital information to the masses. In other words, better readibility and more attractive pages. The introduction of tables was greeted with joy by the new field of web designers, as it allowed the presentation of tabular data that could include images and the creation of mulitple columns.

But continued frustration over lack of control over color, size, indents, margins and other page layout characteristics, long available in traditional word processors and desk-top publishing programs, lead to the introduction of Cascading Style Sheets. CSS enable you to to define typographic information once and install it in a central location, and also allows for considerably more creativity and flexibility when using HTML tags. Additionally, it eliminates repetitive typing of of tag attributes, reducing file size and allowing for cleaner, more precise and easier to read code.

Styles change the default properties of HTML tags and can be applied to a single tag, the whole page, or all of the pages in a web site. There are three kinds of styles.

Inline styles are those that are used as part of the HTML tag itself. Embedded styles are located in the header of a page, and apply to that entire page. An external style sheet is a separate text file that each page in the web site can link to it in order to receive it's instructions.

The expression "Cascading Style Sheets" refers to the fact that you can use all three types of styles in a single document, with inline styles overriding conflicting specifications in the header, and the embedded style in the header overriding settings from an external style sheet. When a browser interprets style codes, it resolves conflicts by proceeding in a hierarchical fashion from external to embedded to in line, with precedence given to the more local codes. This allows you more flexibility in your design process, as you to make changes for a special cases. You might want all your headers to be 24 point, blue verdana, for example, but should there be one case in which you want a header to be 36 point red, you can create an inline style for it that will override the external settings.

The same kind of inheritance applies within the elements of a page as well. You can specify that all the text on a page be brown by refining the tag. But if you want headers to be blue and list items to be green, you can create styles for them, and they'll override the more general statement for color in the tag.

Not all definitions work with all tags. For the purposes of style, HTML tags fall into four general categories. The tag, block level tags that have a line break before and after, such as headers and paragraphs; inline tags with no breaks like anchor tags and font tags; and image tags that have a height and width associated with them. What style definitions work with what kind of tag will become fairly obvious as you begin to work with styles, but in the beginning you may become frustrated with it.

Style sheets are recognized only by the newer versions of the browsers. Fortunately, the older versions just ignore them, and use the default settings for display.

A more annoying problem is that the major browsers, not surprisingly, have chosen to implement them differently. This means that you should check your pages on both Internet Explorer and Netscape, and also on a Macintosh and a PC, and be prepared for unexpected results.

One solution often used by commercial sites is to prepare two style sheets, one for Netscape and one for Internet Explorer, then use a browser detection script to provide the appropriate style to customer. For the rest of us, I think this is just too much work. Better solutions are to stick to the more universal properties that are supported by both browsers and avoid "browser specific" style definitions. Another is to first create your pages without styles and when it looks acceptable, add styles. This will mean it will "degrade" gracefully if displayed in an older browser.

Until now, browsers haven't minded if you haven't closed tags for paragraphs with

or list items with , for example. With the emergence of style sheets and other possible web technologies down the road, however, it's critical to clearly define text elements this way, so it's a good practice to start doing this now - so you'll be prepared.

Let's first look at how some example CSS rules are constructed:

H1 { font-size: 36 pt}All of thetags will be in 36 points in sizeP {font-face: arial}All of the text enclosed within paragraph

......

will be in arial font. Since the size is not specified, it will default to whatever the browser normally specfies.

Selector {declaration} or Selector{property:value}

The two main sections of a rule are first the Selector, which identifies the tag to be modified, and the declaration, enclosed in curly brackets. The declaration itself is made up of two parts - the property and it's value, separated by a colon. The property is the parameter to be defined, such as font family or size, and the value can be a unit of measure, a color, or a predefined list. As the above examples declarations can contain more than one property, if they are separated by semicolons, as below.

The simplest way to apply a style to to simply add it to an individual HTML tag, such as:

This heading is blue

In general, this isn't such a good idea, as it defeats the purpose of making styles global and easy to change. It's good to know about though, as it allows you to occationally override override higher level rules.

A more useful method is to cluster all of the style rules in the header of the document, enclosed in the

Which element allows you to use external style sheets in your pages?

Which element is used for external CSS?

Which HTML element is used to indicate to a browser that an external CSS file is associated with the HTML file?

What are the elements used in a style sheet?