Cascading Style Sheets: Introduction

Course Specifications:

Courseware: Cascading Style Sheets

Software: Internet Explorer

Course length: 1 day

Course times: 8:30 a.m. - 4:30 p.m.

Course Description:

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. Once you have established your layout, you can apply the finishing touches on your design, which might include customizing cursors, links, and forms, creating alternate style sheets, and many other techniques.

Course Objective:

You will learn how to use Cascading Style Sheets to design and develop Web sites.

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 the successful completion of Cascading Style Sheets: Introduction, we recommend completion of the following MicroAssist courses, or equivalent knowledge from another source:

1. HTML 4.01: Introduction
2. HTML 4.01: Intermediate

Delivery Method:

Instructor led, group-paced, classroom-delivery learning model with structured hands-on activities. Each student is provided with a computer and a Manual. The manual is the student's to keep and makes an excellent reference guide.

Course Content:

Lesson 1: Controlling Color and Typography

1. Topic 1A: Create an Embedded Style Sheet
2. Topic 1B: Apply Color
3. Topic 1C: Comment Your Code
4. Topic 1D: Modify Text Styles
5. Topic 1E: Modify Font Styles
6. Topic 1F: Create a Linked Style Sheet

Lesson 2: Designing with the Cascade

1. Topic 2A: Create Class Styles
2. Topic 2B: Create ID Styles
3. Topic 2C: Create Contextual Styles
4. Topic 2D: Target Styles to Elements with Specific Attributes
5. Topic 2E: Create Style Sheets that Cascade
6. Topic 2F: Import Style Sheets
7. Topic 2G: Create Inline Styles

Lesson 3: Designing Content Sections

1. Topic 3A: Control Margins and Padding
2. Topic 3B: Create Borders
3. Topic 3C: Control Element Dimensions
4. Topic 3D: Create Floating Elements
5. Topic 3E: Control Content Overflow

Lesson 4: Controlling Layout with Positioning

1. Topic 4A: Controlling Layout with Absolute Positioning
2. Topic 4B: Create a Fixed, Multi-column Layout
3. Topic 4C: Create a Fluid, Multi-column Layout
4. Topic 4D: Control Layout with Relative Positioning
5. Topic 4E: Control the Display of Layered Elements
6. Topic 4F: Apply Fixed Positioning

Lesson 5: Enhancing an Existing Design

1. Topic 5A: Customize Cursors
2. Topic 5B: Customize Link Styles
3. Topic 5C: Customize Forms
4. Topic 5D: Display and Manipulate Background Images
5. Topic 5E: Customize Lists
6. Topic 5F: Create Generated Content

Lesson 6: Creating Alternate Style Sheets

1. Topic 6A: Create Accessible Style Sheets
2. Topic 6B: Apply User-Defined System Fonts and Colors
3. Topic 6C: Create a Print Style Sheet