CSS Essentials

1-day Basic W3C Standards-based CSS-only Course — CSS-01

CSS Web Design TrainingCourse Overview

This hands-on CSS training course provides both:

  • An introduction to CSS for complete beginners, and;
  • A foundation for experienced designers stepping up to advanced CSS

Please note that on the basis of this course alone, you will only be able to create simple CSS-based page designs. For more complex designs you will also need the follow-on 1-day course in CSS Positioning and Full Page Layout (CSS-02).

Complete beginners may take this course along with HTML Essentials (HTML-01). Or, alternatively, as part of our two-day Web Design Essentials (HTML-02) course.

Web designers with some CSS knowledge and experience are more likely to combine this course with CSS Positioning and Layout (CSS-05) — as part of our two-day CSS Fundamentals training course (CSS-03) package. Taking this CSS Fundamentals package will save you between £150 and £200 on the full price of the two courses taken separately.

CSS Web Design TrainingCourse Contents

Introduction

  • Introduce:
    • Course members
    • Training equipment and facilities
    • Course software
    • Course overview

Basic CSS Syntax and Styling

  • Recap the separation principle in modern web design:
    • Content, presentation, control — i.e. link stylesheets
  • Practice linking-in stylesheets
  • Understand basic CSS syntax:
    • Rules, selectors, properties, values, block, terminators
    • Spacing, indentation, case-sensitivity, comments, sequence
  • Practice using CSS syntax — e.g. setting colours
  • Issues with colour
    • Reproduction, meaning, usability, accessibility
    • Which colour syntax?
  • Understand the CSS rendering process
    • How default styles and designer styles interact
  • CSS standards and browser support
    • Know the de facto and formal standards — CSS2.0, CSS2.1, CSS3
    • Best practice advice for handling varying browser support
  • Analyse a simple stylesheet
    • Setting colour, typefaces, box borders. margins and padding
  • Text styling and typography:
    • Setting type faces. size, proportions, spacing, alignment
  • Practice basic CSS text formatting
  • Training Exercises

Core CSS Concepts — Select and Style Layout Boxes

  • How CSS selects and renders HTML as rectangular boxes
    • Simple examples, selecting by element type
  • The standard CSS Box Model
    • Content, padding, outlines, borders and margins
  • Sizing boxes and their components
    • Units of measurement
    • Proportion, scalability and flow
  • Basic whitespace
    • Critical differences between margin and padding
    • Combining margin and padding correctly and safely
  • Non-intuitive margin behaviours, e.g.
    • Margins set box size and position
    • Collapsing margins and containers
  • Aligning boxes within boxes
  • Background images:
    • Linking, tiling, positioning, fall-back colours
    • Common uses — fills, borders, rounded corners, shadows, decorative bullets
  • The non-standard IE Box Model
    • Workarounds for IE6 and IE7 — incl. standards mode
  • Training Exercises

Selecting Content More Precisely

  • Define page structures in HTML — not CSS
  • Precise selection — the key CSS skill
    • Select what you want, exclude what you don't
  • Selecting page components more precisely:
    • By HTML element type
    • Within one area of the page (descendents) — e.g. news boxes in a sidebar
    • Named parts of a page (classes) — e.g. special offer boxes
    • One uniquely named page component (IDs) — e.g. the main article
    • Just one level of a page structure (immediate children) — e.g. second-level menus
    • By relative position in a sequence (siblings) — e.g. a paragraph after a heading
    • By absolute position in a sequence (psuedo-classes) — e.g. the first cell in a table row
    • Different link states (psuedo-classes) — e.g. hovered links, visited links, clicked links, etc.
  • Practice precise selection and styling on:
    • A data table structure — i.e. a grid of boxes
    • A sectioned single column page layout
    • A multi-column XHTML/HTML4 layout
    • A multi-column HTML5 layout
  • Training Exercises

Different Types of Layout Box

  • Block boxes vs. inline boxes
    • Default styling, relation to ‘Normal Flow’, convert one into the other
    • Using divs and spans properly — highlighting common misconceptions and bad practice
  • Practice styling and converting blocks and inline elements
    • On a multi-column page containing a multi-part form
  • Other types of layout box
    • Floats, inline-blocks, positioned boxes, etc.
  • Understanding floats properly
    • Sliding, position in HTML, relation to normal flow, stacking, line-wrapping, clearance, different margin behaviour
    • The difference between floats and inline-blocks
    • Non-standard, buggy, floats on older IEs
    • How to style floats correctly — and safely
  • Practice using floats
    • Float images in text
    • Stack floated images in a photo gallery
    • Use floats to create a horizontal menu
    • Create a simple multi-column layout with floats and negative margins
  • Table Boxes
    • Special features — e.g. no margins, shared borders, border spacing, content alignment etc.
    • Horizontally stacking blocks — neither floats, nor inline
  • Practice using inline-blocks and table boxes
  • Training Exercises

Conclusion

  • Re-cap what we have covered
  • Identify missing features and skills for more advanced designs
  • References and pointers for further learning

CSS Web Design TrainingCourse Schedule

CSS Web Design TrainingFurther Details

Course Objectives

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

  • Style pages and sites using CSS only
  • Style core page components, e.g.
    • Menus, links, headings, sections, columns, lists, text boxes, tables and forms
  • Style for web, print and email
  • Create simple multi-column layout grids
  • Use CSS to override bad HTML styling from CMSes, etc.
  • Use and appreciate the W3C standard CSS box model
  • Workaround the non-standard IE border box model
  • Understand and use key layout box types, e.g.
    • Block, inline, inline-block, table rows/cells, etc.
  • Understand how browsers use CSS to render page components
  • Understand and override ‘normal flow’

Target Audience

  • Web designers
  • Web developers
  • Beginners with knowledge of HTML Essentials

Training Pre-requisites

  • Successful completion of HTML and XHTML Essentials, or
    • A good understanding of standards-based HTML/XHTML
  • Willingness to unlearn outdated HTML formatting practices
  • Willingness to hand code HTML and CSS
  • Graphic ambition — actual talent is not required!

Training Style

The two key learning goals for this course are to enable students to:

  1. Understand the fundamental concepts which underlie CSS styling
  2. Embed that understanding through meaningful practical work

As such, the course is heavily focused on giving students the opportunity to practice each concept and skill as soon as they have learnt it.

Hands-on practical work and exercises make up roughly half of the lesson time on this day. Hands-on exercises occur at the end of every session, and at intervals during each session.

All the exercises in this course require CSS to be hand-coded in a text editor — an essential skill for fixing and avoiding fundamental web design problems. Although students will typically work on pre-prepared HTML and CSS files — only adding or modifying the bits needed to practice a particular CSS technique.