CSS Tutorials, Exercises, and Guide

Here are many CSS Tutorials, Exercises, Samples and a CSS Guide, at westciv.com, that provide good explanations of how to use Cascading Style Sheets for many types of web page elements and features. These CSS tutorials provide explanations and worked examples to help you quickly learn CSS and start creating your web pages and sites using style sheets. 

14 CSS Tutorials

 - Logo Effect
 - Floated Layout
 - Validating CSS and HTML
 - CSS for Page Layout
 - Pure CSS Rollovers
 - Creating a Decorative Side Panel
 - Customising Link Appearance
 - Styling Visited Links
 - General Text Appearance
 - Create your own Bullet Points
 - Create a Simple Navigation Bar
 - Create a Navigation Bar Using Unordered Lists and List Item Elements
 - Integrate Text and Images
 - CSS Buttons

CSS Exercises and Code Samples
Learn how to apply CSS text styling, page appearance and layout, for your web pages. These exercises and coding examples will help you learn how to use CSS.

1. Introduction 
2. A short intro to CSS 
3. Tool checklist 
4. My first style sheet 
Create a style sheet, and then an HTML document which links to it. 
5. Basic page appearance 
Create your first style sheet rules and start using some basic properties. 
6. More text properties 
Learn more methods of styling text. 
7. Class selectors 
Use the HTML class attribute to apply styling to individual elements. 
8. Styling links 
Customize how hyperlinks are displayed in relation to your website design. 
9. Page layout 
Use CSS to create a smooth liquid layout. 
10. Creative use of images 
How to use background images. 
11. Descendent selectors 
Find out how to selectively style elements on your page. 
12. Styling a navbar 
How to apply styling the navigation bar. 
13. Where to now? 
A list of resources for more detailed information and tools about CSS.

Guide to CSS:

Introduction to CSS
 - CSS intro
 - why use css?
 - what's a style sheet?
 - how do they work?
 - linking & embedding
 - statements

Selectors
 - type
 - class
 - id
 - descendant
 - link pseudo class
 - pseudo element
 - selector groups
 - dynamic pseudo class
 - language pseudo class
 - child
 - first child
 - adjacent
 - attribute

Properties
 - text style
 - text layout
 - background
 - border
 - margin
 - padding
 - page layout
 - element type
 - user interface
 - values

Advanced
 - cascade & inheritance
 - generated content
 - media
 - printing
 - mobile profile