Beginner
Complete CSS fundamentals: syntax, selectors, colors, backgrounds, gradients, typography, box model, layout (display, position, float, flexbox, grid), CSS units, custom properties, pseudo-classes, pseudo-elements, transitions, and transforms.
Progress: 0 / 30 topics completed
CSS Foundations
What is CSS?
Understand what CSS is, how it works alongside HTML, and why it is the styling language of the web.
CSS Syntax and Selectors
Learn the anatomy of a CSS rule and the most common selector types: element, class, ID, attribute, and combinators.
How to Apply CSS
Learn the three ways to add CSS to an HTML page: inline styles, internal stylesheets, and external stylesheets.
CSS Cascade and Specificity
Understand how the CSS cascade resolves conflicting rules using specificity, source order, and importance.
CSS Inheritance
Learn how CSS properties are inherited from parent to child elements, and which properties inherit by default.
CSS Colors and Backgrounds
CSS Colors
Master the four ways to express color in CSS: named colors, hex codes, RGB, and HSL.
CSS Backgrounds
Style element backgrounds with colors, images, gradients, and shorthand using the background property family.
CSS Gradients
Create smooth color transitions with linear and radial gradients using CSS gradient functions.
CSS Text and Fonts
CSS Text Styling
Control text appearance with text-align, text-decoration, text-transform, letter-spacing, line-height, and more.
CSS Fonts
Style typography with font-family, font-size, font-weight, font-style, and the font shorthand.
CSS Web Fonts
Load custom fonts into your pages using Google Fonts and the @font-face rule.
CSS Box Model
The CSS Box Model
Understand how every HTML element is a box made of content, padding, border, and margin.
CSS Borders
Style element borders with width, style, color, radius, and the border shorthand.
CSS Margins and Padding
Control spacing inside (padding) and outside (margin) elements, including shorthand notation and margin collapsing.
CSS Width and Height
Control element dimensions with width, height, min/max constraints, and understand how box-sizing affects them.
CSS Layout Basics
CSS Display Property
Control how elements participate in layout with display: block, inline, inline-block, none, flex, and grid.
CSS Position Property
Control element placement with position: static, relative, absolute, fixed, and sticky.
CSS Float and Clear
Learn how floats work for wrapping text around images and how clear prevents unintended wrapping.
CSS Overflow
Control what happens when content is too large for its container using overflow: visible, hidden, scroll, and auto.
CSS Z-index and Stacking
Control which elements appear on top using z-index and understand how stacking contexts work.