Cascading Style Sheets (CSS) for Web Page Development (3 day)

Scheduled Dates (sort by: location | date)

Course Overview

Organisations are under increasing pressure to produce sophisticated, attractive and contemporary Web sites that work on a variety of browsers and mobile devices. Web sites must also meet increasingly stringent requirements to fulfill accessibility guidelines.

In this course, you design and rapidly develop cross-platform Web pages using CSS and HTML. You also learn how to create effective site navigation, and optimise pages for printing.

Audience

This course is valuable for those involved in establishing, designing, developing and maintaining Web sites. Experience with HTML at the level of Course 470, " Developing a Web Site ", is required.

Skills Gained

• Develop fast, efficient, accessible and attractive Web pages using CSS
• Generate tableless page layouts with pure CSS
• Structure site layout and content to make your site faster and more maintainable
• Apply best practices to develop cross-browser compatible Web pages and avoid pitfalls
• Implement menu designs for effective site navigation
• Create Web sites that meet Section 508 and W3C accessibility standards

Course Outline

Employing CSS

• Benefits of CSS
• CSS vs. HTML styling
• Enhancing the visitor experience
• CSS standards
• Accessibility guidelines

Applying CSS Fundamentals

CSS formatting conventions

• Defining CSS structure
• Units of measure
• Fixed vs. relative sizing
• Employing font and color properties
• Abbreviating and simplifying style sheets with shorthand styles

Choosing and applying styles

• Class vs. ID attributes
• Incorporating DIV and SPAN tags
• Comparing inline and block styling

Integrating style sheets

• External and embedded style sheets
• Importing vs. linking to external style sheets
• Working with the CSS cascade

The CSS box model

• Grouping and styling content
• Implementing margins, borders and padding
• Enriching site design with backgrounds and images
• Managing collapsed margins

Manipulating the Style Sheet

Directing browser behaviour

• The importance of the !DOCTYPE directive
• Choosing document standards
• Switching between quirks and standards compliant modes

Deriving and overriding styles

• Inheritance and style behaviour
• Assigning styles and applying rules
• Working with specificity

Structuring Page Layout

Managing page elements with CSS

• Building layout pages using pure CSS tableless techniques
• Floating
• Absolute vs. relative positioning

Effectively organising content

• Optimising page layout for accessibility, search engines and portable devices
• Producing rollover effects
• Implementing linear layout

Implementing Cross-Browser Techniques

Incorporating best practices

• Building pages to display a variety of platforms
• Designing for PDAs and mobile phone browsers
• Producing printable content without creating additional printer-friendly pages
• Styling for optimal print formatting

Cross-browser workarounds

• Targeting specific browsers
• Developing pages that work with quirky browsers and broken boxes

Employing Effective Navigation

Organising Web site information

• Comparing menu techniques for optimal site usability
• Pinpointing visitor location in site structure with crumbtrails
• Creating search-friendly menus using lists

Constructing menus

• Implementing easily maintained tableless menus using HTML lists
• Designing accessible and attractive horizontal, vertical and tabbed menus
• Applying rollover techniques to menus

Styling Forms and Tables for Accessibility

Formatting tabular data

• Effective table design techniques
• Employing CSS to attractively style tables
• Applying accessibility techniques to table design

Form aesthetics to meet standards

• Creating effective and accessible forms that work with diverse browsers
• Applying style sheet properties to forms

Cascading Style Sheets (CSS) for Web Page Development (3 day) / LCS-3