Question regarding id vs. clas-s from HTML/CSS course


#1


https://www.codecademy.com/courses/learn-html-css/lessons/ids-classes-divs/exercises/why-divs


This is not so much a bug report but a question of why a portion of code in this lesson is behaving the way it is. The code below has a clas-s called header and an id called header-text. The lesson implies that elements under the these should inherit the styles coded in the CSS sheet.

Experimenting with this, I changed the header-text id to text-align: left in place of center. However, I noticed that this change only affects h1 but not h2.

As a total beginner, I would like to know why this is the case. Thank you.


  <div class="header">
    <div id="header-text"> <!--Add an id to this div -->
      <h1>Travel Like Never Before</h1>
      <h2>Whether you're looking for adventure or luxury, let us help you plan your perfect getaway.</h2>
    </div>
  </div>.


#2

It should. According to your HTML code snippet, this CSS

#header-text {
  text-align: left;
}

would effect h1 and h2. See here:
https://jsfiddle.net/thadeuszlay/6ggvxgp7/1/

Have you checked that h2 doesn't have another CSS applied to it?


#3

Using just that snippet aligns the text to the left, but if I copy the entire CSS stylesheet from the Code Academy lesson, it only causes the h1 header to be shifted to the left.

That being said, the lesson does have CSS being applied to h1 and h2, but this still raises the question as why the align affects h1 but not h2. I was also under the impression that the text-align would take priority, but I may be wrong since I'm new to coding in general. Does CSS execute in a particular sequence and priority?


h1 {
  color: #FFF;
  font-style: italic;
  font-family: 'Quicksand', sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 60px;
  margin: 0;
}

h2 {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-size: 28px;
  font-weight: 100;
}


#4

Yes. From the top to the bottom. Meaning, what comes last will be applied.


#5

That explains things! Thank you, I guess that was a slightly deeper topic than the course warranted.


#6

You are very welcome! :slight_smile:


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.