Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Matt Kalebic
1,247 PointsQuestions 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
28,149 Pointsthe 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?
Chase Lee
29,275 PointsA 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
1,247 PointsAh 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
29,275 PointsBecause 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
42,016 PointsI 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
28,149 PointsIt 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
29,275 PointsIf 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
28,149 PointsI 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
42,016 PointsThats 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
29,275 PointsYah, I usually use class just by default. I don't even have any idea why!
Stone Preston
42,016 Pointsthe 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.
Matt Kalebic
1,247 PointsMatt Kalebic
1,247 PointsYeah!! Thanks for clearing that up, great explanation.
Matt Kalebic
1,247 PointsMatt Kalebic
1,247 PointsFollow up question: what would the difference be between a class versus an id?
Chase Lee
29,275 PointsChase Lee
29,275 PointsClasses 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
28,149 PointsKevin Korte
28,149 PointsYes 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.
Matt Kalebic
1,247 PointsMatt Kalebic
1,247 PointsOkay thanks so much!