Cascading Style Sheets

2 days

Course Overview

You are familiar with using HTML to design web pages. You have used HTML style-oriented tags and attributes to stylize and design your pages. Cascading Style Sheets, or CSS, is integrated into HTML 4.01 and forms an important component of successful web design. CSS offers great flexibility and ease in designing web pages without code heavy HTML documents. In this course, you will work with properties and styles related to colors, typography, page layouts, customized cursors, links, and forms available in CSS to build an effective web page.

Benefits

You will use cascading style sheets to design and develop efficient and effective websites.

Target student

Experienced HTML authors or Web designers/developers who want to use CSS to create more powerful, efficient, and standards-compliant Web sites.

Prerequisites

To ensure your success, we recommend you first take the following Systematix courses HTML 4 Web Authoring Level 1 and HTML 4 Web Authoring Level 2 or have equivalent knowledge.

Course Outline

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

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

Designing Content Sections

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

Controlling Layout with Positioning

  • Control 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

Enhancing an Existing Design

  • Customize Cursors
  • Customize Link Styles
  • Customize Forms
  • Work with Background Images
  • Customize Lists
  • Create Generated Content

Creating Alternate Style Sheets

  • Create Accessible Style Sheets
  • Apply User-Defined System Fonts and Colors