CSS Fundamentals

2-day Basic/intermediate CSS Course based on W3C Standards — CSF

CSS Training Course Overview

This CSS training course teaches the fundamentals of modern web design using only stylesheets for layout and design — no HTML formatting attributes or layout tables.

This CSS training course covers all of the core CSS features supported by all popular web browsers — including broken legacy browsers such as IE6 and IE7.

Its primary purpose is to enable students to really understand the underlying concepts and logic of CSS — rather than merely supply recipes for popular web design tasks. Although it does supply such recipes — it delivers them with proper explanations of why they work the way they do.

As such, this CSS training course provides a solid and reliable foundation for learning and adapting the more advanced, experimental and visually challenging aspects of CSS, e.g. using CSS3 with HTML5 web applications in older browsers.

Course contents — 1 Getting Started with CSS

Separating HTML from CSS
Using HTML only for structure. meaning, and content
Using only CSS for graphic design, presentation and rendering
Linking CSS style sheets to web pages
Embedding CSS styles in HTML — usually a bad idea
The basic syntax of CSS
- Rules
- Selectors
- Block
- Properties
- Values
Whitespace and Comments in CSS
Why CSS standards matter
Current standards and their status
- CSS 1
- CSS 2
- CSS 2.1
- CSS 3
Browser Support for CSS standards
- Which standards are supported by which browsers
- Proper behaviour when styles are missing/present
- Browser default styles vs. designer stylesheets
- Quirks mode vs. standards mode
- Non-standard behaviours in IE6, IE7 and IE8
Hands-on Exercises

Course contents — 2 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

Course contents — 3 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

Course contents — 4 More Selectors & 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

Course contents — 5 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

Course contents — 6 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

Course contents — 7 Specificity: resolving conflicts

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

Course contents — 8 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

Course contents — 9 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

Dates for Online courses

Dates for Brussels

Wednesday 5 Feb 2025 Arts-loi / Kunst wet €1020 Book
Wednesday 12 Mar 2025 Arts-loi / Kunst wet €1020 Book
Wednesday 16 Apr 2025 Arts-loi / Kunst wet €1020 Book

Dates for Antwerp

Wednesday 16 Apr 2025 Antwerp Centraal €1020 Book
Wednesday 21 May 2025 Antwerp Centraal €1020 Book
Wednesday 25 Jun 2025 Antwerp Centraal €1020 Book

Course Objectives

On completion of this CSS training course, you should be able to:

Use core CSS to size, position, and style any web page component
Produce table-less multi-column page layouts, i.e. CSS-only
Create layouts which scale and stretch to meet user needs
Create designs which work well in modern and legacy browsers, e.g. IE6
Design most styles of navigation menu, e.g.
- Vertical and horizontal
- Rollover and static buttons
- Graphical and browser-drawn/text buttons
- Dropdown and pull-out menus
Style data tables — attractively and reliably
Style interactive web forms — attractively and reliably
Use background and foreground images to create different styling effects
Create designs which work on different media, e.g. print and screen
Use CSS to enhance usability and accessibility
Use CSS to enhance Search Engine Optimisation (SEO)
Maintain, test and debug your CSS — especially on large and complex sites
Use and learn more advanced CSS selectors and properties

Target Audience

Web site designers
Web developers
Communications and marketing professionals with a web brief
Graphic designers who need to enhance their web design skills
SEO consultants
Members of the general public who wish to create their own websites

Training Pre-requisites

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

Training Style

This CSS training course, is instructor-led, hands-on practical training.

Hands-on practical work will comprise between 40% and 60% of the contact time, depending on the needs of the particular training group.