Basic CSS

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

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 contents — 1 Basic Syntax and Style

  • CSS and HTML
    • Relationship between HTML and CSS
    • Reliable styling depends on valid HTML
    • Understanding HTML structure
  • Scope, standards and browser support
  • Creating and linking in stylesheets
  • Basic CSS syntax
    • Rules and declarations
    • Properties and values
    • Comments
    • Whitespace
  • Setting colours
  • Proportional sizing
  • Basic typography

Course contents — 2 Layout Boxes and Selectors

  • Layout boxes
  • The basic box model
  • Margins vs. padding
    • Margins between boxes
    • Padding within boxes
    • Size and position by container offset
    • Negative margins
  • Borders and edges
    • Borders vs. outlines
    • Setting all 4 sides
    • Setting edges independently
    • Shorthand edge properties
  • Basic selectors
    • Selecting by name — ID vs. class
    • List selectors
    • Descendant selectors
    • Child selectors
    • Adjacent selectors

Course contents — 3 Box Models and Backgrounds

  • Basic box types
    • Block boxes
    • Inline boxes
    • Float boxes
  • Normal flow
  • Box dimensions
  • Margin collapse
  • Image styling
    • Floating
    • Aligning to normal flow
    • Sizing
    • Breathing space
    • Masking
  • Background images
    • Masking
    • Tiling
    • Positioning
    • Sizing

Course contents — 4 Basic Page Layout

  • 4 more box types
    • Table boxes
    • Row boxes
    • Cell boxes
    • Flex boxes
  • Table styling
    • Styling borders
    • Collapsed vs. separate borders
    • Aligning cell content
  • Psuedo-class selectors
  • Menus
    • Links styled as buttons
    • Links as block boxes
    • Menus as lists of links
    • Remove default list styles
    • Horizontal menu
    • CSS-only dropdown menus
  • Flex page layout
    • The flex container
    • Flex items
    • Aligning on the main axis
    • Aligning on the cross axis
    • Visual vs. code stacking order

Dates for Dublin

Dates for Belfast

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.

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