HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 16: Classes and Id's

In this chapter we are going to learn about CSS classes and id's. What they do, Which one to use, and how they can help you design your elements faster and easier.

CSS Classes

We'll begin with classes. The first thing we need to do is remove the inline styles that we added to our h3 element and our p element from chapter 14. So delete the style="color:red;font-size:20px;" code. And also the style="color:purple;font-size:14px;text-align:left;" code. Now your just left with an <h3> element an a <p> element and we don't have anymore inline style code. So our h3 and p elements now takes the property values from our internal style sheet in the head element. Okay so now that we're done with that we can begin. A class allows you to design one specific element or many elements at the same time. Now as you already know all of our paragraphs have the same style characteristics that we specified in our p rule. But what if we wanted our first and second paragraphs to have a different set of styles? Well that is where classes come in to play. Let's add this code to the opening tags of both our first and second p elements. We are just gonna set up a class that changes the text color. Don't worry about what the paragraph says. This HTML document that we're using is just for learning purposes. When we create our website layout we will add some relevant content.

®So what we just did was give a class with the name gray to both our first and second paragraphs. You want to make your class names relevant. In our case we are just changing the color of the text to gray. So it fits for this example.

Now we want to create a new rule in our internal style sheet for this class. So right after the } closing curly bracket for our p rule add this new code:

.gray{

color: gray;

}

®.gray{ The way we make a rule for a class is by adding a . dot and the class name. Here our class name is gray. Then like normal we add our { opening curly bracket.

®color: gray; And the only thing were doing in this class is setting the font color to gray. Note that you can have as many properties and values that you want in a class.

®} And we close the CSS rule.

When you run your code you'll see that your first two paragraphs now have gray text but they also have properties from our p rule. We used the class here to override the font color. This is a very basic example of how to use a class. Normally you would set up a class with multiple properties and name them something relevant. For example if you made a class rule of:

.maincontent{

background-color: black;

color: blue;

text-align: center;

font-family: arial;

font-size: 15px;

You could use this class inside of the opening tag of as many HTML elements as you want. So classes are reusable. If this was an actual class rule that we created we would use the code class="maincontent" inside of the opening tag of anything that we considered a main content element. And it would have all of these properties and values assigned to it. You can have many classes set up in your CSS rules and apply them all over you website. Also if you were to add this class to a p element it would be fine to add it to an h1 element as well. And a class can have one or many properties.

CSS id's

An id is very similar to a class. You can use an id anywhere that you can use a class. It would have the same effect with your code. But what an id is specifically used for is a unique element that you don't plan on ever changing. For example maybe a heading or a footer. Let's use our footer in this lesson to show you the differences between the code for a class and an id. Add this code to your opening <p> tag that is nested inside of your <footer></footer> element first:

Because we nested a p element inside of our footer element we add the id here. If we put the id in the opening <footer> tag we would have to alter our code a little bit for it to take affect on the p element. We'll learn more about that later. For now we are just learning how to use an id. So we set an id with the name of "footer" in our footers p element. Now up in our internal style sheet right under the .gray rule that we just created add this new rule for our id.

#footer{

background-color: yellow;

}

®#footer{ So for an id rule the selector starts with a # hatch tag instead of a . dot. Then the name of the id and an { opening curly bracket.

®background-color: yellow; We give our rule a background color of yellow to apply to our p element in our footer.

®} And we close the rule like normal.

And now our p element for our footer has a yellow background. It also shares some properties from the p rule that we made previously.

When using a class or an id make sure that it makes sense to use one. You wouldn't want to have a class or an id set up in every single HTML element on your page. That would kind of defeat the purpose. As we continue on with this book you will get a lot more experience with classes and id's. Especially when we start using an external style sheet with our website layout. This chapter was for the purpose of just getting you introduced to the classes and id concepts. There are just a few more things to go over before we start our actual website.

Quiz Chapter 16

1.Where would you want to use a class?

2.Where would you want to use an id?

3.What symbol do you use in your CSS rule for the class selector and the id selector?