Jump to content
piano0011

h1 tag not styled

Recommended Posts

Hey guys!

I have the following code, which is my main page. My <h1> tag in the title doesn't change when I do the following.. div.title {} but it does when I do this.. div.title h1{}, just like to know why this is so...

 <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>

This is the working CSS code:

div.title h1{
   position: absolute;
   left: 700px;
   top: 700px;
   
   line-height: 100px;

   font-family: 'Aldrich', sans-serif;
   font-family: 'Mr Dafoe', cursive ;
   font-size: 50px;
}

 

Share this post


Link to post
Share on other sites

Hmm...both work for me. Of course, the <h1> tag content looks bigger when using div.title { ... }, but that's because the <h1> tag is using the browser-defined size for <h1> tags.

Share this post


Link to post
Share on other sites

They did for me. I checked the page in Chrome, Firefox and Internet Explorer.

Just be aware that your <h1> tag content may end up overlapping your other content at some point. Basically you are locking the <h1> tag so that it is always 700 pixels from the top and 700px from the left of its "closest positioned ancestor". More information about the CSS position property can be found here:

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.