Telephone: 0208 942 5724
Email: info@aspecttraining.co.uk
Open: 09:00a.m. to 17:30p.m. Monday to Friday

CSS Introduction / Intermediate

Duration: 2 Days

Overview:

Web site design has grown up. Unlike the old days, when designers cobbled together chunky HTML, bandwidth-hogging graphics, and a prayer to make their sites look good, Cascading Style Sheets (CSS) now brings your inner designer to life. But, CSS isn't just a tool to pretty up your site; it's a reliable method for handling all kinds of presentation - from fonts and colours to page layout.
Aspect Training’s CSS Essentials course clearly explains this powerful design language and how you can use it to build sparklingly new Web sites or refurbish
On this course beginners and Web-building veterans alike can learn how to navigate the ins-and-outs of CSS and take complete control over their Web pages' appearance. The course combines crystal-clear explanations, real-world examples, a dash of humour, and dozens of hands on examples to show you ways to design sites with CSS that work consistently across browsers.
Want to learn how to turn humdrum Web sites into destinations that will capture viewers and keep them longer? Attend this course and learn the real magic of this tool.

Prerequisites:

This course is suitable for people with limited CSS experience and those with no CSS experience at all and who have a good understanding of HTML or XHTML

Course Topics:

Getting Started with CSS

Introduction to this CSS course
Course Organisation
HTML Structure and Content, CSS Presentation
Advantages of CSS
Creating and Using StyleSheets
CSS Rules: The Basic Syntax
Case, Whitespace and Comments in CSS
The CSS Standards
The Scope Of CSS
Browser Support for CSS
Handson 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
Inline Box Behaviour
Using the Generic Block Level Element: <div>
Handson 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>
Handson Exercises

More CSS Selectors and Selection

Using HTML Element IDs in CSS
Using CSS Descendant Selectors
Descendant Selector Examples
Child, Sibling and PseudoClass Selectors
Why You Need To Know Them
Browser Support and CSS Hacks
Distinguishing and Setting Link States
Link, Visited, Hover, Active, Focus
Modularising CSS StyleSheets
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
Handson 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
Handson 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
Handson 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
NonCSS Presentational Hints
Property Inheritance
Handson Exercises

CSS Layers and Translucency

Different Forms of Layered Presentation in CSS
Layering with the zindex Property
Different Methods for Creating Translucency Effects
The CSS3 opacity Property
opacity Example
Fixed Attachment Backgrounds in Layers
backgroundattachment Example
Transparency and Semitranspaency with AlphaBlended PNG
PNG Translucency Example and Sample Code
PseudoTransparency with JPG Positioned Backgrounds
JPG Pseudo Transparency Example
Handson 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
Crossplatform Testing in Singleplatform Environments


Click Here for printer friendly version of outline

Ring 0208 942 5724 if you require further details or would like to book a training course

Aspect Training, 20 Coombe Road, New Malden, Surrey, KT3 4QE

© 2013 Aspect Training