My css changes doesn't show H1 and h2 problems-CodePudding

i'm learning about front-end and i've been through a problem the whole day. i'm trying to make the text transform to uppercase, change the font size, position and so on but the changes doesn't show on the web page i tried using the .h1{} on the css page but still no changes. i made sure i save my project but sitll nothing changes.

this is my html code


 <section  id="home">
    <div >
    <div class ="section-vid2">
      <video autoplay loop muted src="http://luxtopia.org/wp-content/uploads/2022/02/GIF.mp4" ;> </source>
    </div>
    <div >
      <h1 ><br> join the </h1>
      <p>  welcome to my web page </p>
    </div>
   
  </div>
</section>

CSS

.intro .col-4 .h1{
  display: block;
  font-family: 'Varela Round', sans-serif;
  font-size: 34px;
  text-transform: uppercase;

}

CodePudding user response：

a selector that starts with a .(period) is selecting from the dom based on class

a selector that starts with a # is selecting from the dom based on element id

a selector that isn't prefaced with anything selects by html tag i.e. h1

try .intro .cold-4 h1{}

CodePudding user response：

You should just grab the ID of what you want change, so you would want to simply grab "text-center" & you will be able to change font size/position & whatever else as you please. Try this

.text-center{
    display: block;
    font-family: 'Varela Round', sans-serif;
    font-size: 34px;
    text-transform: uppercase;
}

If this doesn't work you need to make sure your style sheet is linked in the head element.