Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

complete css guide

Table of contents

Welcome to the Complete CSS Guide, a reference to every aspect of cascading style sheets. If you need help learning CSS or if you're looking for info about selectors, properties and all the other aspects of cascading style sheets, this is the place.

An extended version of this guide with extra sections and integrated browser support information is available for purchase and download. You can get the Complete CSS Guide

Where do I start?

That all depends what you're looking for.

While you are here don't miss our articles, tutorials, and our other CSS resources..

Part 1: Introduction

About this guide

What's new in CSS Level 2, revision 1?

Who is this guide for?

What will we cover?

How to use this guide

Browser support information

CSS intro

Where do style sheets come from?

The W3C
A history of CSS specifications
The CSS Mobile Profile

Why doesn't everyone use CSS?

Why should I use CSS?

What exactly is a style sheet?

Proprietary CSS extensions

CSS v HTML

How do style sheets work?

The parts of a style sheet

Style sheet syntax

Linking and embedding a style sheet

Embedding style sheets

Linking to style sheets

Statements

@rules

@import
@media
@page

Comments

HTML comment tags

Rules

Part 2: Selectors

Selectors introduction

What do selectors do?

Types of selector

Type selectors

Types of element

Class selectors

ID selectors

Descendant selectors

Link pseudo class selectors

Pseudo element selectors

Dynamic pseudo class selectors

Language pseudo class selectors

Child selectors

First child selectors

Adjacent sibling selectors

Attribute selectors

Part 3: Properties

Properties introduction

What are properties?

How to read the property guide

Text style properties

color

font-weight

font-family

font-size

font-variant

font-style

text-decoration

text-transform

Text layout properties

letter-spacing

word-spacing

line-height

vertical-align

text-indent

text-align

direction

unicode-bidi

Background properties

background-color

background-image

background-attachment

background-repeat

background-position

background

Border properties

Unscrambling the border mess

border-width, border-top-width, border-left-width, border-bottom-width, border-right-width

border-color

border-style

border, border-top, border-left, border-bottom, border-right

Margin properties

margin

margin-top

margin-left

margin-bottom

margin-right

Padding properties

padding

padding-top

padding-left

padding-bottom

padding-right

Page layout properties

Introduction to positioning with CSS

The big picture

A note about "layers"
And <div>s?

Ways of positioning

Static positioning
Absolute positioning
Fixed positioning
Relative positioning

position

top

left

bottom

right

width

min-width

max-width

height

min-height

max-height

z-index

visibility

overflow

float

clear

clip

Element type properties

display

white-space

list-style-type

list-style-image

list-style-position

list-style

border-collapse

border-spacing

caption-side

empty-cells

table-layout

User interface properties

cursor

outline

outline-color

outline-style

outline-width

Values

Length values

Percentage values

Color values

Keyword values

Shape values

Part 4: Advanced CSS

Advanced CSS introduction

Cascade and inheritance

Cascade

Managing style at large sites using @import

Specificity

Inheritance

Generated content

content

quotes

Counters and counter properties

counter
counters
counter-reset
counter-increment

Media

The @media rule

Types of media

Media specific importing using @import

Printing

The @page rule

Page specific properties

margin, margin-left, margin-right, margin-top, margin-bottom
Page breaking properties
page-break-before
page-break-after
page-break-inside
orphans
widows

CSS Mobile Profile

Selectors in the CSS Mobile Profile

Properties in the CSS Mobile Profile

Part 5: Real world CSS

Real world CSS introduction

Tables with CSS

Standards-based HTML 4.0

Borders

Color

Evening things up

browser support

"It doesn't work": a word of warning

The difficulties: partial support, buggy support, no support

No support
Partial and buggy support
Missing features
Broken features

Designing for the web

Introduction

Same old new medium?

Controlling web pages

Why does it matter?

The way

Fonts
Layouts
Colors

The journey

Validating

Validating HTML

Why validate?
What is validating?
So how do I do this?
Online validators
Stand-alone validators

Validate your style sheets