CSS Colors and Backgrounds
7 lessonsAbout 42 minutesBeginner
This part of the CSS Tutorial runs from CSS Colors through to Layered Backgrounds. There are 7 lessons here, and working through them takes about 42 minutes at a steady pace.
It follows on from CSS Selectors, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1CSS ColorsChoose CSS colors for text, backgrounds, borders, and interface states while preserving contrast, inheritance, and consistent design tokens.
- 2CSS HEX ColorsWrite hexadecimal colors using short, long, and alpha forms, and understand how each pair of digits represents an sRGB channel.
- 3CSS RGB ColorsDefine sRGB colors with modern rgb() syntax, percentages, channel values, and optional alpha transparency.
- 4Modern ColorsUse alpha colors, perceptual color spaces, color mixing, and relative colors while preserving dependable fallbacks. It introduces modern RGB and HSL syntax, perceptual OKLCH palettes, alpha values, color-mix(), relative colors, and fallback strategies.
- 5CSS Background ColorSet background colors on elements while accounting for transparency, inherited text color, contrast, and the area painted by the background.
- 6CSS Background ImageAdd image and gradient backgrounds, control their source and fallback color, and keep decorative images separate from meaningful content.
- 7Layered BackgroundsLayer background images, control their painting area, and use borders that are more than a solid line. You will layer gradients and images, control their size and painting boxes, and create image- or gradient-based border treatments.