Basic CSS
1-day Basic W3C Standards-based CSS-only Course — CSB
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:
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 Online courses
Dates for Brussels
- Wednesday 5 Feb 2025 Arts-loi / Kunst wet €545 Book
- Wednesday 12 Mar 2025 Arts-loi / Kunst wet €545 Book
- Wednesday 16 Apr 2025 Arts-loi / Kunst wet €545 Book
Dates for Antwerp
- Wednesday 16 Apr 2025 Antwerp Centraal €545 Book
- Wednesday 21 May 2025 Antwerp Centraal €545 Book
- Wednesday 25 Jun 2025 Antwerp Centraal €545 Book
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:
- Understand the fundamental concepts which underlie CSS styling
- 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.