CSS

Layout, cascade and rendering in the browser.

The course

Open the course

Start at 01. The first lesson names the types. The next one builds an object. Each sample is on the page.

  1. Skill

    Basics

    The types, explained, then an object you can name and call.

    1. 01 CSS from zero: a value has a type Start here

      A CSS value has a type. A color is not a length, and a length is not a bare number. This rule sets a color, a length, and a number.

      Adds The types this course uses

      2 min read

    2. 02 CSS from zero: a class groups the declarations

      A class is the reusable group of declarations. .price sets the color, the padding, and the opacity. You put the class on each price that should look the same.

      Adds An object you can name and call

      Builds on 12 min read

  2. Practice

    Tips

    A rule that prevents a bug, then a program that uses the object.

    1. 03 CSS from zero: the unit is part of the length

      16px is a length that ignores the reader's font size. 1rem follows the root font size. Use rem for type and for padding that should grow with the text.

      Adds A tip that prevents a bug

      Builds on 1 through 22 min read

    2. 04 CSS from zero: the later rule can win

      Two rules with the same selector set color. The later one wins. This stylesheet ends on #0b0b0c, so that is the color of the price.

      Adds A program that uses the object

      Builds on 1 through 32 min read

  3. Further

    A whole program

    One more idea, then a program that puts the pieces together.

    1. 05 CSS from zero: a custom property is a named value

      A custom property stores a value under a name you choose. --ink holds a color. color: var(--ink) uses it. Change the name once and the users follow.

      Adds A program that puts the pieces together

      Builds on 1 through 42 min read

    2. 06 CSS from zero: a class can name what is inside

      A descendant selector styles an element inside the class. .price strong sets the weight of the price without restyling every strong on the page.

      Adds A program that puts the pieces together

      Builds on 1 through 52 min read

Articles

RSS

Shorter articles for this language land here. The path above is the place to start.