Why 2 Class Elements?

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

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

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"

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

class="name1 name2 name3..."

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.