cascading style sheets (CSS) 3

By attending this Cascading Style Sheets 3 workshop, delegates will have:

  • An understanding of the CSS3 specification
  • Knowledge of current browser support for CSS3 in Chrome, Firefox, Safari and IE
  • Practical knowledge of how to implement new CSS3 features
  • Providing support for older browsers including IE6 – 8 (polyfills)

Cascading Style Sheets 3 Training Course provides an introduction to CSS3, including current and planned browser support. The CSS3 Training course has plenty of practical exercises and examples to enable you to implement the exciting new features in CSS3.

Participants will need a working knowledge of, and practical experience with:

  • HTML
  • Cascading Style Sheets
  • Tableless layouts

Familiarity with JavaScript is an advantage.

COURSE AGENDA

  • Structuring HTML correctly
  • Element selectors
  • Class selectors
  • ID selectors
  • Using classes and IDs
  • Element-specific selectors
  • The universal selector
  • Grouping selectors
  • Descendent selectors
  • Child selectors
  • Adjacent selectors
  • Attribute selectors
  • Pseudo-class selectors
  • Dynamic pseudo-class selectors
  • Structural pseudo-class selectors
  • Nth-child selectors
  • Pseudo-element selectors
  • Lab - Targeting page content
  • Solution - Targeting page content
  • Exploring default styling
  • CSS syntax
  • Writing a selector
  • Setting properties
  • Common units of measurement
  • Inline styles
  • Embedded styles
  • Using external style sheets
  • Checking for browser support
  • Dealing with browser inconsistencies
  • Setting a font family
  • Using @font-face
  • Setting font size
  • Font style and font weight
  • Transforming text
  • Using text variants
  • Text decoration options
  • Setting text color
  • Writing font shorthand notation
  • Controlling text alignment
  • Letter and word spacing
  • Indenting text
  • Adjusting paragraph line height
  • Controlling the space between elements
  • Lab - Basic text formatting
  • Solution - Basic text formatting
  • Understanding the box model
  • Controlling element spacing
  • Controlling interior spacing
  • Margin and padding shorthand notation
  • Adding borders
  • Defining element size
  • Creating rounded corners
  • Background properties
  • Using background images
  • Controlling image positioning
  • Using multiple backgrounds
  • Background shorthand notation
  • Lab - Styling container elements
  • Solution - Styling container elements
  • Color keyword definitions
  • Understanding hexadecimal notation
  • Using RGB values
  • Using HSL values
  • Working with opacity
  • Using RGBa and HSLa
  • Styling drop shadows
  • CSS gradients
  • Lab - Working with color
  • Solution - Working with color
  • Numbering Options
  • Adding Custom Number Characters
  • Bullet Options
  • Replacing Bullets with Custom Graphics
  • Managing Hanging Indents
  • Styling Nested Lists
  • Understanding Definition lists
  • Styling Multiple Terms
  • Boxing up Definitin Lists
  • Styling Table Captions
  • Using thead and tfoot syling
  • Highlighting table content
  • Creating alternating row colors
  • Identifying and styling columns
  • Building responsive tables
  • Layout Basics
  • Floats
  • Positioning Elements
  • Fixed Layouts
  • Flexible Layouts
  • Responsive Layouts
  • Simple 2D transitions and Transforms
  • Advanced 2D transitions
  • Enhanced 3D transitions and transforms
  • Creating a custom slide carousel
  • CSS Transition and transform Tools