EN

Course

CSS

Colors, sizes, and layout — shape how your page looks.

Start learning

What is CSS?

CSS · Lesson 1 / 24

First steps7 lessons

  1. 01What is CSS?
  2. 02Where do you write CSS?<link>style.css
  3. 03How do you write a selector?h1ph1, h2
  4. 04Add color to your text and backgroundcolorbackground-color
  5. 05Choose a fontfont-family
  6. 06Let's change the text sizefont-size
  7. 07Create breathing room with spacingmarginpadding

More control over the look8 lessons

  1. 08Decorate "on target" with classesclass="note".note
  2. 09Decorate text with bold and underlinesfont-weighttext-decorationcolor: inherit
  3. 10Align text to the center or righttext-align
  4. 11Wrap it in a borderborderborder-bottomborder-left
  5. 12Round the corners for a softer lookborder-radius
  6. 13Add a shadow to make it floatbox-shadow
  7. 14Lay an image in the backgroundbackground-imagebackground-sizebackground-repeatbackground-position
  8. 15Manage colors in one place with CSS variables:root--main-colorvar()

Size and the box model3 lessons

  1. 16Setting width and heightwidthheightmax-width32ch
  2. 17Block and inlinedisplay: blockdisplay: inlinedisplay: inline-block
  3. 18Solving the mystery of the shifting widthbox-sizing: border-box

Arranging and positioning6 lessons

  1. 19Line things up with Flexboxdisplay: flexgapjustify-contentalign-items
  2. 20Line things up in a Grid with Griddisplay: gridgrid-template-columns1frgap
  3. 21Layer and pin things with positionposition: fixedposition: sticky
  4. 22Layer things with relative and absoluteposition: relativeposition: absolutez-index
  5. 23Make it look good on phones too: media queries@mediamax-width
  6. 24Let's support dark modeprefers-color-scheme@media