# Selectors, Color and Text

Choose exactly what to style with type, class and id selectors, give a page its colors with names, hex codes, rgb() and hsl(), and make text look good with fonts, sizes, weights, line height and web fonts.

Updated: November 10, 2026

## [Choosing What to Style](https://www.ask-codey.com/courses/css-in-depth/topics/css-choosing-what-to-style)

1. [Type, Class and ID Selectors](https://www.ask-codey.com/lessons/css-selectors-type-class-id) (Novice): A selector tells the browser which elements a rule styles (every element of one kind, every element with a class, or the one element with an id), and commas let one rule style several selections at once.

## [Color and Pictures](https://www.ask-codey.com/courses/css-in-depth/topics/css-color-and-pictures)

1. [Color: Names, Hex, rgb() and hsl()](https://www.ask-codey.com/lessons/css-color-values) (Novice): CSS colors text with the color property and fills the area behind it with background-color, and it writes each color as a name, a hex code, rgb() or hsl(), with an alpha value when the color should be see-through.
2. [Pictures from CSS: Background Images](https://www.ask-codey.com/lessons/css-background-images) (Novice): background-image puts a decorative picture behind an element's content, on top of its background-color, and background-repeat, background-size and background-position decide whether it tiles, how big it is and where it sits.

## [Text and Fonts](https://www.ask-codey.com/courses/css-in-depth/topics/css-text-and-fonts)

1. [Fonts and Text: Family, Size, Weight and Spacing](https://www.ask-codey.com/lessons/css-fonts-and-text) (Novice): A handful of text properties (font-family with fallbacks, font-size, font-weight, font-style, line-height, text-align, text-transform, letter-spacing and text-decoration) turn plain words into text people can read at a glance.
2. [Web Fonts: Using Any Font You Like](https://www.ask-codey.com/lessons/css-web-fonts) (Apprentice): A web font is a font file the browser downloads with your page, loaded with a Google Fonts link or your own @font-face rule, so every visitor sees the font you chose even when their device doesn't have it.

## [Exercise: The Taco Truck Menu](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-taco-truck-menu)

1. [Exercise: The Taco Truck Menu](https://www.ask-codey.com/lessons/exercise-css-taco-truck-menu) (Novice): Give Sol Taco Truck's ready-made menu page its look (a color palette, a web font for the headings, readable body text, prices and labels that stand out, and a chalkboard behind the truck's name), and let the tests check each step.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-selectors-color-and-text