alt.www.webmaster Notes for Novices

 

Site Wide, Document and Block Level CSS Styles

CSS styles can be applied in three ways:

Site wide - using an external style sheet file which is either imported or linked to each HTML page.

Document level - using hard coded styles within the header (between the <head and </head> tags) of a document.

Block level - using the <span></span> tags to suggest style for a block of content between them.

If you want to easily create a consistent look and feel across a multiple page site, then creating a single external style sheet containing the style elements and importing it to each page is best. To import an external style sheet you use:

<style>
<!--
@import url(mystyle.css);
-->
</style>

where mystyle.css is the path and filename of the external stylesheet to be imported.

or you can link style sheets using the <link> command:

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

Using the <link> command you can provide your reader with a choice of style sheets:

<html>
<head>
<link rel=stylesheet href=Fantasy_style.css type=text/css>
<link rel=stylesheet href=Classic_style.css type=text/css>
</head>

In this example the browser should (!) prompt the reader to choose which style sheet they wish to use.


Document level styles are applied within the <style></style> tags in the document header, for example:

<style type="text/css">
<!--
BODY
{
background: white;
}

H1
{
background: red;
    text-align: center;
}
-->
</style>

Block level styles are applied within a document by adding style elements to a tag, most popularly using the <span></span> tags (since this tag's default action is to do nothing):

<html>
<head>
<title></title>
</head>
<body>
<span style="background: cyan; text-align: center">
This is a block of text with its style suggested by style elements within a pair of <span></span> tags.
</span>

</body>

</html>

Although you can apply a style to any tag, for example:

<p style="text-align: center">A centered paragraph</p>


Matt Probert



Return to Notes for Novices  
Return to AWW Faq

W3C 4.01  W3C CSS   WAI-AAA