0

Our company website wants me to redo one of our pages that is currently using h3 and h4 tags with h1 and h2 tags, respectively. They want to maintain all the styling, and want to make the change for SEO purposes. I have tried to specify a class for the h1's on the page as

<h1 class="specialh1">

but this is being overridden by some css that applies to all h1's that displays the header as a background image. Can I force the h1 to only use the class's css?

John Ruggiero
  • 61
  • 3
  • 9

2 Answers2

2

Add !important to all your CSS rules for the class specialh1. For example...

.specialh1 {
font-weight: bold !important;
}
Michael
  • 7,016
  • 2
  • 28
  • 41
  • Right, and include the properties that are being overridden, like background-image: none !important, and text-indent: -9990px !important. – Rob R Jun 12 '13 at 18:29
  • @RobR Precisely whatever he needs to "reset" plus any possible additions. – Michael Jun 12 '13 at 18:43
-1

You can assign another class to your h1 tag that you don't want script to override and run your own script once page load to remove all class for those h1 with class 'specialh1' in them. This is easier if you are using Jquery

$('.specialh1').removeClass().addClass('specialh1');
Yogee
  • 1,412
  • 14
  • 22
  • This is so over complicated for the problem I am amazed. – Michael Jun 12 '13 at 17:47
  • 1
    And 30kb+ for jQuery itself. Congratulations! – cimmanon Jun 12 '13 at 18:09
  • @cimmanon: I am just saying this would be eaier with JQuery. If his project is already using Jquery, what's problem? – Yogee Jun 12 '13 at 18:16
  • @cimmanon: Just googled, it is not rocket science to do the same without jquery: http://stackoverflow.com/questions/9427311/how-to-get-all-elements-by-class-name – Yogee Jun 12 '13 at 18:20
  • 1
    The problem here is that you think the most efficient way to solve this problem is with JavaScript (library or none). It's not. There's not enough information here to determine the correct solution. – cimmanon Jun 12 '13 at 18:26