CODEWITHSUNDEEP
htmlcssdom
Djaber Meghar
Djaber Meghar

Reputation: 37

Why I can't change the font size of last h3 only

I'm making a web page containing multiple titles. I have a problem and that is I can't change the font size of h3 (last one) and if I did the whole font sizes of other titles changes too. I want to know why and how to solve this.

This the code

.join_us {
  width: 100%;
  margin-top: 50px;
}

.join_us h3 {
  font-size: 20px;
  font-family: 'sans-serif';
  font-weight: bold;
  text-align: center;
  color: #2D2D2D;
}

.join_us .create_account_container {
  width: 400px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  background-color: #0EBA00;
  margin-top: 40px;
  text-align: center;
}

.join_us .create_account_container a {
  text-decoration: none;
  line-height: 60px;
  font-size: 25px;
  font-family: 'sans-serif';
  font-weight: bold;
  text-align: center;
  color: #FFF;
}

.invite_for_use_section h1 {
  font-size: 28px;
  font-family: 'sans-serif';
  color: #000;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
}

.invite_for_use_section h3 {
  font-size: 13px;
  font-family: 'sans-serif';
  font-weight: bold;
  text-align: center;
  color: #2D2D2D;
}
<div class="join_us">
  <h3>JOIN OVER 10,000 SMART AFFILIATE MARKETERS! GET STARTED NOW...</h3>
  <div class="create_account_container">
    <a href="">CREATE MY ACCOUNT</a>
  </div>
</div>

<div class="invite_for_use_section">
  <h1>
    Use Our Secret Tool and Boost Your Commissions Up to 5X More While Cutting Your Workload To Shreds!
  </h1>
  <br>

  <h3>
    Over 10,000 (and growing) People Can't Be Wrong!
  </h3>
</div>

The page also contain header which contain h1 titles didn't include it because I think it has no relation to this problem.

Upvotes: 1

Views: 1987

Answers (3)

Djaber Meghar
Djaber Meghar

Reputation: 37

I've fixed it, thnx guys, i changed the h3 to h5 and h4 ,i think css doesn't allow you to make the font size of an h3 bigger than the font of h1...

Upvotes: 0

adibak
adibak

Reputation: 141

if you want to change the font size of a specific element, try using id's. You can assign an id to an object, like this:

<h3 id = "over10">
    Over 10,000 (and growing) People Can't Be Wrong!
  </h3>

And to apply styling to that object, in your CSS, you can simply reference that object with a hashtag (#) with its id name, like this:

#over10 {
  font-size: 33px;
  font-family: 'Arial';
  font-weight: bold;
  text-align: center;
  color: #2D2D2D;
}

Upvotes: 1

Aaron Cloud
Aaron Cloud

Reputation: 315

I plugged it into code pen and had no problems changing the font size. The only thing I can think of is that H3 is setting a font size which might be overriding the CSS. Trying using a div instead.

Upvotes: 0

Related Questions