Creating style sheets: Embedding CSS within a document
There are four ways you can make your content pages stylishThe first way is to place the rules into the content document
This requires a new paired markup tag:
<style> </style>
This tag is placed in the <head> of the content document
The rules of the style sheet are placed between the opening and closing <style> tags
Here's what it would look like using a type selector linked to the <h1> tag.
The declarations that will be attached to the tag affect the <font-size>, <font-color>, and <text-alignment>:
<head>
<title>Test page</title>
<style type="text/css">
<!--
h1 { color: blue;
font-size: larger;
text-align: center
}
-->
</style>
<body>
<h1>This should be blue, larger than normal font size, and centered </h1>
Blah blah blah
<h1>This too</h1>
</body>
</html>
To let the browser know that you are using style sheets, you include the following attribute in the opening <style> tag (this is required):
type="text/css"
To hide the style sheet markup from older browsers (which would otherwise display the markup as content), you place the actual rules inside a <!-- comment --> tag:
<!--
Style rule #1
Style rule #2
Style rule #3
-->
</style>
You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/csscreating.html
Last updated 3.15.06 - H. Rosenbaum