Linking CSS and HTML

Linking to an external reference

See this page for a working example, which calls the files 'style1.css', 'doc1.html' and 'doc2.html'

Linking and Embedding

Once you have a style sheet, there are two ways of associating a web page with it. The first is to link the page to the style sheet.
The other is to embed the style sheet in the head of the web page.

Which is preferable? If you think about one of the most important advantages of style sheets, the ability to update and overhaul the appearance of a site without modifying the web pages themselves, then you'll agree that linking is to be preferred, as otherwise, when you alter your style sheet, you'll have to edit it in every page. This negates a lot of the advantage of separating content and presentation.

When might embedding be a good idea? If your pages are to be downloaded, and read off-line, then users will be unlikely to locate and download any style sheet. So when they come to read the page off-line, no style. Netscape Navigator makes matters worse, as it fails to load a page if the style sheet can't be found.

But overall, linking is much to be preferred.

Linking

If you open our sample HTML page, you'll find the following in the HEAD of the page:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="core-style.css">

Let's take a look at each attribute briefly.

REL="STYLESHEET" this says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.

TYPE="text/css" Theoretically, style sheets might be written using any number of languages. The style sheets we've been talking about in these lessons are Cascading Style Sheets (CSS). Extensible Style Language (XSL) is another that may become important. This attribute tells the browser what format it is going to receive the style sheet in. The content type is necessary.

HREF="core-style.css" tells the browser where to locate the style sheet. The destination is specified in the same way that hypertext link (A HREF="link destination") destinations are, with either a relative or absolute URL.

To link to your style sheet, all you need to do is paste the line of code above into the HEAD of your HTML file, then change the HREF value to point to the location of your style sheet.

Embedding

If you want or need to embed your style sheet, the following element is placed into the HEAD of the HTML file.

<noindex><!--When have styles put here-->
<STYLE TYPE="text/css">
<!--
BODY {margin-left: 15%}
H1 {text-indent: -10%}
H2 {text-indent: -8%}
H3 {text-indent: -6%}
H4 {text-indent: -4%}
P {text-indent: 5%}
-->
</STYLE>
</noindex>

The <noindex> and </noindex> surrounding tags are instructions to web spiders indexing your site, asking them to ignore the enclosed code. This appeared first on the webmonkey tells site http://hotwired.lycos.com/.

The TYPE content descriptor is required, and is the same as for linked style sheets. All we have done is placed the style sheet inside the <STYLE></STYLE> element, and for good measure, placed comment tags around the content, so that older browsers which don't recognize the STYLE element don't show the style sheet as content.

Inline

Inline style definitions affect individual occurrences of a tag. These are embedded within the tag itself using the STYLE attribute. The following HTML code colors a specific <P> tag:

<P STYLE="color: red">
This line will be red.
<P>
This line will not be red.

This line will be red.

This line will not be red.

If the inline style conflicts with an embedded or linked style, the inline style overrides for that particular occurrence. For example, if the line above appears on a Web page that defines <P> to be green through a linked style sheet, all paragraphs will be green except for the <P> above, which will be red.