|
CSS Introduction
-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 Behaviour -nline Box Behaviour -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 -Modularising 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 -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 -Hands-on Exercises |
|
More on CSS Page Layout
-Alternative Methods of CSS Positioning -Centring Blocks -Styling Lists -Redefining the Behaviour 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-transpaency 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 |