CSS
Layout, cascade and rendering in the browser.
The course
Open the courseStart at 01. The first lesson names the types. The next one builds an object. Each sample is on the page.
-
Skill
Basics
The types, explained, then an object you can name and call.
-
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
-
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
-
01
CSS from zero: a value has a type
Start here
-
Practice
Tips
A rule that prevents a bug, then a program that uses the object.
-
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
-
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
-
03
CSS from zero: the unit is part of the length
-
Further
A whole program
One more idea, then a program that puts the pieces together.
-
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
-
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
-
05
CSS from zero: a custom property is a named value
Articles
RSSShorter articles for this language land here. The path above is the place to start.