CSS Override on PAge not Working

[Historical Forums User]

I am relatively new to CSS manipulation. I have a page
in which in need to have the h1 and h2 text different colors;

FROM CSS FILE;
h1, h3, h4, h5, h6, #entries h3.post-title, #entries h3.post-title a, #entries h3.post-title a:active, .special-heading, #entries h1.page-title, #entries h2.page-title, #portfolio .folio-box h3.folio-title, #portfolio .folio-box h3.folio-title a, #portfolio .folio-box h3.folio-title:active {
font-family: “Oswald”, Arial, sans-serif;
color: #000000;

#filters li a, #content a.button, #slidecaption h2, #related-folio .folio-box h3.folio-title, #related-folio .folio-box h3.folio-title a, #related-folio .folio-box h3.folio-title:active {
font-family: “Oswald”, Arial, sans-serif;
}

This line,put in my HTML web page is ignored and the color #00000 from the CSS file is used;

.h1{font:300 20px Oswald, Helvetica, Sans-serif;padding-bottom:10px;color:#38A6DC;
}

I tried just taking the h1 out fo the CSS file and letting the page define it, but that did not work either. I tried creating another CSS file that loads after the master containing the line above, that did not work either

How can I fix this?

[Beverleyh]

Looks like you’re mistakenly defining the h1 selector in your override CSS as a class: .h1

No dot needed – should just be h1

[Cuttsy27]

To clarify – h1 is a default HTML element and can be targetted in CSS by just using h1 {}. You could then assign an ID or class to the h1 and use either # or . respectively to target the h1 element. To put this into perspective for the code you provided, your h1 element in your HTML would have to look like:

Hello World

for your CSS to work. This would be redundant however, so if you are not adding any classes to your h1 element then you are best to target it just using the h1 {} and not .h1{}.

[Author]

Posts