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

Introduction:

This tutorial does not cover all aspects of css, it is rather a guide that will give a basic understanding of external style sheets and how to create or modify columns inside them

The tutorial goes through the simple things like text effects and borders then moves on to divs and creating and editing columns. It ends with some ideas for creating a web site page and how to incorporate backgrounds for some neat effects.

This is meant for beginners but it is assumed that you know the basics of html and that you can write or edit the code. You will find examples of both html and portions of the external style sheets used.

Tools:

First you will need a way to edit both html and css. This tutorial uses Top Style Lite though any program that lets you edit the code will work fine. Here is a link to Top Style, a css editor by Bradsoft.

top style

Go to page 2

 

 

Tutorial: External Style Sheets

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