How To Take This Class

Course Overview

This CSS Training course takes students from a basic understanding of the Cascading Style Sheet language and how it can be used to enhance web sites and guides them through a thorough examination of specific uses of CSS. These examples include the latest additions to the CSS language in CSS3, as well as extensive coverage of CSS 2.1 techniques. The course teaches students what can be done with CSS3 currently and how the latest browsers have implemented many of these new features. This class is suitable for both beginning users, who want a thorough introduction to CSS, and more advanced users, who are interested in learning about the latest updates to the CSS language.

Course Prerequisites

Students should have some prior knowledge of HTML.

Course Audience

This course is intended for students who have beginning to intermediate CSS skills and want to expand their knowledge of how to use CSS to enhance their web sites.

What You'll Learn

Upon successful completion of this course, students will be able to:
  • Describe the basic uses of CSS3
  • Gain a clearer understanding of HTML5
  • Understand the basics of CSS
  • Use CSS for Selective Styling
  • Use CSS to control Font Properties
  • Use CSS to control Text Proper ties
  • Use CSS to manipulate Color and Background Properties
  • Work with CSS and List and Table Properties
  • Control User Interface and Generated Content Properties
  • Work with CSS Box Properties
  • Work with Visual Formatting Properties
  • Understand CSS Transformation and Transition Properties
  • Troubleshoot CSS issues
  • Manage Style Sheets

Course Duration

3 Days

Course Outline

  1. Understanding CSS3
    • What Is a Style?
    • What Are Cascading Style Sheets?
    • How does CSS work?
    • The Evolution of CSS
    • CSS Level 1 (CSS1)
    • CSS Level 2 (CSS2)
    • CSS Level 3 (CSS3)
    • CSS and HTML
    • Types of CSS Rules
    • The Parts of a CSS Rule
    • Browser CSS extensions
    • New in CSS3
  2. HTML5 Primer
    • What Is HTML?
    • Basic HTML Document Structure
    • HTML Properties
    • HTML and CSS
    • Types of HTML Elements
    • The Evolution of HTML5
    • And then came XHTML
    • The problem with XHTML2
    • And then there was HTML5
    • Is it HTML5 or XHTML5?
    • What’s New in HTML5?
    • How Does HTML5 Structure Work?
    • Using HTML5 Structure Now
    • Making HTML5 work in Internet Explorer
  3. CSS Basics
    • The Basic CSS Selectors
    • Inline: Adding Styles to an HTML Tag
    • Embedded: Adding Styles to a Web Page
    • External: Adding Styles to a Web Site
    • Creating an external style sheet
    • Linking to a style sheet
    • Importing a style sheet
    • (Re)Defining HTML Tags
    • Defining Reusable Classes
    • Defining Unique IDs
    • Defining Universal Styles
    • Grouping: Defining Elements Using the Same Styles
    • Adding Comments to CSS
  4. Selective Styling
    • The Element Family Tree
    • Defining Styles Based on Context
    • Styling descendents
    • Styling only the children
    • Styling siblings
    • Working with Pseudo-classes
    • Styling links
    • Styling for interaction
    • NEW IN CSS3: Styling specific children with pseudo-classes
    • Styling for a particular language
    • NEW IN CSS3: Not styling an element
    • Working with Pseudo-elements
    • Working with first letters and lines
    • Setting content before and after an element
    • Defining Styles Based on Tag Attributes
    • NEW IN CSS3: Querying the Media
    • Media queries
    • Using the @media rule
    • Inheriting Properties from a Parent
    • Managing existing or inherited property values
    • Making a Declaration !important
    • Determining the Cascade Order
  5. Font Properties
    • Understanding Typography on the Web
    • Specifying the character set
    • Generic font families
    • Dingbats
    • HTML character entities
    • Setting a Font-Stack
    • Finding Fonts
    • Web-safe fonts
    • Downloadable Webfonts
    • Setting a better font stack
    • Setting the Font Size
    • NEW IN CSS3: Adjusting Font Size for
    • Understudy Fonts
    • Making Text Italic
    • Setting Bold, Bolder, Boldest
    • Creating Small Caps
    • Setting Multiple Font Values
  6. Text Properties
    • Adjusting Text Spacing
    • Adjusting the space between letters (tracking)
    • Adjusting space between words
    • Adjusting space between lines of text (leading)
    • Setting Text Case
    • NEW IN CSS3: Adding a Text Drop Shadow
    • Aligning Text Horizontally
    • Aligning Text Vertically
    • Indenting Paragraphs
    • Controlling White Space
    • Decorating Text
    • Coming Soon!
  7. Color and Background Properties
    • Choosing Color Values
    • Color keywords
    • RGB hex values
    • RGB decimal values
    • Percentage values
    • New in CSS3: HSL values
    • New in CSS3: Color alpha values
    • New in CSS3: Color Gradients in Backgrounds
    • Internet Explorer gradients
    • Mozilla gradients
    • Webkit gradients
    • Choosing Your Color Palette
    • Color wheel basics
    • Online color scheme tools
    • Setting Text Color
    • Setting a Background Color
    • Setting a Background Image
    • Using Background Shorthand
  8. List and Table Properties
    • Setting the Bullet Style
    • Creating Your Own Bullets
    • Setting Bullet Positions
    • Setting Multiple List Styles
    • Setting the Table Layout
    • Setting the Space Between Table Cells
    • Collapsing Borders Between Table Cells
    • Dealing with Empty Table Cells
    • Setting the Position of a Table Caption
  9. User Interface and Generated
    • Content Properties
    • Changing the Mouse Pointer Appearance
    • Adding Content Using CSS
    • Teaching the Browser to Count
    • Specifying the Quote Style
  10. Box Properties
    • Understanding an Element’s Box
    • Parts of the box
    • Displaying an Element
    • Setting the Width and Height of an Element
    • Controlling Overflowing Content
    • Floating Elements in the Window
    • Clearing a floated element
    • Setting an Element’s Margins
    • Setting an Element’s Outline
    • Setting an Element’s Border
    • NEW IN CSS3: Rounding Border Corners
    • NEW IN CSS3: Setting a Border Image
    • Setting an Element’s Padding
    • Coming Soon!
  11. Visual Formatting Properties
    • Understanding the Window and Document
    • Setting the Positioning Type
    • Static positioning
    • Relative positioning
    • Absolute positioning
    • Fixed positioning
    • Setting an Element’s Position
    • Stacking Objects in 3D
    • Setting the Visibility of an Element
    • Clipping an Element’s Visible Area
    • NEW IN CSS3: Setting an Element’s Opacity
    • NEW IN CSS3: Setting an Element’s Shadows
  12. Transformation and Transition Properties
    • NEW IN CSS3: Transforming an Element
    • 2D transformations
    • 3D transformations
    • NEW IN CSS3: Adding Transitions Between Element States
    • What can be transitioned?
  13. Fixing CSS
    • Adjusting CSS for Internet Explorer
    • The underscore hack
    • IE conditional CSS
    • Fixing the Internet Explorer Box Model
    • Resetting CSS
    • A simple CSS reset
    • YUI2: Reset CSS
    • Eric Meyer’s reset
    • Fixing the Float
    • Break tag clear all fix
    • Overflow fix
  14. Essential CSS Techniques
    • Creating Multicolumn Layouts with Float
    • Styling Links Versus Navigation
    • Using CSS Sprites
    • Creating a CSS Drop-down Menu
  15. Managing Style Sheets
    • Creating Readable Style Sheets
    • Include an introduction and TOC
    • Define colors, fonts, and other constants
    • Use section headers
    • The @ rules go at the top
    • Choose an organization scheme
    • Use specificity for hierarchy
    • CSS Libraries and Frameworks
    • Style Sheet Strategies
    • The One For All method
    • The Divide and Conquer method
    • The Aggregate method
    • The Dynamic method
    • Troubleshooting CSS Code
    • Ask these questions
    • If all else fails, try these ideas
    • Debugging CSS in Firebug and Web Inspector
    • Firebug for Firefox
    • Web Inspector in Safari and Chrome
    • Validating Your CSS Code
    • Minifying Your CSS
    • 32 CSS Best Practices

What Students Receive

Each student will receive:
  • A copy of CSS3: Visual QuickStart Guide for use during and after class. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.
  • A PC headset for communicating with your instructor and fellow students during your CSS Training Class
  • A course completion certificate upon successful completion of your CSS Training course
  • Six months of post-class email support from a CSS Instructor