CSS level 1 beginner class
Course Description:
Who is this course for?
Web professionals who are seeking to provide a more accessible design structure using Cascading Style Sheets.
You should have a working knowledge of HTML.
What you will learn
Upon successful completion of this course you'll be able to; convert an existing page, styling for print, styling a press release, making an input form look good, styling an events calendar, creating an online greeting card, bringing hyperlinks to life, multicolumn layout, how to skin a menu, sneaking out of the box, positioning a better design and fixing your backgrounds.
CSS level 1 beginner class
Course Outline:
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
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
- inline Box Behaviour
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:
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
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
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
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
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
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
Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class.
