CSS Overview

Cascading Style Sheets, or CSS, are a method of creating web page layouts. They offer a great deal more control over the look of your web pages and enable HTML to do what it was created for--structure. As web design has become based on standards like XHTML, CSS has become even more important. Moving into CSS-based layouts is a graduation into modern, standards-based web design.

CSS, Day 1

Topic 1 – Rethinking HTML for CSS

  • HTML: Past and Present
  • Writing HTML for CSS
  • The Importance of the Doctype

Topic 2 – Creating Styles and Style Sheets

  • Anatomy of a Style
  • Understanding Style Sheets
  • Internal Style Sheets
  • External Style Sheets

Topic 3 – Selector Basics: Identifying What to Style

  • Tag Selectors: Page-Wide Styling
  • Class Selectors: Pinpoint Control
  • ID Selectors: Specific Page Elements
  • Styling Tags Within Tags
  • Pseudo-Classes and Pseudo-Elements
  • Advanced Selectors

Topic 4 – Saving Time With Inheritance

  • What is Inheritance?
  • How Inheritance Streamlines Style Sheets
  • The Limits of Inheritance

Topic 5 – Managing Multiple Styles: The Cascade

  • How Styles Cascade
  • Specificity: Which Style Wins
  • Controlling the Cascade

Topic 6 – Formatting Text

  • Formatting Text
  • Changing Font Size
  • Formatting Words and Letters
  • Formatting Entire Paragraphs
  • Styling Lists

Topic 7 – Margins, Padding and Borders

  • Understanding the Box Model
  • Control Space with Margins and Padding
  • Adding Borders
  • Coloring the Background
  • Determining Height and Width
  • Wrap Content with Floating Elements

 

CSS, Day 2

Topic 1 – Adding Graphics to Web Pages

  • CSS and the <img> Tag
  • Background Images
  • Controlling Repetition
  • Positioning a Background Image
  • Using Background Property Shorthand

Topic 2 – Sprucing Up Your Site's Navigation

  • Selecting Which Links to Style
  • Styling Links
  • Building Navigation Bars
  • Advanced Link Techniques

Topic 3 – Formatting Tables and Forms

  • Using Tables the Right Way
  • Styling Tables
  • Styling Forms

Topic 4 – Building Float-Based Layouts

  • How CSS Layout Works
  • Types of Web Page Layouts
  • Float Layout Basics
  • Applying Floats to Your Layouts
  • Overcoming Float Problems

Topic 5 – Positioning Elements on a Web Page

  • How Positioning Properties Work
  • Powerful Positioning Strategies

Topic 6 – CSS for the Printed Page

  • How Media Style Sheets Work
  • How to Add Media Style Sheets
  • Creating Print Style Sheets