Introduction to CSS3Several years ago, cascading style sheets (CSS) revolutionized Web design. CSS freed Web designers from depending on woefully inadequate HTML tables to create highly stylized Web pages. It provided us with the means to format and reformat multiple pages from one single set of styles, thereby liberating us from the tedious task of formatting one page at a time. Enter CSS3, the next generation of Web design. Special effects, animations, transitions, gradients – all the content we’ve traditionally fallen back on graphics and animation software to achieve are now at our fingertips through CSS code. CSS3, the first revision to cascading style sheets since the advent of handheld smartphones and tablets, is here, now, ready for prime time. Don’t miss William Harrel’s Introduction to CSS3 eClasses.org. The first session starts April 16, 2012. See you there!

This is a complete, hands-on class in creating Websites with CSS3. Here’s what we’ll cover:

Syllabus


Week 1 – Introduction to CSS3

  • What are Styles?
  • What are Style Sheets?
  • How do Style Sheets Cascade?
  • Evolution of CSS
  • CSS and HTML
  • CSS—A  Bunch of Rules
  • The Anatomy of a CSS Rule
  • Why CSS3?

Week 2 – CSS3 and HTML5

  • What is HTML5?
  • HTML5 Page Structure
  • HTML5’s Built-In Containers
  • Create an HTML5 Page
  • CSS3 and HTML5 Working Together
  • CSS3 and Earlier Versions of HTML

Week 3 – In Depth CSS

  • Class, Type, ID and Compound Selectors
  • Inline, Internal and External Styles
  • CSS Containers
  • CSS Rules for Adapting to Display Size and Device Type
  • CSS Print Media Formatting

Week 4 – Formatting a Page with CSS3

  • CSS3 Page Sections and Includes
  • Format Boxes with CSS3
  • Format Text with CSS3
  • Format Images and other Media with CSS3

Week 5 – CSS3 Special Effects

  • CSS3 Shadow and other Text Effects
  • CSS3 Box Shadow and other Box Effects
  • CSS3 Color Gradients and Fills
  • CSS3 Menu and Navigation Formatting Effects
  • CSS3 Background Effects
  • Use WebKit, Mozilla and other Browser Extensions with CSS3

Week 6 – CSS3 Animations, Transitions and Transformations

  • Create and Animate Simple 2D Shapes
  • Create Page and Object Transitions
  • Create Object 2D and 3D Transformations
  • WebKit and other Browser Extension Transformations

Week 7 – CSS3 and Mobile Devices

  • CSS3 Formatting Based on Screen Size and Device Type
  • Integrate CSS3 and JavaScript
  • Integrate CSS3 and jQuery
  • Media Quires
  • Viewport
  • Device Orientation

Week 8 – CSS3 Advanced Techniques

  • Fluid, Multicolumn Pages
  • Stylized Links
  • Format Form Fields with CSS3
  • CSS3 Sprites
  • CSS3 Drop-Down Menus