CSS Training UK::CSS Courses UK::CSS Training Courses UK::Web Design USING CSS Standards

CSS Training Course Overview

Navigate This Page

Course Contents
Course Overview
Intended Audience
Suitable Delegates
Prerequisites
Dates and Locations
Teaching Methods
Background Information

This CSS training course covers the fundamentals of CSS web design through expert tuition and hands-on exercises. The course teaches delegates how to deliver identical, visually appealing, content to different browsers, applications, platforms, and devices, using Cascading Stylesheets (CSS).

On completion of this basic CSS training course delegates should be able to understand and apply core CSS, i.e. those parts of CSS1, CSS2 and CSS2.1 which are implemented in all modern web browsers.

Delegates are encouraged to follow CSS best practice and adhere closely to web standards, so that they continue to hone their skills after the course, rather than merely accumulating experience.

Top

Intended Audience for this CSS Training

Web site designers
Web developers
Communications, marketing and design professionals who want to:
- Produce more accessible sites using CSS
- Produce more usable sites using CSS
- Produce search engine optimised (SEO) sites using CSS

Top

Suitability for this CSS Training

This course is suitable for people with limited CSS experience and those with no CSS experience at all.

Delegates with previous CSS experience will not have produced CSS-only page layouts, e.g.

Table-less multi-column layout (using the CSS position property)
Horizontal navigation bars using HTML list markup (<ul>)
Multi-layered designs (using the z-index property)

Those who have successfully implemented table-less CSS layout may find our Advanced CSS Training Course more suitable.

Top

Prerequisites for this CSS Training

A good understanding of HTML or XHTML
Graphic ambition — actual talent is not required!
Willingness to unlearn outdated HTML formatting
Willingness to hand code HTML and CSS

Top

Publicly scheduled dates, locations, and prices

Bradford — £575 (+VAT)

16–17 Jul 2008
6–7 Aug 2008
1–2 Oct 2008
3–4 Dec 2008

Central London — £575 (+VAT)

4–5 Jun 2008
9–10 Jul 2008
3–4 Sep 2008
8–9 Oct 2008
12–13 Nov 2008
17–18 Dec 2008

Top

CSS Training Course Contents

Getting Started with CSS

Introduction to this CSS course
Course Organisation
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
Inline Box Behaviour
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
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 — 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

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

Top

Teaching and Learning Methods

This CSS course is delivered through hands-on exercises, backed up by expert tuition in fundamental principles and best coding practice. The instructor will typically have 7-8 years experience of coding standards-based CSS on commercial websites, including at least 5 years experience in table-less CSS layout.

Students are asked to test their CSS on a range of browsers (including non-graphical browsers) and test suites. The GUI tools provided for editing and testing give prompts, diagnostic feedback, and helpful information.

While this CSS course is designed to meet the needs of delegates who use WYSIWYG editors (e.g. Dreamweaver, InDesign, FrontPage, etc.) or Content Management Systems (CMS), hand coding is encouraged. The primary goal of hand coding is educational, i.e. to ensure that delegates acquire a good understanding of the logic behind CSS and not mere routines or recipes. This should, in turn, ensure that delegates are able to adapt WYSIWYG tools to their needs of their websites, rather than vice versa.

Delegates are provided with pre-prepared HTML templates, content and sample solutions for exercises, where appropriate, i.e. where they speed up progress without detracting from essential learning experience.

Top

Background to CSS Training

The World Wide Web Consortium (W3C) developed Cascading Stylesheets (CSS) as a pragmatic way of addressing the the web’s most obvious incompatibility problem: the inability of web designers to create attractive, visual and multimedia effects without using proprietary techniques which lock users into one company’s products.

With Cascading Stylesheets (CSS) it is possible to design web pages in which structured data is almost entirely separated from instructions about how to present it in a browser, on a speaker, on a smartphone, etc.

By putting the presentational instructions in a separate Cascading Style Sheet (CSS), web designers can now ensure that no user loses an important part of the data in a web page, merely because they are using a different kind of software or device.

Although Cascading Stylesheets (CSS) are conceptually simple, the practical implementation of CSS techniques (e.g. table-less layout) can sometimes be tricky.

This is largely due to poor support for CSS standards (CSS1, CSS2, CSS2.1) in the web’s most popular browser and the high levels of CSS support in most alternative browsers.

Internet Explorer 6 (IE6) implements only a small subset of the current standard (published in 1998!) and wrongly implements much of that subset. IE7 is expected to fix the worst bugs and ommissions in IE6, but this will not bring Internet Explorer up to the level of CSS compliance currently found in modern browsers like Firefox, Opera and Safari (more or less complete implementations of CSS2 and significant support for CSS3) . Indeed, by the time IE7 is released, speedier development in these standalone browsers, may have extended the gap.

Bridging this gap is, arguably, the hardest task facing CSS beginners. Very often, self-taught designers find themselves caught in a vicious circle where the fix for a presentational problem in one browser, merely creates new problems in another.

This CSS course is specifically designed to address the problem of browser incompatibility. For the most part, it does so, by focusing on the basic CSS supported by IE6. Where the IE implementation itself is buggy, fixes and workarounds are provided. Moreover, both the hands-on exercises and the instruction is peppered with good practice advice about how to avoid triggering these bugs in the first place.

CSS Fundamentals — 2-Day CSS Training Course

CSS Training Course Overview

Navigate This Page

Intended Audience for this CSS Training

Suitability for this CSS Training

Prerequisites for this CSS Training

Publicly scheduled dates, locations, and prices

CSS Training Course Contents

Getting Started with CSS

CSS Boxes and CSS Selectors

Text Formatting in CSS

More CSS Selectors and Selection

CSS Positioning

More on CSS Page Layout

Cascade, Precedence, Specificity and Inheritance in CSS

CSS Layers and Translucency

Using CSS in the Real World

Teaching and Learning Methods

Background to CSS Training

CSS training UK enquiries

CSS training UK prices

Publicly Scheduled Training Locations

In-house (on-site) training locations

Web Standards Compliance

West Yorkshire Office

South East Regional Office

	CSS Fundamentals — 2-Day CSS Training Course Open Public Course Closed In-House Course Free Lifetime Support CSS Training Course Overview Navigate This Page Course Contents Course Overview Intended Audience Suitable Delegates Prerequisites Dates and Locations Teaching Methods Background Information This CSS training course covers the fundamentals of CSS web design through expert tuition and hands-on exercises. The course teaches delegates how to deliver identical, visually appealing, content to different browsers, applications, platforms, and devices, using Cascading Stylesheets (CSS). On completion of this basic CSS training course delegates should be able to understand and apply core CSS, i.e. those parts of CSS1, CSS2 and CSS2.1 which are implemented in all modern web browsers. Delegates are encouraged to follow CSS best practice and adhere closely to web standards, so that they continue to hone their skills after the course, rather than merely accumulating experience. Top Intended Audience for this CSS Training Web site designers Web developers Communications, marketing and design professionals who want to: Produce more accessible sites using CSS Produce more usable sites using CSS Produce search engine optimised (SEO) sites using CSS Top Suitability for this CSS Training This course is suitable for people with limited CSS experience and those with no CSS experience at all. Delegates with previous CSS experience will not have produced CSS-only page layouts, e.g. Table-less multi-column layout (using the CSS `position` property) Horizontal navigation bars using HTML list markup (`<ul>`) Multi-layered designs (using the `z-index` property) Those who have successfully implemented table-less CSS layout may find our Advanced CSS Training Course more suitable. Top Prerequisites for this CSS Training A good understanding of HTML or XHTML Graphic ambition — actual talent is not required! Willingness to unlearn outdated HTML formatting Willingness to hand code HTML and CSS Top Publicly scheduled dates, locations, and prices Bradford — £575 (+VAT) 16–17 Jul 2008 6–7 Aug 2008 1–2 Oct 2008 3–4 Dec 2008 Central London — £575 (+VAT) 4–5 Jun 2008 9–10 Jul 2008 3–4 Sep 2008 8–9 Oct 2008 12–13 Nov 2008 17–18 Dec 2008 Top CSS Training Course Contents Getting Started with CSS Introduction to this CSS course Course Organisation 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 Inline Box Behaviour 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 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 — 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 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 Top Teaching and Learning Methods This CSS course is delivered through hands-on exercises, backed up by expert tuition in fundamental principles and best coding practice. The instructor will typically have 7-8 years experience of coding standards-based CSS on commercial websites, including at least 5 years experience in table-less CSS layout. Students are asked to test their CSS on a range of browsers (including non-graphical browsers) and test suites. The GUI tools provided for editing and testing give prompts, diagnostic feedback, and helpful information. While this CSS course is designed to meet the needs of delegates who use WYSIWYG editors (e.g. Dreamweaver, InDesign, FrontPage, etc.) or Content Management Systems (CMS), hand coding is encouraged. The primary goal of hand coding is educational, i.e. to ensure that delegates acquire a good understanding of the logic behind CSS and not mere routines or recipes. This should, in turn, ensure that delegates are able to adapt WYSIWYG tools to their needs of their websites, rather than vice versa. Delegates are provided with pre-prepared HTML templates, content and sample solutions for exercises, where appropriate, i.e. where they speed up progress without detracting from essential learning experience. Top Background to CSS Training The World Wide Web Consortium (W3C) developed Cascading Stylesheets (CSS) as a pragmatic way of addressing the the web’s most obvious incompatibility problem: the inability of web designers to create attractive, visual and multimedia effects without using proprietary techniques which lock users into one company’s products. With Cascading Stylesheets (CSS) it is possible to design web pages in which structured data is almost entirely separated from instructions about how to present it in a browser, on a speaker, on a smartphone, etc. By putting the presentational instructions in a separate Cascading Style Sheet (CSS), web designers can now ensure that no user loses an important part of the data in a web page, merely because they are using a different kind of software or device. Although Cascading Stylesheets (CSS) are conceptually simple, the practical implementation of CSS techniques (e.g. table-less layout) can sometimes be tricky. This is largely due to poor support for CSS standards (CSS1, CSS2, CSS2.1) in the web’s most popular browser and the high levels of CSS support in most alternative browsers. Internet Explorer 6 (IE6) implements only a small subset of the current standard (published in 1998!) and wrongly implements much of that subset. IE7 is expected to fix the worst bugs and ommissions in IE6, but this will not bring Internet Explorer up to the level of CSS compliance currently found in modern browsers like Firefox, Opera and Safari (more or less complete implementations of CSS2 and significant support for CSS3) . Indeed, by the time IE7 is released, speedier development in these standalone browsers, may have extended the gap. Bridging this gap is, arguably, the hardest task facing CSS beginners. Very often, self-taught designers find themselves caught in a vicious circle where the fix for a presentational problem in one browser, merely creates new problems in another. This CSS course is specifically designed to address the problem of browser incompatibility. For the most part, it does so, by focusing on the basic CSS supported by IE6. Where the IE implementation itself is buggy, fixes and workarounds are provided. Moreover, both the hands-on exercises and the instruction is peppered with good practice advice about how to avoid triggering these bugs in the first place.	Printer-friendly version CSS training UK enquiries UK Training enquiries and feedback form. CSS training UK prices For publicly scheduled training (individual places), see our UK training schedule. In-house training for company groups is charged at a daily rate per group — see our In-House UK Training Guidelines. Publicly Scheduled Training Locations We currently run public training courses in the following locations: London, UK Leeds, West Yorkshire, UK Birmingham, West Midlands, UK Carshalton, Surrey, UK Chester, North West, UK Coventry, West Midlands, UK Edinburgh, Scotland, UK Glasgow, Scotland, UK Harwell, Oxfordshire, UK Manchester, North West, UK Milton Keynes, Buckinghamshire, UK Newark, Nottinghamshire, UK Reading, Berkshire, UK Slough, Berkshire, UK Stevenage, Hertfordshire, UK Wakefield, West Yorkshire, UK Wokingham, Berkshire, UK Most UK public training courses are available on a monthly basis. Please see the individual course outlines or our public training schedule for details. In-house (on-site) training locations We deliver in-house courses at client premises and/or training facilities in any part of the world which is practically and commercially accessible. Our In-house training guidelines outline our basic requirements and our UK pricing structure. To estimate costs for training in other countries, simply convert to your local currency and then make a rough calculation of our tutor's costs for travelling to and staying at your location. Web Standards Compliance A good way of assessing the quality of website design training, is to find out whether or not the training company's own web site complies with web standards. Ours does. Every website which adheres to these W3C standards makes the web a little more useful and a little easier to use. Conversely, every site which breaks them not only irritates potential customers, but also undermines the interoperability upon which the basic functions of the web depend. If you ever find a non-compliant page on our site, please let us know. It's most likely to be the result of a momentary lapse in concentration (e.g. markup typos) and will be fixed immediately.
Training Homepage Schedule & Prices Course outlines AIX courses Apache courses Assembly Language courses C courses C++ courses CVS & Subversion courses Check Point Cisco courses Citrix courses Clearswift courses CompTIA courses (A+) Crystal Reports courses HP-UX courses ITIL courses Java courses Juniper NetScreen Linux courses - ASUS Eee PC Linux courses - General Linux courses - Red Hat Linux courses - SUSE Management and Personal Development Microsoft courses Moodle training MySQL training courses Networking (e.g. TCP/IP) PHP courses Perl courses Project Management & Prince2 courses Python courses Retail Management Systems Solaris courses UML/OO A&D courses Unix courses VMware courses Web Design Web Design (HTML/XHTML) Basic CSS Training Advanced CSS Training Web Usability Training Search Engine Optimisation (SEO) Training Website Accessibility Training Writing For The Web Scripting Dynamic Web Pages HTML Training On-site CSS Training On-site Scripting Comparison XML courses Bradford Training Centre Leeds Training Centre London Training Centre Talks & Briefings Book Reviews Clients Introductory Courses Terms and Conditions West Yorkshire Office GBdirect Ltd Training Division Bradford Design Exchange 34 Peckover Street BRADFORD BD1 5BD West Yorkshire United Kingdom training@gbdirect.co.uk Training: 0800 651 0338 General: +44 (0)870 200 7273 Finance: +44 (0)1353 615 174 Please call between 0900 and 1700 (UK time) on Monday to Friday South East Regional Office GBdirect Ltd Training Division 18 Lynn Rd ELY CB6 1DA Cambridgeshire United Kingdom training@gbdirect.co.uk Training: 0800 651 0338 General: +44 (0)870 200 7273 Finance: +44 (0)1353 615 174 Please call between 0900 and 1700 (UK time) on Monday to Friday Please note: Non-training enquiries should be directed, initially, to our UK national office in Bradford (West Yorkshire), even if the enquiry concerns services delivered in London or South/East England. Clients in London and the South East will typically be handled by staff working in the London or Cambridge areas.