CSS 101

About CSS 101

CSS is used to add style to web pages. It can be used to enhance the visual appearance of pages, as well as to add more sophisticated layout and effects.

This course covers the principles of using CSS to developo a visual theme for web sites. It includes basic text and layout techniques, as well as some effects available in modern browsers. It also covers some of the traps and pitfalls with different browser versions.

Students who have done the HTML 101 course will already have covered some elementary CSS. However, they will benefit from learning CSS in more depth, and having a more formal approach to CSS principles.

The CSS techniques covered include:

  • General CSS Styling
  • Styling Text
  • Layout and Positioning
  • Using Classes and IDs
  • Styling Tables and Lists
  • CSS and Images
  • Using Multiple Style Sheets

At all times, the student is encouraged to follow good design and writing principles, and the examples and exercises are clear and written in a way to facilitate further development.

Throughout the book are summary sections which explain key CSS concepts, and can be used later as a reference.

Course Outline

Download Course Outline

  • CSS 9
    • Background: the Bad Old Days
    • CSS Styles
    • Before your Start
    • Getting Ready
    • Web Browsers
    • A Decent Text Editor.
    • Another Word about Browsers
  • Basic Styling
    • Creating an Embedded Style Sheet
    • Writing a CSS Rule
    • Styling the Body
    • Fonts
    • Measurement Units
    • Suggested Size
    • Line Height
    • Optional: Short Hand
    • Styling Other Elements
    • Colours
    • Multiple Selectors
    • CSS Comments
    • External Style Sheets
    • Rules of Cascading
  • Colour
    • CSS Colours
    • Specifying Colours
  • Introductory Position
    • HTML div ELEMENT
    • The id Attribute
    • Wrapper Element
    • Wrapper Styles
    • Body Styles
    • Other Divs
  • Classes and IDs
    • Scope
    • Targeting Some Paragraphs
    • CSS Class Selector
    • Targeting Some Text
    • Targeting a Single Element
  • Layout
    • CSS Layout
    • Creating div Elements
    • Size Properties
    • Appearance Properties
    • The float Property
    • Enhancing our Layout
    • Position Propertes
    • Creating a Multi Column Layout
  • Anchors
  • Images
  • Multiple Style Sheets
  • Tables
    • HTML Tables
    • Identifying Tables
    • Specific Style
    • Tricks
    • Traps
  • Lists
    • HTML Lists
    • List style types
    • Definition Lists
    • Lists for Navigation
    • Nested Anchors
    • The Box Model
  • Media Types
    • Media Types
    • Selecting Media Types
    • Print Style Sheets
    • Other Media Types
  • Forms
    • HTML Forms
    • Styling the form element
    • Labels
    • fieldlists & legends
    • Styling button elements

Prerequisites

  • General Computer Skills
  • Experience using the World Wide Web

Course Duration

2 Days

Pricing

See Pricing

Student Resources