Pebellslearn by building
RoadmapsMatrixCoursesSandboxSign in

Course details

CSS

Learn how CSS attaches to HTML, how a rule is built, how selectors pick exactly the elements you mean, and how the cascade settles conflicts. You finish by setting type that is comfortable to read.

Ready to learn6 sections · 24 lessons
Start learning

Course curriculum

Introduction3 lessons

Meet the café page you will style for the whole course, see why CSS can only style what HTML has named, and learn how the three frontend languages divide the work.

  1. HTML — The Structure CSS Styles12 min
  2. CSS — The Presentation Layer12 min
  3. JavaScript and the Frontend12 min
CSS Basics4 lessons

Attach styles inline, inside a style element and from an external file, learn when each one fits, and then predict which declaration wins when several target the same element.

  1. Inline CSS12 min
  2. Internal CSS12 min
  3. External CSS12 min
  4. Cascading Order15 min
Rules3 lessons

Learn the shape of every CSS rule, the kinds of values properties accept, why the browser silently skips mistakes, and how to leave comments that help the next reader.

  1. Selectors and Declarations12 min
  2. Properties and Values12 min
  3. Comments12 min
Simple Selectors5 lessons

Select by element type, class, id and attribute, group selectors with commas, and learn how much weight each kind carries when rules compete.

  1. Element and Universal Selectors12 min
  2. Class Selectors12 min
  3. Id Selectors12 min
  4. Grouping Selectors12 min
  5. Attribute Selectors12 min
Combinator Selectors4 lessons

Combine selectors to reach elements through their family relationships: anywhere inside, directly inside, right after and anywhere after.

  1. The Descendant Combinator12 min
  2. The Child Combinator12 min
  3. The Next-Sibling Combinator12 min
  4. The Subsequent-Sibling Combinator15 min
Fonts and Text Styling5 lessons

Choose font stacks and web fonts, size text in units that respect the reader, use weights, styles and the font shorthand safely, then control colour, alignment, line height and spacing.

  1. Font Families and Web Fonts12 min
  2. Font Size and Weight12 min
  3. Font Style, Variant and the Shorthand12 min
  4. Colour, Alignment and Direction12 min
  5. Line Height and Text Spacing15 min