CODEWITHSUNDEEP
htmlcss
user3634897
user3634897

Reputation: 33

Text is not taking on the font style I've designated in css file

This keeps opening in sans-serif. It works everywhere else I've input except here. www.myrecruitdesk.com is the website.

Please help! :)

This is the HTML:

<p class="caption tp-caption sft large_bold_white">Recruitment Services</p>

CSS:

.tp-banner .tp-caption{
font-family:"Cinzel", sans-serif;
}


.tp-banner .tp-caption.large_bold_white{
font-size:50px;
line-height:60px;
text-transform:uppercase;
}

Upvotes: 0

Views: 339

Answers (2)

Rupam Datta
Rupam Datta

Reputation: 1879

enter image description here

Attached is the screenshot of the rendered dom.

Your code:

.tp-banner .tp-caption{
    font-family:"Cinzel", sans-serif;
}

This above style will apply to all .tp-caption elements which are children of .tp-banner element. But since there is no such element in the DOM, this style will not apply.

.tp-banner .tp-caption.large_bold_white{
    font-size:50px;
    line-height:60px;
    text-transform:uppercase;
}

Similarly, the above code will not have any affect since there is no .tp-banner in the DOM.

I'd suggest the following code.

.tp-banner .tp-caption{
    font-family:"Cinzel", sans-serif;
}


.tp-caption.large_bold_white{
    font-size:50px;
    line-height:60px;
    text-transform:uppercase;
}

Upvotes: 0

Chris
Chris

Reputation: 4671

.tp-banner .tp-caption{
    font-family:"Cinzel", sans-serif;
}

This selector (the ".tp-banner .tp-caption" part) means that this particular rule will only affect an element with a class of tp-caption that is a descendant of an element with a class of tp-banner.

I've had a look at your website and found the element in question (the "Recruitment Services" text that is displaying in the default sans-serif font), and although that element has a class of "tp-caption" it is not a descendent of an element with the class "tp-banner". Thus this rule isn't in effect there.

You will probably get the result you're after if you simply change the ".tp-banner .tp-caption" selector to just ".tp-caption".

Upvotes: 1

Related Questions