The headline above was written using the Verdana font with 30 point high
lettering and the color=#009999. It was also centered on the page. This was
done by
(1) Creating a style sheet rule for the <h6> tag.
(2)
Setting the text above within the <h6> tag.
We can create a style sheet rule by embedding a style sheet in the head
section of the web page. The following shows the style sheet rule used to create
the headline above:
<head>
<title>My Page</title>
<style type="text/css">
h6 { font-size: 30pt;
color: #009999;
font-family: Verdana, Arial, sans-serif;
text-align: center }
</style>
</head>
To use the style, simply use the tag <h6> around some text, so the following html:
<h6>This is h6!</h6>
would look like:
You can also set the default font properties for a web page by setting CSS rules for the <body> tag.
<style type="text/css">
body { color: #009900;
font-size:
16pt }
h6 { font-size: 40px;
color: #009999;
font-family: Verdana,Arial,sans-serif }
</style>
Which can be used like this...
<body>
<h6>Quotes</h6>
<p>To be or not to be, that
is the question.</p>
<ul>
<li>There is only one rule to Web Club</li>
<li>I want you to design as hard as you can</li>
</ul>
</body>
Which will look like this ...
To be or not to be, that is the question.
There are several important terms to know so that you can effectively use the multitude of CSS references available on the web and in books:
- Rule
- Selector
- Declaration
- Property
- Value
Here is a formal depiction of a CSS Rule...
SELECTOR { PROPERTY : VALUE; }
The PROPERTY: VALUE combination is a CSS Declaration. Here is an example of how they are used....
p { color: red; }
Notes:
- The semi-colon following the value is optional if there is only 1 property for a CSS Rule
- There may be many properties for a single selector
You create your styles in the HEAD
section of your HTML document.
You can redefine almost any behavior of any HTML tag using style sheets.
This is just a brief introduction and only one of many ways to use style sheets.