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

CSS

Posted by Jeremy Coleman
Jeremy Coleman
5,449 Points

Adding classes to HTML vs CSS

What would be better, adding classes to HTML or CSS? for example if I am going to give the same border to multiple div elements, should I add the class to HTML or CSS?

Example .. 

<div class="border"></div>
<div class="border"></div>
<div class="border"></div>
<div class="border"></div>
<div class="border"></div>

or would this be better?

div.1,
div.2,
div.3,
div.4,
div.5 {
  border: 1px solid #000;
}

3 Answers

Gavin Ralston
Gavin Ralston
28,770 Points

The first option. :)

Updating your css every time you change the HTML when you're planning on applying the exact same styling is a whole lot of work.

Giving your elements a class for styling is necessary. ("This element is a border") Giving your styles a lot of extraneous information is really quite susceptible to errors, and creates a whole lot more upkeep. ("Okay, I added another item, it's also a border. Wait, and that one too! And that... no no not that one!")

Jeremy Coleman
Jeremy Coleman
5,449 Points
Jeremy Coleman
Jeremy Coleman
5,449 Points

Alright, thank you, I see your point I just wasn't sure since they could be easily mistaken to give you the same end result.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

you would create a class selector in this case in my opinion. Classes are for is multiple elements require the same styling. Well that is CSS Classes in a nut shell anyway.

If you were to use the div option as shown in your question, every time you wish to have that border on an element you create you have to go to the css find the declaration and add the correct selector which without using an ID you could end up with a pretty long one.

Create the class, add the style give those style to the elements that need it.

Hope this helps Craig

Jeremy Coleman
Jeremy Coleman
5,449 Points

Yes it does, thank you!