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 Barcelona

Dates for Milan

Dates for Rome

Dates for Florence

Dates for Frankfurt

Dates for Bologna

Dates for Amsterdam

Dates for Berlin

Dates for Paris

Dates for Cologne

Dates for Brussels

Dates for Dublin

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.

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom