The HTML You Need

CSS styles HTML, so this chapter teaches the HTML you need for the whole course: elements, tags and attributes, the page skeleton and the three places CSS can go, the structure elements, and the class and id attributes that CSS hooks onto.

Updated

HTML in a Nutshell

  1. Elements, Tags and Attributes (Novice): A web page is content with labels on it, called tags, and once you can read the labels you know exactly what your CSS will style.
  2. The Page Skeleton, and Three Places CSS Can Go (Novice): Every web page shares the same skeleton, a head for information about the page and a body for what people see, and CSS can go in three places in it, of which a linked stylesheet is the one real sites use.

Structure for Styling

  1. Structure Elements: header, nav, main, section and footer (Novice): Structure elements such as header, nav, main and footer label the big parts of a page by what they are, which helps people using screen readers, search engines, and you when you style each part.
  2. Hooks for CSS: the class and id Attributes (Novice): The class attribute gives a label that many elements can share and the id attribute names one element, and together they are the hooks CSS uses to style exactly the parts you mean.

Exercise: A Pet Adoption Page

  1. Exercise: A Pet Adoption Page (Novice): Write Paws & Whiskers' whole "Meet Biscuit" page from a content sheet, with a skeleton, structure elements, a pet-card class and a linked stylesheet with two rules, and let the tests check every part.