Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Mani Saini
Mani Saini
3,101 Points

Use of class

html code:

<body> <header id="top" class="main-header"> <span class="title">Journey Through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> <img class="arrow" src="img/arrow.svg" alt="Down arrow">

</header>

CSS code :

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; }

.main-header { padding-top: 170px; height: 850px; background: #ffa949 url('../img/mountains.jpg') no-repeat center; background-size: cover;

}

Can someone please explain why teacher has used .main header class when we can all the css coding of .main-header in h1 ? like below :

h1 { font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; padding-top: 170px; height: 850px; background: #ffa949 url('../img/mountains.jpg') no-repeat center; background-size: cover; }

It would do the same thing right?

Hi there,

I did some experimenting myself and found that yes you can do this in the h1 element - I took out the .main-header class but i ended up getting a positive margin from the h1. I needed to give it negative margin to pull the element up for it to work like so:

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; padding-top: 170px; height: 850px; margin-top: -39px; background: #ffa949 url('../img/mountains.jpg') no-repeat center;
background-size: cover;
}

Did you get the same result?

1 Answer

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Mani,

You're correct, you could just style the h1 element in question by selecting h1 { } instead of using a class. However, every other h1 element you added later would take on whatever styles you applied using this method. The teacher is using a class here to specifically target only the h1 element in question, so that any other h1 elements that are added further down the page or at a later date don't automatically take on the listed styles.

Being more specific is usually the better way to go, since it allows you to know exactly what will be affected and prevents the potential headaches that could come as a result of the situation listed above.

Good luck!

Mani Saini
Mani Saini
3,101 Points

thank you for clearing this up !