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

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

A bit about writing css

Below is the code from an external style sheet. In general they start with the body properties. Notice that each attribute has a "{" after it, lists the features it will have, then ends with "}".

body {
background-color: White;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}

#leftcolumn
{
position: absolute;
top: 220px;
left: 0px;
width: 175px;
font-size: 11px;
text-align: right;
}

#rightcolumn {
position: absolute;
top: 250px;
right: 0px;
width: 165px;
float: right;
padding: 0 0 0 0;
}

.h1 {
font-size: 14pt;
color: Black;
text-align: left;
font-weight: bold;
border-bottom-color: Black;
border-bottom-width: 3px;
border-bottom-style: double;
}

.h2 {
font-size: 14pt;
color: #4682B4;
text-align: left;
font-weight: bold;
background-color: White;
}

.bold {
font-weight: bold
}

.center {
text-align: center;
}

 

 

Go to next page

 

 

Tutorial: External Style Sheets

www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK