Ken Ward's Cascading
Style Sheets Tutorial

 

See also: HTML Tutorial  JavaScript Tutorial

After you have completed this tutorial, you will be able to read and understand the documentation on style-sheets published elsewhere. You will also have learned how to do the most useful things.

Download a zip of all of Ken's Tutorials (HTML, JavaScript and StyleSheets) for reading on your computer offline - KenTuts.zip [2.2 MB]

Table of Contents

1. What's the use of style sheets?
2. Creating Style-Sheet Files
3. Selectors
   • Statements, selectors and rules
   • Examples:
     • Background colours
     • Background images
     • Margins
4. Declarations
   • More examples of background colours
   • Margins, and
   • Padding
5. Headings and text
   • serif
   • sans-serif
   • monospace
   • cursive
   • fantasy
6. Alignment
7. Fonts
8. Anchors
9. Class Selectors
10. Inheritance
11. Bullets and Lists
12. More on Selectors
    • Contextual Selectors
      • Example with bulleted list
    • Pseudo Selectors
      • Example of links
    • Pseudo Element Selectors
      • first-letter
      • first-line
13. Scrollbars
14. Form Elements
15. Cursors

 

---

Note

These lessons do not always use style sheets. They use inline styles. This is so several points can be illustrated on one page. The code used is usually in this form, using a div element:

<div style="Statements">

Written stuff.

</div>

The Statements will often contain a statement about the border, such as:

border: medium #00ff00 solid;

The border is to make the section look like a page!