CSS

Most projects have coding standards. They make code look the same in every file, making it predictable, and easy to read.

We'll use some basic coding standards for HTML, CSS, and JS.

HTML

Indenting

A standard we'll follow is indentation by four spaces. When a tag is inside another tag, use indenting to make containership clear. For example:

<div id="output-container" class="hide-on-load">
    <p>I have a bracelet. It says:</p>
    <p>What would <span id="character">Scooby Doo</span>?</p>

The story do far

Responding to hover

All the CSS we've done is static. Nothing the user does changes the way it looks, apart from resizing the browser.

CSS can respond to some user actions. We'll only talk about one of them: hover. When the user puts the mouse cursor on an HTML element, you can change the way it looks.

Here's some code we've seen before, with one addition:

bc.

The story so far

Let's change the team score example.