Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.


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].

westciv downloadable courses

css level 2 - table of contents

Course introduction


So what's left to be covered in this course?

Tools you need

Course materials

CSS layout without positioning

Interesting text page layouts

True accessibility
Why is a CSS layout more accessible?

Creating a frame around a page

The HTML containment hierarchy
Inheritance and initial values

Hazard ahead: browser default values

Solution: set your own values

Paragraphs and headings

Different margins for different sides

Headings that really stand out

All about ems
Different padding on different sides
Different borders on different sides
In depth: the background-position property
Backgrounds are not just for the <body>

The float property: introduction

What does the float property do?

How to use float

CSS and printing


Paper is different to pixels

The media specific linked style sheet

Cascade and specificity in action

Some new properties

The text-align property
The display property

Printing specific properties

The CSS positioning properties


What's wrong with CSS positioning?

How does CSS positioning work?

The position property
Positioning coordinates


id selectors

In depth: linked or embedded style sheet?

In depth: length values

In depth: percentage values

The location of an element

The size of an element


The overflow property

More advanced positioning


Working in a team

CSS comments
Combining selectors
Basic positioning revisited

right and bottom

Pitfalls and a workaround

Static positioning

Default margins strike again



The big border

In depth: the CSS box model

Negative values

In depth: negative values

width + margins = "position"


Relative positioning

CSS for forms


The @import rule

In depth: types of style sheet statement

Specificity and the @import rule

Styling the <form> element

Styling <fieldset> elements

Styling the <legend> element

<input> elements

In depth: attribute selectors

Changing an element's display

Styling text entry fields

Keyboard focus

Dynamic pseudo class selectors
The outline property

Popup menus

Scrolling lists

Styling the <textarea> element

Styling the <button> element

Wrap up