Tutorial: External style sheets
Contents
1. Introduction & Tools
2. How external style sheets and html work together and what each does
3. Linking the html and the external style sheet
4. A bit about writing css in an external style sheet
5. Putting the css into the html code
6. Page body & page backgrounds
14. Container as rows or columns
18. Validating and checking the code
20. Working with backgrounds: single DIV background page
Text attributes
Classes start with a "." or full-stop and text classes are no exception.
Below is an example of a text class. You can set the font family, size, color, line height, line spacing and alignment with this.
.text {
font-size: .75em;
color: #999999;
line-height: 1em;
text-align: right;
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
A cool trick is to set a text background color
.textbg {
background-color: Yellow;
}
Add it to the html right inside the paragraph tag like this: <p class="textbg">A cool trick is to set a text background color</p>
Or this kind of background
.textbg2 {
background-color: Yellow;
border: solid;
border-color: Black;
border-width: thick;
}
Add it to the html like this: <p class="textbg2">Or this kind of background</p>
Another way of setting the font is to place it inside the column or row or "container". More about that later.
Spans
Spans are very useful for changing a text style in the middle of a line. A span tag goes right before what it will change and the closing tag or </span> goes right after.
<p>Spans are very useful for changing a <span class="red">text style</span> in the middle of a line.</p>
Tutorial: External Style Sheets
www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK