MENU
I am happy I took this course with Tia as the instructor. The materials were easy to use, but she made it easier...More Testimonials »

Comprehensive CSS Training

Delivery Options

Upcoming Live eLearning Classes

There are currently no upcoming Live eLearning classes. Please contact us if you would like us to schedule a class.

Class Description

Class Overview

This CSS training class teaches students to use Cascading Style Sheets to format HTML pages. After learning the basics of CSS, 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.

This Comprehensive CSS Training class is a combination of the following courses:

Class Goals

  • Learn the benefits of CSS.
  • Learn to avoid using deprecated tags and attributes.
  • Learn CSS syntax.
  • Learn to use <div> and <span> tags appropriately.
  • Learn most of the common properties and their values.
  • Learn to create custom CSS cursors.
  • Learn to style links with CSS to create "CSS Buttons".
  • Learn to work with borders, margin, and padding (the box model).
  • Learn to style tables with CSS.
  • 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 to organize your CSS code.
  • Learn about browser support for CSS.

Class Outline

  1. Crash Course in CSS
    1. Benefits of Cascading Style Sheets
    2. CSS Rules
    3. Selectors
    4. Precedence of Selectors
    5. The Cascade
    6. Creating an Embedded Style Sheet
    7. Creating an External Style Sheet
    8. Adding Inline Styles
    9. Media Types
    10. <div> and <span>
    11. Divs and Spans
    12. Units of Measurement
    13. The Inherit Value
    14. @import
  2. CSS Fonts
    1. Font - the old way
    2. Font-family
    3. Font-size
    4. Font Family and Font Size
    5. Font-style
    6. Font-variant
    7. Font-weight
    8. Font Style, Font Variant and Font Weight
  3. CSS Text
    1. Letter-spacing
    2. Word-spacing
    3. Line-height
    4. Text-align
    5. Text-decoration
    6. Text-indent
    7. Text-transform
    8. Vertical-align
    9. White-space
    10. Text Properties
  4. Colors and Backgrounds
    1. About Color Values
    2. Color
    3. Background-color
    4. Background-image
    5. Colors and Backgrounds
  5. Custom Cursors
    1. Cursor Styles
    2. Custom Cursors
    3. Using Custom Cursors
  6. CSS and Links
    1. Pseudo-classes
    2. CSS Button Links
    3. Modifying Links
  7. Borders, Margins and Padding
    1. Getting Started
    2. Borders
    3. Margin
    4. Padding
    5. Borders, Margin and Padding
  8. Styling Tables with CSS
    1. A Review of HTML Table Syntax
    2. Styling a Table
  9. Transforms and Transitions
    1. Transitions
    2. Two-dimensional Transforms
    3. Transitions and Transforms
  10. Positioning and Visibility
    1. Element Flow
    2. Position
      1. Absolute Positioning
      2. Relative Positioning
      3. Fixed Positioning
    3. Exercise: Positioning
    4. Z-index
    5. Display
    6. Visibility
    7. Float
    8. Clear
  11. Advanced CSS Page Layout
    1. Resetting Styles
    2. Full Width Layouts
      1. Two-column
      2. Three-column
    3. Exercise: Positioning the Headings
    4. Fixed Width Layouts
    5. A Recommendation on Positioning
    6. Exercise: Laying Out a Page - The Power of Float
      1. Other Methods of Layout
    7. CSS Text Columns
    8. Flexible Box Model
    9. Exercise: Flexible Box Layout
  12. Media Queries
    1. Media Queries
      1. What Are Media Queries?
      2. The Viewport Meta Tag
      3. A First Example
      4. Responsive Design
    2. Exercise: Responsive Design for a Simple Blog
    3. Image Widths
    4. Exercise: Responsive Design for a Simple Blog (Three Views)
  13. CSS Shorthand Properties
    1. What is CSS Shorthand?
      1. Benefits of Using CSS Shorthand
      2. Value Order of CSS Shorthand Properties
      3. CSS Initial Values
    2. Shorthand Margin and Padding
    3. Shorthand Border
    4. Shorthand Backgrounds
    5. Shorthand Fonts
    6. Shorthand Lists
    7. Exercise: Using Shorthand
  14. CSS Lists as Hierarchical Navigation
    1. Menus as Lists
    2. CSS Horizontal Menu
    3. CSS Vertical Menu
    4. CSS Dynamic Menus
      1. CSS Dropdown Menu
      2. CSS Flyout Menu
    5. Exercise: Combining Dropdown and Flyout Menus
    6. CSS
    7. Menus
      1. Dropdown Menus
      2. A Mobile-Frienly Menu
    8. Accessibility
  15. CSS Background Tricks
    1. Rounded Corner Boxes
      1. Fixed-width Rounded Corner Boxes
      2. Rounded Corners with CSS
      3. Mountaintop Corners
    2. Exercise: Creating a Rooftop Panel
    3. Tabbed Navigation
    4. Exercise: Tabbed Navigation: Rounding the Corners
    5. Drop Shadows
      1. CSS Drop Shadows: The box-shadow Property
    6. CSS Sprites
    7. Background Opacity and Images
      1. The opacity Property
    8. Exercise: Using HSL and Opacity
      1. Backgrounds
    9. Exercise: Multiple Background Images with background-clip,
    10. background-origin, and background-size
  16. Laying out and Styling Forms with CSS
    1. Laying out the Questions
    2. Creating the Form
      1. HTML
      2. Form Fields
    3. Adding the Form Fields
    4. Reset Revisited
    5. Styling the Form
    6. Exercise: Expanding the Form
  17. CSS Best Practices
    1. Considerations
    2. Use CSS
    3. Use External Style Sheets
    4. Organize Your Style Sheets/Preprocessors
    5. Exercise: Using Sass
    6. ID the Body
    7. Use CSS Shorthand
    8. Combine CSS Rules
    9. Use a CSS Reset
    10. Use the "LoVe HAte" Rule
    11. Use HTML Lists for Navigation Menus
    12. Avoid CSS Hacks
    13. Use a CSS Compressor
    14. Use a Master Style Sheet
    15. Summary of Best Practices
  18. Browser-compatibility Issues
    1. Quirks Mode
      1. Controlling Browser Modes
      2. Design Strategy
    2. Internet Explorer Conditional Statements
    3. Common Browser Bugs / Issues
      1. Positioning Legends

Why Webucator?

  • Expert instructors.
  • Classes are never canceled for low enrollment.
  • 100% free re-take option.
  • We have taught more than 66,687 students at 14,790 different organizations.

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following areas is required:

  • HTML

Courses that can help you meet these prerequisites:

Technical Requirements

Our computer technical requirements and setup process is easy, with support just a click away.

Potential Follow-on Classes

Client Success
  1. Compare Us
  2. Client List
  3. Testimonials
Join The Team
  1. Learn how you can become a Webucator Trainer
  2. Career Opportunities
Locations
© Webucator, Inc. All rights reserved. |Toll Free: 1-877-932-8228Toll Free: 1-877-932-8228 |Outside the USA: 315-849-2724|Fax: 315-849-2723