H1 tag not styled with this code

HTML-CSS
1

Hey guys!

I have the following page, which is the main page and when I do a div.title {}, it doesn’t style the title h1 but it only works when I do the following: div.title h1 {}. I am just wondering why it does this?


 <img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101 logo"/>
    <div class="music"><i class="fas fa-music fa-8x"></i></div>

    <div class="sharp"><p>&#9839</p></div>
    <div class="natural"><p>&#9838</p></div>
    <div class="flat"><p>&#9837</p></div>
    

    <div class="main-wrapper">
      <div class="title">
        <br></br>

       <h1>Welcome to PianoCourse101</h1>
     </div>
       <br></br>
    </div>

    <div class="main-wrapper">
      <div class="first">
       <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! It doesn't matter if your child has no music foundation because there are lessons suitable for beginners and advanced students! Based on the "Bastien Piano Basics series", your child will be able to learn the basic hand positions, posture, finger numbers and letter names!<br></br> There are four levels in the "Bastien Piano Basics" series, beginning with the primer level, which is suitable for beginners. Once your child has completed the primer level, your child will be able to progress to Level 1, follow by Level 2 and Level 3.<br></br>Currently, PianoCourse101 lessons are mainly for children but we also encourage if you are an adult and also wish to learn how to play the piano to join us! In due course, there will also be lessons for adults!
     </div>
    </div>
    
    <div class="form">
    <form class="signup-form" action="newsletters.php" method="POST">
      <div class="newsletters">
       <label><center>Enter your E-mail Address</center></label>
     </div>
       <br></br>
       <center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
       <br></br>
       <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
       <br></br>

    </form>
    </div>
2

Hi. Well it’s because how CSS selectors work :sweat_smile:

When you write div.title it targets only your div element. But when you write div.title h1, it targets directly the h1 in your div.title element.

Now of course, some child elements can inherit their parents properties but it depends on which properties.

3

Additionally, since “title” is a class, you’d really just need .title rather than div.title. This will select any element to which you have applied the class “title”. So really, you have two options:

  1. Select your this specific h1 element by using the CSS selector div h1
  2. Select anything with the class “title” (in this case, your h1 element) by using the CSS selector .title

Side note - it took me a while to realize this myself, but you don’t need to close your <br> tags. See this reference for an example.

(edit) Plus I think it’s best practice not to use <br> just for spacing. Use you can use CSS margins to accomplish that instead. There is a note about that on the link I included above.

4

Thanks! I am still confused because i thought that you would need to have div.title as it is a div class?

5

No, you don’t need to prefix class names with the tag (and shouldn’t do so unless you can’t avoid it).

div.foo selects a div with the class foo, .foo selects any element with the class foo. As a rule you shouldn’t ever need to do div.foo - like if you have different titles, you would have .main-title and .subtitle not h1.title and h2.title

Just as a rule: c lasses are non-specific and don’t care about how the html is structured, always prefer writing more classes rather than using tag names. When the browser applies CSS, it uses specificity to calculate what should and shouldn’t apply: so like div > h1.title will override h1.title which will override .title. You want to avoid this as much as possible, and you can do that by only using classes for everything and avoiding nesting as much as you can.

6

there are multiple ways to write CSS selectors that are valid.
One way for classes is simply:

.class-name

Another way is to be more specific and say which parent element your class is under

div .class-name

This would only select elements of class ‘class-name’ if their parent is a div

There are also ways to select siblings and descendants of elements.

div.class-name is not a valid method though.

7

Thanks but still a bit confused here… Someone mentioned that div.title {} works on their browser but for some reason, it doesn’t work on mine. I guess maybe the problem could be on the localhost? I should try a life server

8 
<div class="title">
  <br></br>
  <h1>Welcome to PianoCourse101</h1>
</div>

In this code, even if you call "div.title" or ".title" it is going to style the "<div>" which is the parent of "h1"

If you want to style the "h1", then you must call "div.title h1 { }" or ".title h1 { }", becoz thats how the CSS selectors play

If someone has told you it worked for them, maybe they mentioned something or you got it wrong about what they said.

9

Thanks but I am not sure why then in my header.php, the following h2 tag is not styled up. I guess it should be working too with the same rule:

while ($row = mysqli_fetch_assoc($result)) {

                $sql2 = "SELECT * FROM memberships WHERE user_uid = ?;";
                
                $stmt = mysqli_stmt_init($conn);

                if (!mysqli_stmt_prepare($stmt, $sql2)) {
                  header("Location: header.php?index=notexists");
                   exit();
                } else {
                    mysqli_stmt_bind_param($stmt, "s", $_SESSION['u_uid']);
                    mysqli_stmt_execute($stmt);

                    $result = mysqli_stmt_get_result($stmt);
                    while($row2 = mysqli_fetch_assoc($result)) {

               echo '<div class="heading">';
               echo '<br></br>';
               echo '<br></br>';
               echo '<h1>Welcome to PianoCourse101: '.$row['user_first'].' '.$row['user_last'].'!</h1>';
              
               echo '<br></br>';
               echo '<h2>Below are your general information. Please feel free to update them in the update section</h2>';
               echo '<br></br>';
               echo '<h2>Email Address: '.$row['user_email'].'</h2>';
               echo '<br></br>';
               echo '<h2>User Permission: '.$row['user_permission'].'</h2>';
               echo '<br></br>';
               echo '<h2>Lesson Subscriptionplan: '.$row2['subscriptionplan'].', '.$row2['subscriptionplan2'].', '.$row2['subscriptionplan3'].'</h2>';
               echo '<br></br>';
               echo '<h2>Date of Subscription: '.$row['datejoined'].'</h2>';
               echo '<br></br>';
               echo '<h2>Last Login: '.$row['user_session'].'</h2>';
               echo '<br></br>';
               echo '</div>';

This is my CSS code:

div.heading h2{
    text-align: center;
}
10

CSS is evaluated by the browser, it makes no difference how the page it is attached to is being run. If it isn’t working, then either something else in the CSS is overriding that declaration (ie something else has higher specificity) or there isn’t a div with the class title on the page; the CSS is totally valid

Open the browser console, and select the h2 element in question: the console will have a panel that shows what CSS rules are being applied to that element.

This is incorrect unless you only want to style the h1 and there are other elements. Applying rules to the element with the .title class will apply rules to all children, including the h1; in this case he does, but writing CSS like that tends to cause difficult-to-debug problems

This is also incorrect

This is not how you define <br> elements: they are self-closing so you just need to write <br> (or <br />, but HTML does not require the closing slash). Also why, if you are using a templating language (PHP), are you echoing strings of HTML? PHP is literally built to render HTML

11

well, @piano0011 was only concerned with "h1"

And as you said, calling ".title" doesn’t mean it affects the child elements, it means it causes a change to that specific div and as in his latest case, he wants h2 to be centered, and he can achieve that by using
.title h2 { text-align: center; } which makes the whole div to center align

If you want a specific style inside the parent then you do have to call .title h2 { }, if not this what way do you suggest ?

Centering elements depends on whether it is a block element or not, in the above case the div element is a default block element so it makes the entire content to align center, and if you want specific child to align to the right or left, then you do have to specify the child element pointing from the parent element like i said, or you can have a separate class for the child like
<h2 class="subtitle"></h2>
and call it directly like .subtitle

I would suggest adding class for all the elements since classes are reusable

12

It should work, i just ran with your sample code, in my localhost, ofcourse it shows errors but HTML and CSS would work and the h2 were is centering

If you don’t need all the h2 to be centered, then you have to use classes separately for each h2 elements

Screenshot%20from%202018-07-19%2017-00-08
Screenshot%20from%202018-07-19%2017-00-081366×768 77.1 KB

13

This is weird as it it is still showing up as the following… I even tried to add the !important but it is not working in my chrome or IE browsers… Usually, one of them should work:

image
image1429×989 56.1 KB

14

Thanks for the assistance here guys… really appreciate it! I just found out that I have another h2 tag somewhere with the !important and that must have taken preference over the other h2 tag… so, it does work now… You always learn new things everyday I suppose…

15

Good @piano0011

h2 {
 color: red;
}
h2 {
 color: blue;
}

And yes if you have two styles for the same element like the above code, then the last styling takes the preference over the above stylings , therefore you will only have h2 with color blue

And if we add !important to it, then it overtakes every styling of that element