Web Design and Authoring: Session three

How to link CSS and HTML

We have set up a style rule:

 body {	font-family: Arial, Helvetica, sans-serif;
				font-size: 90%;
				color: #009B8F;
				background-color: #FFFFB0;
}

but, where do we write this rule, and how do we apply it to our HTML page?

There are three ways to add style rules to your document (in order of preference):

External stylesheets: write a separate stylesheet (in Notepad, as we shall see) and link it to your HTML page
Document level styles: write style rules within a <style> tag in the <head> section of a document
Inline styles: include style rules within an individual tag, using the style attribute

External stylesheets

A separate stylesheet file is created, saved with the file extension .css.

This is the most useful way of attaching styles to your documents, as one stylesheet can be linked to any number of web pages. Any changes made to the stylesheet will immediately be reflected in all of the pages it is linked to.

To link a stylesheet to a page, use the following HTML markup:

this markup assumes you have saved a stylesheet file called styles.css in a sub-folder named css.

The link tag should appear within the <head> section of the page, as in this example (link tag is in bold):

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/HTML4/loose.dtd">
<html>

<head>

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

</head>

<body>

</body>
</html>

You can add a link to the stylesheet into as many HTML files as you wish, and they will all have the same styling applied consistently.

If a style rule specified in an external stylesheet conflicts with a style rule specified in a document level style, the document level style takes precedence.

View this page which has the stylesheet applied.

Document-level styles

Document-level styles specify presentation rules within the <head> section of a document which will be applied within that individual document only. In this example, the font colour and level one heading colour are specified:

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/HTML4/loose.dtd">
<html>

<head>

  body {font-family: Arial, Helvetica, sans-serif;
			font-size: #009B8F;
			background-color: #FFFFB0;
	}
-->

    </style>

</head>

<body>

</body>
</html>

The style rules themselves are enclosed by HTML comments  so that very old browsers which do not support CSS will simply ignore them; otherwise they would display the CSS code in the browser window as it is not HTML markup.

The drawback of document-level styles is that they are individual to one document, and are time-consuming to change. They can be useful to use when working on a page prototype; when the styles are finalised, they can be moved to an external stylesheet.

If a style rule specified in a document level style conflicts with a style rule specified in an inline style, the inline level style takes precedence.

Inline styles

This is the least useful way to add styles. The style attribute is included in an individual tag, together with a list of properties and their values. The style will only affect that particular instance of the tag.

<h1 style= "font-style:italic; color:#D9000;">An inline style</h1>