Combining HTML and CSS - Tutorial

Associate a style sheet with an HTML page.

The best practice is to write CSS styles in a separate document (a file that most often has the CSS extension) and that we call a style sheet. This file can be used by all pages of the site, which guarantees a homogeneous formatting of the entire site.

Of course, if it is necessary to plan several layouts for different parts of the site, it is quite possible to write several style sheets.

To link HTML pages to styles, simply add the following tag to the head section of all pages:

<link rel="stylesheet" href="foo.css" type="text/css" >

• In this example, foo.css is the name (possibly the url) of the style sheet.
• The rel="stylesheet" attribute is required.
• The extension of the file containing the styles is not significant, but we often choose .css (we wonder why).
• Most browsers recognize the link tag even if it is placed in the body, but this is not a good practice.
• Several link tags can follow each other, which allows you to associate several style sheets to the page.

This solution for associating styles with the page is by far the best because it ensures a complete separation between the HTML page and the CSS styles. It also allows you to assign the same styles to all or some of the pages of the site.

Write styles in the page.

A style tag placed in the code of the HTML page allows you to define styles that will of course only be valid for that page. Browsers also recognize the style tag in the body, but it's best to include this tag in the head.

• The type="text/css" attribute can be added to the tag but is only really needed for styles that are not written in CSS.
• This solution can be mixed with the previous one. If there is a conflict between a style defined in a separate document and a style written on the page, Priorities have been clearly defined in the W3C specification.

Writing the styles in the page must remain something exceptional because we lose the separation between HTML and CSS. The volume of the page will therefore be increased by the same amount. Also, these styles won't be usable on another page.

Write styles in a tag.

All tags have a style="..." attribute that allows you to assign a style to that particular tag.

p style="color:blue;"

Writing styles in tags should be exceptional, but it is quite possible to apply styles to ONE particular tag in ONE particular page.

There is a small difference in syntax: it is no longer necessary to specify a selector, since the style applies where it is written.

The styles described in the tag take precedence over the styles described in the page and of course compared to the styles described in a separate document.

Priorities.

Here's how priorities are handled when there is a conflict between two styles or between a style and an HTML attribute:

• Styles defined directly in the HTML tag with the style attribute take precedence.
• Then come the styles defined in the page and/or in an external style sheet.
• Finally, last come the HTML attributes or tags. CSS styles always take precedence over HTML attributes or tags, which should no longer be used for formatting.

When there is a conflict between several CSS styles, the precedence rules are clearly defined by the W3C. Basically, the more precise a selector is, the higher its priority: one selector per id identifier (which can only target one element), will take precedence over a selector per class, which can target several elements.

In the case where the selectors have identical priorities, the rule that comes last takes precedence.

Associate XML document and CSS styles.

This is a bit beyond the scope of an introductory tutorial, but since it's just a matter of indicating a syntax...
To associate a style sheet with an XML document, simply add the following line to the beginning of your XML document, just after the usual ?xml ... ?.

?xml version="1.0" encoding="UTF-8" ? ?xml-stylesheet href="foo.css" type="text/css" ?

• foo.css is of course the name of the style sheet. You can specify an url instead of the name.

As an example, click to view a Raw XML document (non formatted) and the same document formatted by CSS styles. It's exactly the same document, but the styles have made the unwanted information disappear, and formatted the others.