Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Matt Kalebic
Matt Kalebic
1,247 Points

Questions about HTML classes in an anchor (Creating Structure lesson)

Hi, in the "Creating Structure" lesson of the HTML series there was a line of code that I didn't quite understand:

<p><a href="#" class="btn">Browse Our Cupcakes</a></p>

What does the class="btn" part in the anchor indicate? I'm not sure that I understand classes in general.

Thanks!

3 Answers

Kevin Korte
Kevin Korte
28,135 Points

the class btn would relate to some styling code in the css.

So if I had something like:

<a class="btn btn-blue" href="#">My Button</a>

What this means is I have applied two classes to my anchor link, which I want to act like a button. Why two classes? Well if I wanted to have available a red button, green button, silver button, black button and/orange button, this will make it easier. Stick with me here.

In my css, I might have something like:

.btn {
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #fff;
    text-align: center;
 }

and so on. I'd likely have more elements inside this class, but you get the idea. In the btn-blue class I might have

.btn-blue {
    background-color: blue;
}

I might also have a red button class like so.

.btn-red {
    background-color: red;
}

And so if I wanted one button blue, and one button red, and have them identical in every way besides the color, i can easily do that with my two classes like so.

<a href="#" class="btn btn-blue">Blue Button</a>
<a href="#" class="btn btn-red">Red Button</a>

Does that make more sense?

Matt Kalebic
Matt Kalebic
1,247 Points

Yeah!! Thanks for clearing that up, great explanation.

Matt Kalebic
Matt Kalebic
1,247 Points

Follow up question: what would the difference be between a class versus an id?

Chase Lee
Chase Lee
29,275 Points

Classes you can use as many times as you want in an html page. Whereas and id you can only use once per page.

Kevin Korte
Kevin Korte
28,135 Points

Yes Chase is right. A class can be used multiple times on the same page, however an id should only be used one time on that page.

Chase Lee
Chase Lee
29,275 Points

A class is a way to select specific elements, that are in our markup, in css.

So the reason it has a class is because there are more than one a tags, and if you wanted to select just that one, (because it is different than the other buttons), then you would use a class, (or a pseudo selector which you'll learn about in "CSS Foundations").

Just tell me if you didn't understand anything.

Matt Kalebic
Matt Kalebic
1,247 Points

Ah okay, so just to make sure I understand: it allows us to refer to one specific thing that we want the ability to change? Why is it not done for every a then?

Chase Lee
Chase Lee
29,275 Points

Because if you have gotten to the part where Nick implies css for the markup then you'll see that the Browse Our Cupcakes button is different than the others.

Stone Preston
Stone Preston
42,016 Points

I disagree. "if you wanted to select just that one, (because it is different than the other buttons), then you would use a class." I think that situation is where an ID would be used. Classes are used for styling multiple elements, whereas an id is used for unique ones.

Kevin Korte
Kevin Korte
28,135 Points

It does. However a class can be applied to multiple items on a page. An id can be used to to style something just like a class, however an id should only be used once, on one item, per page.

As you learn more, you'll learn that you will put classes on just about everything. Than, later on, you'll learn about special class types we call pseudo classes that can be used to target elements to give specific styling, without having to give them an extra class.

This accomplishes the same thing, but with less markup; which is the ultimate goal. I'm personally now just getting into using pseudo classes as often as possible. For months I was just sticking classes on everything.

Chase Lee
Chase Lee
29,275 Points

If you've been doing Treehouse for a while then you'll notice that the teachers like to use classes over ids. For an example I'm currently doing the "Media Queries" Stage for "CSS Foundations" and for every element that has a selector they use a class, even all of them are only used ONCE.

Kevin Korte
Kevin Korte
28,135 Points

I use classes myself almost exclusively. Rarely do I use an id. And a lot of times that is because when I was using ID's, I thought that was the only place I was going to want that CSS style; turns out it wasn't, so than I had to back to my css and change the id selector to a class, and change the html mark up as well.

Now I default to using classes. I can't think of any reason not to.

Stone Preston
Stone Preston
42,016 Points

Thats interesting. I use ID's for most of my layout divs (header, footer, wrapper etc) and classes elsewhere. I guess its mainly a preference thing.

Chase Lee
Chase Lee
29,275 Points

Yah, I usually use class just by default. I don't even have any idea why!

Stone Preston
Stone Preston
42,016 Points

the btn class is a css class that was probably defined in the external css file. You should have been able to view the css file in the in-browser text editor by clicking on the files tab at the top of the editor. Basically a class is used to style mutiple elements that you want to have similar properties. ie that button class could be applied to all your buttons on a page and it would style them the same, giving the same color, shape, etc. Classes and id's are pretty similar, except classes are used for multiple elements whereas id's are used for single unique elements.

If I wanted several elements on my page to all have red font color I could make a class in my css file:

.red { color:red;}

Then reference that class in the elements that I wanted to have red font color:

<p class="red">This will have red font color</p>
<h1 class="red">This will also have red font color </h1>

Its very useful when you need to style multiple elements with the same properties.