Cascading Style Sheets (CSS) for Web Page Development: Hands-On

Employing CSS

• Development cycle
• 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 behavior

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

Deriving and overriding styles

• Inheritance and style behavior
• 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 organizing content

• Optimizing 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
• 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
• Graceful degradation vs. progressive enhancement

Employing Effective Navigation

Organizing 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