Course Contents CSS Training
Getting Started with CSS
- Introduction to this CSS course
- Course Organization
- HTML Structure and Content, CSS Presentation
- Advantages of CSS
- Creating and Using Style-Sheets
- CSS Rules: The Basic Syntax
- Case, Whitespace and Comments in CSS
- The CSS Standards
- The Scope Of CSS
- Browser Support for CSS
- Hands-on Exercises
CSS Boxes and CSS Selectors
- The CSS Box Model
- CSS and Logical HTML Structure
- Styling Boxes: Borders, Margins and Padding
- The IE Box Model and Quirks Mode
- IE Box Model Workarounds
- Using IE6 Standards Mode
- Specifying CSS Distances
- Problems with Absolute Units: pixels and point sizes
- Using Proportional Units: em, ex and percentages
- Formatting Box Edges Differently
- Shorthand Syntax for Sets of Edges
- Using Margins and Padding Effectively
- Collapsing Vertical Margins on Paragraphs
- Using Negative Margins on Boxes
- Background Images on CSS Boxes
- Grouping Elements with HTML Classes
- Styling Multiple Elements Similarly (Selector Grouping)
- Block Boxes and Inline Boxes
- Block Box Behavior
- Inline Box Behavior
- Using the Generic Block Level Element: <div>
- Hands-on Exercises
Text Formatting in CSS
- Text Formatting
- Typefaces, Alternatives and Defaults
- Text Size — a Serious Usability Issue
- Font Characteristics
- Setting and Using Space Within Text
- Formatting Blocks of Text
- Using Arbitrary Inline Tags: <span>
- Hands-on Exercises
More CSS Selectors and Selection
- Using HTML Element IDs in CSS
- Using CSS Descendant Selectors
- Descendant Selector Examples
- Child, Sibling and Pseudo-Class Selectors
- Why You Need To Know Them
- Browser Support and CSS Hacks
- Distinguishing and Setting Link States
- Link, Visited, Hover, Active, Focus
- Modularizing CSS Style-Sheets
- Simpler Management, Less Effort, More Control
- Embedded CSS Styles in HTML Documents
- How and When to Use Them (Rarely).
- Distinguishing Print, Screen and other Output Formats
- Special Issues in CSS for Print
- Hands-on Exercises
CSS Positioning
- Choosing the Right CSS Technique for Positioning Blocks
- The Position Property, Floats, Margins (inc. Negative and Auto), etc
- Static Positioning and Normal Flow
- Absolute Positioning Outside Normal Flow
- Relative Positioning — Not What You May Expect!
- Fixed Positioning Outside Normal Flow
- Relative Absolute Positioning
- Absolutely Positioned Blocks in Relatively Positioned Containers
- Floating Boxes with the CSS float property
- Page Layout Using Absolutely Positioned Blocks
- Page Layout Using Floated Blocks
- Hands-on Exercises
More on CSS Page Layout
- Alternative Methods of CSS Positioning
- Centering Blocks
- Styling Lists
- Redefining the Behavior of Inline and Block Elements
- Hiding and Revealing Blocks
- Table Formatting in CSS
- Styling Table Cell Borders
- Page Layout with Table Display Properties
- Hands-on Exercises
Cascade, Precedence, Specificity and Inheritance in CSS
- Taking Control: Ensuring that CSS Rules Interact in the Way You Want
- Combining Styles: Different Types, Origins, Importance, Specificity and Order
- Examples: Combining Rules
- Cascading and Cascade Order
- Resolving Style Conflicts By Origin
- Resolving Style Conflicts By Importance
- Resolving Conflict By Selector Specificity
- Resolving Conflict By Order
- Non-CSS Presentational Hints
- Property Inheritance
- Hands-on Exercises
CSS Layers and Translucency
- Different Forms of Layered Presentation in CSS
- Layering with the z-index Property
- Different Methods for Creating Translucency Effects
- The CSS3 opacity Property
- opacity Example
- Fixed Attachment Backgrounds in Layers
- background-attachment Example
- Transparency and Semi-transparency with Alpha-Blended PNG
- PNG Translucency Example and Sample Code
- Pseudo-Transparency with JPG Positioned Backgrounds
- JPG Pseudo Transparency Example
- Hands-on Exercises
Using CSS in the Real World
- Deploying CSS
- CSS Formatting Versus HTML Formatting
- Achieving a Balance
- Standard Tags and Semantic Markup
- Usability
- Readable Pages
- Screen Size and Fluid Design
- Text Size, Including Internet Explorer Quirks
- Table Layout and CSS Positioning
- Table Layout and CSS Positioning as Alternatives
- Combining Table Layout with CSS Positioning
- CSS Browser Support
- Testing Websites
- Using Test Suites and Multiple Browsers
- Cross-platform Testing in Single-platform Environments
- CSS Help and Advice
- Authorative Sources versus Web Myths and Gossip
- Free Lifetime Support