CSS Fundamentals: Style Modern Web Pages
CSS Fundamentals is a beginner-level course of 6 lessons (about 3 h 5 min), with 18 exercises and 18 quiz questions. Prerequisites: HTML Fundamentals. Exercises run in the browser, with nothing to install.
- Front-end
- Beginner
- 6 lessons
- 3 h 5 min
- 18 exercises
- Exercises run in the browser
The course in brief
This course teaches you how to give your HTML pages a visual identity with CSS. You will understand the cascade and specificity so your styles stop fighting you, master the box model, typography, and CSS variables, then make your interfaces interactive and accessible. The final project is to style an entire showcase website.
What you will be able to do
- Link a stylesheet and target elements precisely with selectors
- Predict and resolve style conflicts using the cascade and specificity
- Build a style guide with colors, relative units, and CSS variables
- Master the box model and box-sizing
- Style interactive states accessibly (focus, hover, forms)
- Position one-off elements (badge, sticky header) without breaking the layout
Syllabus: 6 lessons
- Link a stylesheet to an HTML page
- Write a CSS rule (selector, property, value)
- Target elements by type, class, id, and simple combinators
- 02
Cascade, Specificity, and Inheritance
- Predict which rule applies when several target the same element
- Calculate the specificity of a selector
- Know which properties are inherited and how to control it
- 03
Colors, Units, and Typography
- Express colors in hexadecimal, rgb, hsl, and oklch
- Choose between absolute and relative units (px, rem, em, %, vw)
- Format text and centralize values with CSS variables
ColorsUnits of measurementTypographyCustom properties (CSS variables)
- 04
The Box Model
- Describe the four areas of a box: content, padding, border, margin
- Use box-sizing: border-box to control dimensions
- Distinguish between block, inline, and inline-block display
- 05
Pseudo-classes, Pseudo-elements, and Transitions
- Style interactive states (:hover, :focus-visible, :active, :disabled)
- Target elements by position (:nth-child, :first-child) or content (:has)
- Add decorative content with ::before / ::after and animate with transition
- 06
Positioning and Stacking
- Use position relative, absolute, fixed, and sticky appropriately
- Understand the containing block of a positioned element
- Manage stacking with z-index
Final project
Style a Showcase Website with a Complete Style Guide
Take an HTML site of two or three pages (for example the one from the HTML course) and create its single stylesheet: color and typography style guide as variables, service cards, accessible interactive buttons, a striped pricing table, a sticky header, and a positioned badge.
Deliverables
- A css/style.css file linked to all pages
- A :root block with at least 5 variables (colors, spacing, font)
- Styled components: sticky header, navigation, cards, buttons, form, table
- A short note explaining two specificity conflicts you ran into and how you resolved them
Assessment criteria
- No inline styles or unjustified !important; class-based styles
- Global box-sizing: border-box and controlled dimensions
- Text sizes in rem, unitless line-height, sufficient contrast (4.5:1)
- :hover and :focus-visible states present on all interactive elements
- Positioning used only for one-off elements
- prefers-reduced-motion respected for transitions
Frequently asked questions
Do I need to know HTML before learning CSS?
Yes, the basics are enough: CSS styles HTML elements. The HTML Fundamentals course is the recommended prerequisite.
Does this course cover Flexbox and Grid?
This course lays down the essential foundations (selectors, cascade, boxes, positioning). Flexbox, Grid, and responsive design are covered in the next course, Responsive Layout.
Is the CSS taught up to date?
Yes: modern color syntax and oklch, CSS variables, logical properties, :has(), :focus-visible and :user-invalid, all supported by current browsers.
Why isn't my CSS style being applied?
Most often because of specificity, a syntax error, or a selector that doesn't target the element. The lesson on the cascade shows how to diagnose it with the browser inspector.
This course, told for your job
Say what you want to be able to do: “CSS Fundamentals” takes its place in your path, with examples from your field. The concepts stay those of the course.