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
Mani Saini
3,101 PointsUse 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?
1 Answer
Daniel Gauthier
15,000 PointsHey 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
3,101 Pointsthank you for clearing this up !
terrellharper
5,372 Pointsterrellharper
5,372 PointsHi 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?