Introduction to CSS
What is CSS?
Introduces CSS as the language that controls the visual presentation of HTML content.
Covers the three ways to apply CSS: inline styles, internal style blocks, and external stylesheets — and why external is preferred.
Explains how the browser renders a page: the DOM, the CSSOM, and the render tree.
Sets up a working HTML + CSS file pair to use throughout the course.
Start
Selectors and the Cascade
Type, class, id, attribute, and universal selectors.
Combinators: descendant, child (>), adjacent sibling (+), and general sibling (~).
How the cascade resolves conflicts between rules: source order, specificity, and inheritance.
Calculating specificity (0-0-0 notation) and the role of !important.
Start
The Box Model
Every element as a rectangular box: content, padding, border, and margin.
The difference between content-box (default) and border-box sizing — and why border-box is usually preferred.
Margin collapsing: when and why vertical margins merge.
Using browser DevTools to inspect and debug the box model visually.
Start
Colors and Backgrounds
Colour values in CSS: named colours, hex, rgb(), rgba(), hsl(), and the modern oklch().
Background properties: background-color, background-image, background-size (cover/contain), background-position, background-repeat, and background-attachment.
Shorthand background property and layering multiple backgrounds.
Introduction to CSS gradients: linear-gradient and radial-gradient.
Start
Typography
Font properties: font-family, font-size, font-weight, font-style, font-variant, and line-height.
Text properties: color, text-align, text-decoration, text-transform, letter-spacing, word-spacing, and text-indent.
Loading custom fonts with @font-face and Google Fonts.
Responsive typography: using rem and em units instead of fixed pixels.
Start
The Display Property and Normal Flow
How elements flow by default: block, inline, and inline-block.
The display property and its most common values.
Controlling element visibility: visibility vs display: none vs opacity: 0.
The position property: static, relative, absolute, fixed, and sticky — with practical use cases for each.
Start
Flexbox
The Flexible Box Layout model for one-dimensional arrangement of items.
Container properties: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, and gap.
Item properties: flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, and order.
Building real UI patterns with flexbox: navigation bars, card rows, and centred layouts.
Start
CSS Grid
The Grid Layout model for two-dimensional page structure.
Defining a grid: grid-template-columns, grid-template-rows, grid-template-areas, and the fr unit.
Placing items: grid-column, grid-row, and the span keyword.
Implicit grids, auto-fill, auto-fit, and minmax() for flexible column counts.
When to use Grid vs Flexbox — and when to combine them.
Start
Responsive Design and Media Queries
The mobile-first philosophy and why it leads to cleaner CSS.
Writing media queries with @media, min-width, max-width, and orientation.
Responsive units: vw, vh, vmin, vmax, and the clamp() function.
Responsive images in CSS: object-fit and object-position.
Building a page layout that adapts from a single-column mobile view to a multi-column desktop view.
Start
Pseudo-classes and Pseudo-elements
State-based styling with pseudo-classes: :hover, :focus, :active, :visited, :checked, :disabled, and :nth-child().
Structural selectors: :first-child, :last-child, :nth-of-type(), :not(), and :is().
Generated content with pseudo-elements: ::before and ::after.
Styling form controls and lists using ::placeholder, ::marker, and ::selection.
Start
CSS Custom Properties (Variables)
Declaring variables with -- prefix in :root and in local scopes.
Using variables with var() and providing fallback values.
Updating variables with JavaScript for dynamic theming.
Building a light/dark theme toggle using a single set of variables.
Start
Transitions and Animations
Smooth property changes with transition: property, duration, timing-function, and delay.
The @keyframes rule and the animation shorthand: name, duration, timing-function, delay, iteration-count, direction, and fill-mode.
Animating the right properties: transforms and opacity for performance.
Respecting user preferences with prefers-reduced-motion.
Start
CSS Architecture and Best Practices
Writing maintainable CSS: naming conventions, BEM (Block Element Modifier), and utility classes.
Organising stylesheets: reset/normalise, base styles, components, utilities.
Common pitfalls: over-specificity, magic numbers, and the problems with !important.
An introduction to CSS preprocessors (Sass) and CSS-in-JS — knowing they exist without deep-diving yet.
Start
Building a Responsive Website
A capstone project that styles the multi-section HTML page built in the HTML course.
Applies flexbox and grid for layout, custom properties for a colour scheme, media queries for responsiveness, and transitions for interactive polish.
Validates the result across viewport sizes using browser DevTools device emulation.
Prepares learners for the next course: Introduction to JavaScript.
Start