Cascading Style Sheets 101: Yellow Belt

Who is this course for?

Web professionals who are seeking to provide a more accessible design structure using Cascading Style Sheets.

Objectives

Upon successful completion of this course you'll be able to: convert an existing page, styling for print, styling a press release, making an input form look good, styling an events calendar, creating an online greeting card, bringing hyperlinks to life, multicolumn layout, how to skin a menu, sneaking out of the box, positioning a better design and fixing your backgrounds.

Prerequisites

You should have a working knowledge of HTML.

Benefits

CSS Fundamentals with CSS3 properties
This class provides the web professional with the ability to control the rendering, e.g. fonts, colours, leading, margins, typefaces, and other aspects of style of a Web document without compromising its structure using Cascading Style Sheets. Using common desktop publishing terminology, Cascading Style Sheets makes it easy for professional as well as untrained designers to make use of its features.

Introduction

What is Cascading Style Sheets (CSS)
How it works
Selector and declaration
Properties and values

Including CSS

HTML style attribute
Internal CSS using style tag
External CSS using link tag (recommended)

Selectors

Universal
Tag selector
Class selector
ID selector
Child selector
Descendant selector
Cascading Inheritance

Colours

Foreground colour (text colour)
Background colour
Named colours value
HEX colour value
RGB colour value RGBA and opacity

Text

Terminology
Typography
Font style
Availability
Font family property
Font size property
Type size units
Font weight property
Font style property
Text transform property
Text decoration property
Line height property
Letter and word spacing properties
Text align property
Vertical align property
Text ident property
Styling links and their states

Box model

Understanding box model
Dimensions
Border, margin and padding
Shorthand properties
Limiting width
Limiting height
Content overflow
Display property
Visibility property

Lists, tables and forms

Styling Lists
Styling tables
Styling Forms
Taking advantage of inheritance
Practical examples