ColorCode

So,... everything we’ve built together so far has been HTML only. And it’s pretty obvious that they are uuuuuuuu-ugly. So I want to talk to you about CSS, which is how we make our HTML pages pretty. But before we can do that we need to learn about selectors. The last thing I’m going to show you in this course which will push us over the edge and get us to CSS.

Every web project you work on will have at least one HTML file. There is no way around it. You will be working with HTML.

Those files will grow in size pretty quickly. You will end up with dozens of elements and you’re going to want to keep track of those elements, you want to know who is who and refer to them for different reasons. One of those reasons is to target them for styling, to change how they look.

What do I mean by target? Let’s say we have a paragraph, and we want it to be red. One way to do is to add style attribute:

<p style="color: red">This paragraph is red</p>

Great. I’m still in HTML. No need for CSS.

What if you have 2 paragraphs? Ok I’ll just add the attribute to both of them I guess.

<p style="color: red">This paragraph is red.</p>
<p style="color: red">Another red paragraph.</p>

Now what if you have 5? Or 10? Or 100? And pretty often you will. You’re gonna add style attributes to all of them? Ok, you’re just copy and paste it a bunch of times. It’s painful but maybe not the worst thing in the world. I can maybe even accept that.

Now, hold on. We made a mistake. It wasn’t supposed to be red. The designer meant orange. What if you want to change them all to orange? You’re going to go to 100 places in your code and change 100 reds to orange? That’s just ridiculous.

This is why we have programs and programming languages, to do our repetitive work for us. Instead what if we could define our styles in one place (color of paragraphs = red), and have that guy go to all of our paragraphs and change the color. Well, we can:

<!-- This is CSS -->
color: red;

...and that’s why we need identifiers. Our code above needs to know who is the target for this color. Using identifiers. One identifier you get for free is the type of tag itself. The fact that we are using semantic HTML is beneficial here, as well as all the other benefits we talked about.

You can say hey, target all the <p> tags, and change them all to red. Here is how:

p {
    color: red;
}

Great. Now we can remove the style attributes from the HTML, and if for some reason we needed to change the color to orange, all we have to do is change it in this one place, and we’re done.

But what if the type of element wasn’t specific enough? What if you just wanted some paragraphs to be red? And some to be orange? Well, then we need to distinguish between them. And that’s where unique identifiers come in handy. A <p> target (or as it’s refered to in CSS: p selector) is not specific enough. There are 2 ways to attach unique identities to elements. class and id. And they are both attributes we can attach to any element. Very simple. They become the identity of your element.

<p class="some-class"></p>
<p id="a-special-id"></p>

The name could be whatever you want, you just can’t have spaces in the name. Letters, numbers, underscore, dash, dot are all valid characters.

So what’s the difference between class and id?

Class

A class is a like category or group. Elements can have multiple classes and multiple elements can have the same class. It’s kind of like classes in school. You can have multiple classes, math, physics, and classes can have multiple people in them. You can add multiple classes to an element by putting space between them. Like this.

<p class="class-1 class-2 class-3 etc"></p>

So, back to our problem with multiple styles for multiple paragraphs. You can have two classes here:

<p class="primary"></p>
<p class="secondary"></p>

Primary class, which we will target in CSS and make it red, and a secondary class, orange.

.primary {
    color: red;
}
.secondary {
    color: orange;
}

Very cool. And again the name of the class is up to you. Just make sure it makes sense. So that’s class.

id

id is unique and can only belong to one element. It can’t be shared. And each element can only have 1 id. It’s like a social security number. It’s yours and only yours. So if you have an element that needs super special treatment you can add an id to it and then target that id to do what you need to do, whether it’s styling, or functionality or whatever else.

<p class="primary"></p>
<p class="primary"></p>
<p class="secondary"></p>
<p class="secondary"></p>
<p id="special-blue"></p>

Remember you can reuse classes on multiple elements but id is unique. And we can go ahead and define the special behavior in our CSS:

.primary {
    color: red;
}
.secondary {
    color: orange;
}
#secondary {
    color: blue;
}

So with that in mind, you know all the HTML basics you need to move on to your second programming language. You are ready to start your CSS journey. You did watched all 10 videos, right? If so, nice job. Let’s move on to the next course: CSS Basics, and I’ll see you there.