CSS Fundamentals

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

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 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