Advanced CSS




Advanced CSS Training Class Summary

In this 2-day advanced CSS training class, students will learn to use CSS to format forms, create list-based navigation, do advanced page layouts, and create stunning background effects. Students will also learn about CSS coding conventions and shorthand properties.

Audience: Students interested in doing advanced training in CSS.

Prerequisites: Experience in basic CSS and HTML.

Class Length: 2 days

Advanced CSS Training Class Objectives
  • Learn to position elements with CSS.
  • Learn advanced CSS page layout techniques.
  • Learn how to use shorthand CSS properties.
  • Learn to create cool effects with background images using CSS.
  • Learn to lay out forms without tables.
  • Learn to use CSS with lists to create hierarchical navigation.
  • Learn about browser support for CSS.
Advanced CSS Training Class Detailed Outline
  1. Positioning and Visibility
    • Element Flow
    • Position
    • Positioning
    • Z-index
    • Display
    • Visibility
    • Float
    • Clear
  2. Advanced CSS Page Layout
    • Resetting Styles
    • Full Width Layouts
    • Positioning the Headings
    • Fixed Width Layouts
    • A Recommendation on Positioning
    • Laying out a Page - The power of float
  3. CSS Shorthand Properties
    • What is CSS Shorthand?
    • Shorthand Margins and Padding
    • Shorthand Border and Outline
    • Shorthand Backgrounds
    • Shorthand Fonts
    • Shorthand Lists
    • Using Shorthand
  4. CSS Lists as Hierarchical Navigation
    • Using Lists as Vertical Navigation
    • Using Nested Lists as Navigation
    • Using Lists as Horizontal Navigation
    • Using Lists as Drop-Down or Fly-Out Navigation
    • Using a List to Create a Navigation Menu
  5. CSS Background Tricks
    • The State of Rounded Corner Boxes
    • Fixed-width Rounded Corner Boxes
    • Relative-width Rounded Corner Boxes
    • "Mountaintop" Corner Boxes
    • Tabbed Navigation
    • Drop Shadows
    • Replacing Text with an Image
    • Using Backgrounds
  6. Laying out and Styling Forms with CSS
    • Laying out the Questions
    • Creating the Form
    • Reset Revisited
    • Styling the Form
    • Expanding the Form
  7. CSS Best Practices
    • Review some of recommended CSS Best practices
  8. Browser-compatibility Issues
    • Quirks Mode
    • Internet Explorer Conditional Statements
    • Common Browser Bugs / Issues
    • Fixing the Box Model Bug