CODEWITHSUNDEEP
css
Madam Zu Zu
Madam Zu Zu

Reputation: 6605

CSS h2 tag with different colors and classes?

i have couple h2 tags, where i want some, to have the same formatting, but to be of a different color

h2
{
    font: bold 20px "TitilliumMedium", "Trebuchet MS", Arial, sans-serif;
    color: #1f1d5b;
    padding-bottom: 5px;
    border-bottom: 1px solid #1f1d5b;
    margin-bottom: 20px;
}

.red h2
{
    color: #551111;
}

the two below look exactly the same? did i do something wrong? should i just use font color tags around the h2?

  <h2>test</h2>
    <h2 class='red'>test2</h2>

Upvotes: 1

Views: 4129

Answers (3)

Eric
Eric

Reputation: 419

You can target only h2 tags with the red class by:

h2.red {
  color: #551111;
}

In your current css definition, you will be targeting the h2 tag inside an element with the class "red", i.e:

<div class="red">
  <h2>Red Text</h2>
</h2>

Upvotes: 1

Volvox
Volvox

Reputation: 1649

Should be h2.red (no space between them) which means 'H2 with class red'

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Write:

.red{color: #551111;}

.red h2 means an element with class red having child element h2.

DEMO here.

Upvotes: 1

Related Questions