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
|
