CSS tutorial examples

Selectors:

• Content styling with * and types selectors
• Descendant and child selectors
• Sibling selectors
• Attribute based selectors
• Selection by class and id attributes
• Pseudo elements as selectors
• Pseudo classes as selectors
• Inheritance
• Selectors imported from another sheet
• Cascade and specificity example

Media types:

• Media types screen, print and handheld
• Print media example
• Page box example
• Basic page-break example

Box model:

• Typical box model example applied to body element
• Margin properties
• Different borders
• Padding properties

Visual formatting:

• Basic containing block with relatively and absolutely positioned child elements
• Display property basic example
• Fixed and relative positions example
• Elements in normal flow (relative position)
• Float and clear properties
• Fixed and absolute position in respect with the normal flow
• Z-index and attacking order example
• The element's width
• The element's height
• Line height and vertical alignment

Visual effects:

• Overflow property
• Clip property
• Visibility property

Background styling:

• Basic background color
• Background image property
• Background repeating
• Background attachment property
• Background position
• Background color made of basic CSS colors
• Background color as RGB and HEX
• Background set with background property

Fonts styling:

• Variety of font families
• Generic font families
• Font style property
• Font variant property
• Font weight property
• Font size property
• Basic font styling and foreground color
• Shorthanded font property versus regular syntax
• Font set with font property, including system fonts

Text styling:

• Text indentation
• Text alignment
• Text decoration
• Letter and word spacing
• Text transformation to uppercase or lowercase
• Foreground (text) color property
• White space property
• Text direction and bidirectionality

Tables:

• Basic tables styling
• Fixed layout for tables
• Table's height and vertical alignment
• Table borders and border collapsing

Generated content:

• Content property with pseudo elements ':before' and ':after'
• Content property with 'attribute' selector
• Quotes property with pseudo elements

Lists:

• List default types and image types
• List indentation (list-style-position) property
• Nested lists
• Automatic counters and numbering (counter properties)

User interface:

• Cursor appearance changing
• Outlining elements
• System colors

Aural style sheets:

• Volume property
• Speak property
• Pause properties
• Cue properties
• Mixing properties
• Spatial properties
• Voice characteristic properties
• Speech properties
• Audio tables

Advanced examples:

• Simple vertical navigation menu
• Simple horizontal navigation menu
• Drop-down horizontal navigation
• Image sprites
• Simple image gallery