Basic CSS

CSS Web Design Training Course Overview

This hands-on CSS training course provides a basic introduction to Cascading Stylesheets for complete beginners. It is typically combined with one or both of these two Web Design courses:

1. Basic HTML
2. CSS Page Layout

All three courses together provide the foundation skills for practising more advanced aspects of Web Design.

Complete beginners who have never done any Web Design before, will need to take the Basic HTML course, before taking this one. But Completing both Basic HTML and Basic CSS is exactly the same as completing our 2-day Web Design Essentials course.

On the other hand, students who have previously taken Basic HTML, or have good on-the-job knowledge of HTML5 standards and semantics, will use this course as a precursor to our CSS Page Layout course. Completing both Basic HTML and Basic CSS is exactly the same as completing our 2-day CSS Fundamentals course.

Please note: that on the basis of this course alone, you will only be able to create very simple CSS-based page designs. For a wider range of design options you will also need the follow-on 1-day course in CSS Positioning and Full Page Layout.

To master more advanced Web Design techniques You will need to consider further courses in Flexbox, Reponsive Web Design and, possibly, JavaScript programing.

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
• 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
• 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 Basic HTML or
  • A good understanding of standards-based HTML5 syntax
  • A good understanding of HTML5 semantics
• 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.