Why 2 Class Elements?

HTML-CSS
#1

Basic CSS: Add Borders Around Your Elements

https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-borders-around-your-elements

The lesson calls for the creation of a second class element for the image so that a border can be placed around the image. But since the image already has a class identifier (smaller-image) why can’t we just use this as - .smaller-image - in the style section and specify our border attributes under it? I thought that when it comes to coding, less is better, so why introduce 2 class identifiers when one would do?

1 Like
#2

classes can be used on multiple elements, so it’s often that a single element has more than one class

#3

Basic CSS: Add Rounded Corners with border-radius


So in this case,
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
is this -
img class="smaller-image thick-green-border"
equivalent to this ?
img class=“smaller-image” class=" thick-green-border"
#4

Logically yes, but that’s not a valid syntax. What’s valid is:

class="name1 name2 name3..."
#5

Hi again!

For this particular case, you could just apply the border styles to the smaller image class and it would still technically work without having to create a thick-green-border class. For the lesson, you should create the separate class but it would also work if you didn’t

 .smaller-image {
    width: 100px;
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }

Screen Shot 2020-12-24 at 8.34.21 AM

However, the point of this lesson is to teach you how to combine classes. When you are building more complex projects with css it will come in handy to combine classes.

#6