Sizing your Images Help

Why do we need to put the . before larger-image ? and do we have to use hyphens to replace spaces in a selector?

<style>
  .larger-image {
    width: 500px;
  }
</style>

. signifies that we’re selecting a class.

In your HTML you might have included larger-image class for some elements.

So if I do this

 h2 {
    font-family: Lobster, monospace;
  }

It’ll change the font for all h2 elements but if I do this,

 .h2 {
    font-family: Lobster, monospace;
  }

h2 becomes a class?

in that case it will change only elements with a class of h2
not recommended to have classes with same name of html elements, it is confusing

What will happen if h2 is a class? Will the h2 elements change fonts or only the elements with the h2 class?

if you select the .h2 class, you change only elements with that class

if you select the h2 you change those elements

it is confusing for humans to read your code if you use element names as class names

1 Like