Learn CSS from Scratch
Learn how to style web pages: selectors, the box model, typography, Flexbox, Grid, responsive design, transitions, animations and CSS variables, with live examples you can edit.
What you will learn
- Style any HTML page with confidence
- Lay out pages with Flexbox and Grid
- Make designs work on phones and desktops
- Add smooth transitions and animations
Course syllabus
- What is CSS? Ways to Add CSSLearn what CSS is, how it styles HTML, and the three ways to add CSS: inline, internal and external stylesheets,…
- CSS Selectors and SpecificityMaster CSS selectors: element, class, id, descendant, attribute and pseudo-class selectors, and understand how specificity decides which rule wins.
- Colors, Units and the Box ModelUnderstand CSS colours, units such as px, em, rem and percent, and the box model: content, padding, border and margin,…
- Typography and BackgroundsStyle text and backgrounds with CSS: font-family, font-size, line-height, letter-spacing, gradients and background images.
- Display, Position and Z-indexLearn how CSS display, position (static, relative, absolute, fixed, sticky) and z-index control the layout and stacking of elements.
- CSS FlexboxLearn CSS Flexbox with examples: flex containers, direction, justify-content, align-items, wrap, gap and building responsive navigation bars.
- CSS Grid LayoutLearn CSS Grid: rows and columns, fr units, grid-template-areas, gap and auto-fit for building responsive page layouts.
- Responsive Design and Media QueriesMake websites work on phones, tablets and desktops using the viewport meta tag, fluid units, media queries and a mobile-first…
- Transitions, Animations and CSS VariablesAdd smooth hover effects with transitions, create keyframe animations, and keep your styles consistent with CSS custom properties.