Web Design with Cascading Style Sheets

Course specifications

Course number: 077 930

Software version number:

Course length: 1 day(s)

Course description

Overview: Students will learn how to effectively design web site using cascading style sheets.

Prerequisites: HTML programming Level One, or equivalent knowledge.

Delivery method: Instructor-led, group-paced, classroom-delivery learning model with structured hands-on activities.

Benefits: Students will learn how to effectively design web site using cascading style sheets.

Target student: Students enrolling in this course should understand basic HTML programming and know how to use the latest versions of Netscape Navigator and Microsoft Internet Explorer.

Performance-based objectives

Lesson objectives help students become comfortable with the course, and also provide a means to evaluate learning. Upon successful completion of this course, students will be able to:

• Apply various style sheet types to design Web pages
• Use selector classes
• Use DIV and SPAN tags with style sheet rules
• Design Web pages that degrade gracefully
• Position elements on a page
• Apply block properties
• Apply font properties
• Apply text properties
• Use pseudo-classes and pseudo-elements
• Apply contextual selectors
• Use cascading styles to design a page
• Import fonts into a page
• Use javascript to identify a user's browser
• Link a user to a specific external style sheet

Course content

Lesson 1: Overview of style sheets

Introduction to style sheets

• Task A-1: Exploring style sheet examples in Netscape Navigator 4.5 and Microsoft Internet Explorer 4.01
• Task A-2: Linking existing pages to an external style sheet

Designing with style sheets ( concepts include separating form and structure, controlling page layout, bandwidth-friendliness, limitations of, design guidelines, easy to maintain large sites, current support, advantages and disadvantages, style sheet types, developing for an intranet vs the Internet.)

• Task B-1: Exploring the advantages and disadvantages of designing with css
• Task B-2: Exploring style sheet types

CSS syntax

• Task C-1: Exploring CSS syntax
• Task C-2: Creating simple styles

Lesson 2: Creating rules

Setting up rules

• Task A-1: Grouping selectors
• Task A-2: Grouping properties
• Task A-3: attribute selectors

Using class selectors

• Task B-1: Creating different classes of the same element
• Task B-2: Creating individual classes

DIV and SPAN

• Task C-1: Applying DIV
• Task C-2: Applying SPAN

Linking to an external style sheet

• Task D-1: Creating an external style sheet
• Task D-2: Linking documents to an external style sheet

Lab 1: Updating styles

Lesson 3: Styling with text and font properties

Typography

• Task A-1: Aligning text
• Task A-2: Leading (line-height)
• Task A-3: Indenting text
• Task A-4: Letter spacing in IE
• Task A-5: Overlapping text
• Task A-6: Creating first-letter effects

Fonts

• Task B-1: Applying font names
• Task B-2: Applying font size
• Task B-3: Applying font style
• Task B-4: Font-weight
• Task B-5: Font-variant
• Task B-6: Text-decoration