Tutorial: External style sheets



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

7. Text

8. Text links

9. Image links

10. Borders

11. Containers (DIVs)

12. Simple Containers (DIVs)

13. A DIV inside a DIV

14. Container as rows or columns

15. Two columns

16. Three columns

17. More Tools for css

18. Validating and checking the code

19. Creating a site

20. Working with backgrounds: single DIV background page

21. Working with backgrounds:
multiple DIV backgrounds

Bookmark this 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 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>

Go to next page



Tutorial: External Style Sheets