Cascading Style Sheets

Two Days Ÿ Instructor-led

Cascading Style Sheets (CSS) is an important component of successful Web design. In this course, you will be introduced to the concepts, techniques, properties, and values of CSS in a sequence that reflects a typical “building up” of design rules. You will first start with colors, since in many cases the colors you use for a site project will be dictated to you by the organization’s existing color scheme. Color is also the simplest part of CSS, so it’s a great place to get started. You will then learn how to control typography using text and font properties. Typographical styles are important to establish before you get into the layout of content areas because the size and spacing of your text will help define the size of your content sections. You will then explore the layout-oriented styles of CSS, including margins, padding, and absolute and relative positioning.

Prerequisites

Prerequisites: To ensure your success, we recommend you first take the following courses or have equivalent knowledge:

  • HTML 4.01: Web Authoring, Level 1 (Second Edition)
  • HTML 4.01: Web Authoring, Level 2 (Second Edition)

Course Outline

Lesson 1: Controlling Color and Typography

  • Create an Embedded Style Sheet
  • Apply Color
  • Comment Your Code
  • Modify Text Styles
  • Modify Font Styles
  • Create a Linked Style Sheet

Lesson 2: Designing with the Cascade

  • Create Class Styles
  • Create ID Styles
  • Create Contextual Styles
  • Target Styles to Elements with Specific Attributes
  • Create Style Sheets that Cascade
  • Import Style Sheets
  • Create Inline Styles

Lesson 3: Designing Content Sections

  • Control Margins and Padding
  • Create Borders
  • Control Element Dimensions
  • Create Floating Elements
  • Control Content Overflow

Lesson 4: Controlling Layout with Positioning

  • Controlling Layout with Absolute Positioning
  • Create a Fixed, Multi-column Layout
  • Create a Fluid, Multi-column Layout
  • Control Layout with Relative Positioning
  • Control the Display of Layered Elements
  • Apply Fixed Positioning

Lesson 5: Enhancing an Existing Design

  • Customize Cursors
  • Customize Link Styles
  • Customize Forms
  • Display and Manipulate Background Images
  • Customize Lists
  • Create Generated Content

Lesson 6: Creating Alternate Style Sheets

  • Create Accessible Style Sheets
  • Apply User-Defined System Fonts and Colors
  • Create a Print Style Sheet
Sign Up for a Class!