ColorCode

So we just looked at a basic CSS statement and it starts with a selector. So what the hell are selectors, again?

What's a Selector?

Say you are Brangelina

and you have a bunch of kids, you wanna dress them for school except only one of them is old enough for school. So first you have to pick the right kid, then dress/style them. That’s what selectors are. Choose which kid you wanna prepare for school. Or since you’re not brangelina, Choose which element you wanna style. It all starts with the selector.

There are different kinds of selectors.

Element Selector

In our example, we used what’s called an element selector because it targets your styles based on the element type, That’s the most basic selector there is. By using the element type. Like a <p> tag:

// Select all my paragraphs
p {
    do: fun-css-stuff
}

The problem with element selectors is that you might not want to turn all your paragraphs blue. What if you had 3 paragraphs and you only want one of them to be blue? The element type is an identifier but in this case it’s too general.

Class Selector

You can select elements based on other kinds of identifiers. Classes and ID. Class is the most common and useful one. Let’s do one ourselves.

Let’s say you have 4 paragraphs and you want to alternate between dark and light. So dark, light, dark, light. In other words you want to reuse a style for multiple elements. In this case you can use a class selector. The way you write these in CSS is:

.dark {
    some-style: for-all-dark-elements;
}

You write the name of your class, this could be whatever you want, just can’t have spaces and some special characters, say "dark", and you put a dot in front of it. Why a dot? It’s just syntax that you have to remember. This tells the browser hey this is a class selector. Then of course you have to add the class to your element in HTML.

<p class="dark">Some stuff</p>

This means “Hey, select all the elements that have a class attribute and the value is "dark".

ID Selector

I’m gonna cover ID selectors too just for the sake of it although we don’t use them much. ID attributes are specific to one element only. If you have a style that you want to apply to only one element, for some reason, you can add an ID to that element, for example: my-blue-paragraph. Then use an ID selector in CSS to style it. ID selectors are just like class selectors, except you put a # in front of the name instead of the .. That becomes the CSS selector for the element with that ID.

#my-blue-paragraph {
    color: blue;
}

Make sure you add the ID to your HTML element:

<p id="my-blue-paragraph">Hello blue world....</p>

The problem with ID is that it’s limited to only one element. Remember IDs can’t be shared between elements. So you can’t reuse my-blue-paragraph for multiple elements.

So those are the 3 basic selectors. Element, Class and ID. Element to style the elements of that type. ID to target only one specific element. And Class to reuse for multiple elements. We’ll be using all of them from now on.

Selectors can get much much more complicated and they will, but now you know the basics.

So next, we’re gonna look at some of our options when it comes to style properties, like color, so far that’s all we’ve used so I’m gonna talk about it in detail. Later, fonts, sizes, background, border, etc...