Cascading Style Sheets/Applying CSS to HTML and XHTML

CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline. In the linked method, the CSS is stored in a separate file, instead of directly in the HTML page. In the embedded method, CSS is stored as part of the HTML page, in the header section. In the inline method, CSS is stored directly in the style attributes of the HTML tags, as.

The neatest method is probably the linked one, but the other ones are convenient and quick in the phases of prototyping a web page. The embedded and inline methods do not require having a separate file. The inline method saves you the trouble of considering what CSS classes your document should have. For a larger site, in which many web pages share the same styling, and in which the styling should be customizable by the user, the linked method is the only viable option.

The methods are treated in detail in the following sections.

Linking
With linked CSS, CSS rules are stored in a separate file. To refer to that file from the HTML page, add the  element (and its closing element within XHTML) to the   element, as shown in the following example, which assumes that the stylesheet is stored in the file named "style.css".

The  element in the example has three attributes. The first,, tells the browser the type of the target of the link. The second,, tells the browser what type of stylesheet it is. And the third,, tells the browser under which URL to find the stylesheet. In the example, the URL is relative, but it can also be absolute.

The "style.css" with a single rule contains only the following text:

This tells the browser that the text in the paragraph element should be rendered as bold.

Example rendering:

The source code for the complete HTML document is thus as follows:

Embedding
Dynamically generated webpages may need to use embedded CSS, but this should be kept to a minimum. Even in dynamic pages, any CSS that is common to multiple pages should generally be moved to a linked stylesheet.

Embedded CSS is CSS that is located in the header of the HTML document that requires styling. For example we would like the text in this HTML document to appear bold.

The CSS may be placed in the document's header section:

The CSS is contained in a  element. Setting the element's  attribute to   tells the browser that the  enclosed sheetstyle is written in CSS and should be used to format the page. If the attribute  is missing or set to an unrecognized value, the CSS will not be applied to the page.

The bit of CSS in this example tells the browser to make all the text found in any paragraph elements bold. The text on the page would look like this:

Here is the complete document including the CSS.

Remember, you should use linked stylesheets in preference to embedded stylesheets whenever possible. That will allow easy replacement of the general style information without having to keep track of styles within the various HTML files.

Inlining
Inline CSS is specified directly in the opening tag of the element you want it to apply to. It is entered into the  attribute within HTML or XHTML 1.1.

For example

is rendered as:

As mentioned, you should in general prefer linked CSS to embedded CSS, and both are preferred over inline CSS.

Cascading Style Sheets/Inline CSS