What's my name?

There's power in a name

There are lots of ways you can identify elements in HTML and what you can name you can control via CSS.

The more precisely you can name the thing, the more power you have over it. It's a bit like the "true name" concept you see in religion/magic. If you have an element's true name you can control it completely.

You can learn more about CSS specificity here.

More importantly, check out these links to figure out how to inspect HTML elements using your browser of choice.

Color Me


In this case, we have an H2 element with the ID color-me

IDs are more specific than classes. An element can only have one ID and that ID ought to be unique on the page. You can put as many classes on as many elements per page as you'd like.

In the CSS you'll see IDs referenced with # and the name. Classes will be named with a . in front instead.

The HTML portion is easier to understand as you just write class="whatever" and id="something".

HTML recognizes a bunch of regular color names (like blue) but also uses hexadecimal color codes (#90de13) and rgba codes for more specificity.

Color Me


In this case, we have an H2 element with the ID color-two and the class important.

Clicking the button below will result in both class and ID attempting to control the color of the element. The ID is the one that wins because it's more specific than the class.

Color Me


When you need to you can use !important to override CSS styles even when they would otherwise be more powerful.