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

Choosing What to Style

  1. Type, Class and ID Selectors (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

  1. Color: Names, Hex, rgb() and hsl() (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 (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

  1. Fonts and Text: Family, Size, Weight and Spacing (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 (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

  1. Exercise: The 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.