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

westciv downloadable courses

css level 2 - table of contents

Course introduction

Prerequisites

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

Tools you need

Editors

Browsers

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

Introduction

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

Introduction

What's wrong with CSS positioning?

How does CSS positioning work?

The position property

Positioning coordinates

id

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

width

height

The overflow property

More advanced positioning

Introduction

Working in a team

CSS comments

Combining selectors

Basic positioning revisited

right and bottom

Pitfalls and a workaround

Static positioning

Default margins strike again

letter-spacing

word-spacing

The big border

In depth: the CSS box model

Negative values

In depth: negative values

width + margins = "position"

z-index

Relative positioning

CSS for forms

Introduction

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