CSS 101

About CSS

CSS is used to change how that structure looks. We simply tell the computer what to change and what to change it to. That's it. With CSS we can change things like colours, fonts, sizes, spacing and positioning.

Loading in CSS

You normally load in CSS via the <head>, like so: <link rel='stylesheet' href="style.css"> href tells the location of the file. For now, we'll just use separate editors in this environment.

Basic CSS selector

It follows this basic pattern:

• CSS Rule → A complete selector-declaration block.
  • Selector → What you want to style.
  • Declaration → A complete property-value pair.
    • Property → What you want to change.
    • Value → What you want to change it to.

A few different types of selectors

Text properties

Basic CSS quiz

Let's put it to the test

You deserve a small break now. Take 5 minutes off.

End of the chapter

Freebie: two new selector types

These will be useful when styling and can help you avoid having to add a class to everything manually.

Remember our table? It worked (I hope), but it didn't look very exciting yet. Let's go and fix that.

Let's finish that table! Next: CSS Selectors