There are three ways of incorporating CSS in your web pages:
- Inline styles: Styles are added to each tag withing hte HTML file. The style affects that particular tag but does not affect other tags in the document. (This technique is discouraged by the W3C.)
<p style="color:brown;font-weight:bold;">some text goes here.</p>
- Embedded, internal or global styles: These are applied to an entire HTML file, by including the style specifications within the <Head></HEAD> portion of the HTML document.
<style type="text/css">
A:hover {background-color:#F0E68C;font-weight:bold;}
body
{
background: #ffffff
url("http://packard.flint.umich.edu/~hickslm/images/h07.gif")
no-repeat fixed bottom right
}
h1, h2, h3, h4, h5, h6 { color : blue; text-align: center; font-weight:bold;}
ul, ol, li, p (font:8pt/10pt "Comic Sans MS";color:navy )
}
</style>- Linked or external style sheets which are contained in an external file and linked with the HTML document via the <link .. tag in the heading portion of the document. The external style sheet resides in a file with an extension of .css. This is illustrated with this page, with html code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>External Style Sheet Demo</title>
<link href="demo.css" rel="stylesheet">
</head>
<body>
<h1>My External Style Sheet Demo Page</h1>
<p>Here is just a paragraph of text to demonstrate the style defined for the paragraph tag.
<h2>This is a level 2 heading</h2>
<p>A link back to my home page is used to demonstrate the anchor style</P>
<a href="packard.flint.umich.edu/~hickslm/">Hicks Home</a>
</body>
</html>The contents of the external file demo.css is:
<style type="text/css">
/* The link element tells browser to find the specified stylesheet
in the file with relative url demo.css. */
h1, h2 {border: 2px; solid; padding:5px;}
h1 {color:navy; background-color:goldenrod; text-align:center;}
h2 {color:red; background-color:cyan;}
p {margin: 30px;}
A:hover {background-color:#F0E68C;font-weight:bold;}
</style>All three of these techniques may be used together, and where there are duplicate or conflicting sytle definitions, browsers will determine which style should be applied by following cascading style precedence.
This page was last updated on 10/12/2004 by Linda M. Hicks
