Examine the text below:
Introduction to Cascading Style Sheets
The headline above was written using the Verdana font with 30 point high lettering and the color #009900. It was also centered on the page. This was done by
- Creating a style sheet rule for the <h6> tag.
- 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: #009900;
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:
This is h6!
You can also set the default font properties for a web page by setting CSS rules for the <body> tag (but in the <head> section!!).
<style type="text/css">
body { color: #009900;
font-size:
16pt;
font-family:"Times New Roman",serif;
}
h6 { font-size: 40px;
color: #009900;
font-family: Verdana,Arial,sans-serif;
text-align:center;
}
</style>
Which can be used like this...
<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 ...
Quotes
To be or not to be, that is the question.
- There is only one rule to Web Club
- I want you to design as hard as you can
Vocabulary
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:
- p is a selector. Any HTML tag could be a selector. There are other types of selectors as well.
- color: red is a CSS declaration
- color is a property
- red is a value
- The semi-colon following the CSS declaration is optional if there is only 1 declaration for a CSS Rule
- There may be many declarations for a single selector
In Summary
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.
| Property | Possible Values | |
| font-family | Font names separated by commas | |
| font-size | numeric value in points (pt), pixels (px), inches (in) or ems (ems) | |
| color | Hexadecimal value (with #) or color name | |
| text-align | center or left or right | |
