Web Development with Cascading Style Sheets

Course length: 1 day

Performance-based objectives

Upon successful completion of this course, students will be able to:

•    Identify style sheets of various types, understand the advantages and risks of designing with style sheets, and apply correct style sheet syntax.
•    Apply CLASS and ID selectors to customize styles, use the DIV and SPAN elements to construct styles, and create an external style sheet and linking documents to it.
•    Understand the rules of the cascade, and create cascading styles.
•    Style text with typographical properties, including aligning and indenting text, controlling the spacing of lines and characters modifying other text characteristics; declare specific and generic fonts size fonts with various methods; and create variations of font styles.
•    Apply text and background colors with a variety of methods and other background techniques, like controlling background tiling and position.
•    Control the margins, borders, and padding of page elements, and create floating elements and list styles.
•    Apply position properties to control page layout by absolute and relative coordinates, and control the width, overflow, and layering of page elements.
•    Create styles that break down gracefully, such as dynamic hyperlinks and cursor styles, and apply filters and contextual styles.

Prerequisites: This course is designed for the student who is a savvy computer user, is comfortable using the Internet, and is experienced with HTML. We do not provide basic computer, Internet, or HTML concepts in this book.

Course Content

Lesson 1: Introduction to Cascading Style Sheets (CSS)
Designing with Style Sheets
Style Sheet Syntax
Creating Simple Rules

Lesson 2: Creating Rules
Applying Class and ID Selectors
The DIV and SPAN Elements
Linked (External) Style Sheets

Lesson 3: Conflicting Rules: The Cascade
Rules in Conflict; Cascading Order

Lesson 4: Text and Font Properties
Typographical Properties
Font Properties

Lesson 5: Applying Colors and Backgrounds
Applying Colors
Background Techniques

Lesson 6: Box Properties
Formatting with the Box Model
Borders
Floating Elements
Styling Lists

Lesson 7: CSS Positioning
Positioning Elements Absolutely and Relatively
Layering Elements with the z-index Property

Lesson 8: Design and Usage Techniques
Dynamic Link Colors
Cursor Styles
Styling Form Elements
Dynamically Linked Style Sheets
Contextual Selector