Layout, responsive design, and modern CSS techniques.
CSS is what makes web pages look good. Learn what it is, how rules and selectors work, the three ways to add it to a page, and write your first styles — explained simply, from zero.
Selectors are how CSS picks which elements a rule applies to. Learn element, class, and id selectors, how to combine them, pseudo-classes like :hover, and how the cascade decides which rule wins.
Color is one of the most impactful parts of CSS. Learn the ways to specify color — names, hex, RGB, HSL — plus transparency, background colors, gradients, and background images.
Every element in CSS is a box with content, padding, border, and margin. Master the box model — and box-sizing — and you'll finally understand how sizing and spacing really work.
Most of a web page is text, so styling it well matters a lot. Learn font-family, font-size, weight, line-height, alignment, and how to use custom web fonts like Google Fonts.
Flexbox is the modern CSS tool for arranging elements in a row or column, spacing them, and aligning them. Learn the container and item properties, with practical layouts like navbars and centered content.
CSS Grid arranges elements in rows AND columns at once — perfect for page layouts and card grids. Learn grid-template-columns, the fr unit, gap, repeat(), and how Grid compares to Flexbox.
Responsive design makes one website look good on phones, tablets, and desktops. Learn media queries, breakpoints, the mobile-first approach, and the flexible units that make layouts adapt.
CSS has a whole family of units for sizing things — px, em, rem, percentages, and viewport units. Learn what each one actually measures, how they relate to each other, and which to reach for in real layouts.
The display property decides how an element behaves in the layout — whether it stacks, sits inline, or becomes a flex or grid container. Learn every common value and exactly when to reach for each one.
The position property decides where an element actually lands on the page. Learn static, relative, absolute, fixed, and sticky positioning, how the top/right/bottom/left offsets work, and what 'positioning context' really means.
z-index decides which overlapping element appears in front. Learn how stacking works, why z-index sometimes does nothing, what a stacking context is, and how to fix the bugs it causes.
When content is bigger than its box, the overflow property decides what happens — clip it, scroll it, or let it spill. Learn visible, hidden, scroll, auto, the x/y axes, and the gotchas that trip everyone up.
The box-sizing property decides whether padding and border count toward an element's width. Learn content-box vs border-box, why border-box is the modern default, and how one line fixes a decades-old CSS surprise.
When two CSS rules target the same element, which one wins? Learn how specificity is calculated, how IDs, classes, and tags stack up, where !important and inline styles fit, and how to write CSS that's easy to override.
Pseudo-classes like :hover, :focus, and :nth-child let you style elements based on their state or position — no JavaScript needed. Learn the syntax, the most useful ones, and real patterns you'll actually ship.
Pseudo-elements like ::before, ::after, ::first-letter, and ::placeholder let you style pieces of an element you never wrote in HTML. Learn the syntax, the content property, and practical patterns you'll actually use.
CSS variables let you store a value once and reuse it everywhere. Learn to declare custom properties, read them with var(), set fallbacks, scope them, and switch a whole theme by changing one value.
Let CSS do the math for you. Learn how calc() mixes units, how min() and max() pick the right value, and how clamp() builds fluid sizes that scale smoothly between a floor and a ceiling.
CSS transitions turn instant style changes into smooth animations. Learn the transition properties, timing functions, what you can and can't animate, and how to build polished hover and state effects.
Learn the CSS transform property to translate, rotate, scale, and skew elements without disturbing the layout. Covers the transform functions, transform-origin, combining transforms, 3D, and performance tips.
Go beyond transitions with CSS @keyframes animations. Learn to define keyframes, control timing and looping, chain multiple animations, and build smooth, performant motion entirely in CSS — no JavaScript required.
Shadows add depth and polish to a page. Learn box-shadow and text-shadow inside out — every value explained, inset shadows, layered shadows, glows, and the patterns behind real cards, buttons, and elevation.
CSS gradients let you blend colors smoothly without any images. Learn linear-gradient, radial-gradient, and conic-gradient, color stops, angles, transparency, and practical patterns like buttons and gradient text.
Long words, URLs, and unbroken strings love to break layouts. Learn how white-space, overflow-wrap, word-break, hyphens, text-overflow ellipsis, and line-clamp keep text tidy inside any box.
Once you know the CSS properties, the next skill is writing CSS that stays clean as a project grows. Learn naming, organization, the cascade, custom properties, and the habits that keep stylesheets sane.