Overriding CSS in wordpress using class

Question

I try to override the <h1> style in WordPress using class but failed.

.block-h1  { font-size:13px; font-size:1.1em; line-height:13px; position:absolute; top:13%; left:6%; z-index:99; color: #E35094; !important;}

There is a tag <h1 class="block-h1">Hello</h1> in page, all style of block-h1 are removed when loading by WordPress and style is kept as the .post-content h1.

I do use the !important but not work.

I don't recommend using !important but the way you're using it is incorrect. It needs to be after each rule. For example, color: #E35094 !important; — j08691
– j08691, Commented Sep 19, 2014 at 17:33
you have a typo, just delete the semicolon before !important . Then again, @j08691 is right, try to avoid !important and use more specific classes — Devin
– Devin, Commented Sep 19, 2014 at 18:11
j08691 and Fabio, thanks for your comment, I wrongly declare above style in the header, I declare them in the footer and all work. — Kelvin
– Kelvin, Commented Sep 20, 2014 at 1:05

Diodeus - James MacFarlane · Accepted Answer · 2014-09-19 17:35:04Z

1

Never use !important, it's a blunt tool and makes it difficult to override the new declaration. Make your declaration more specific.

Use a class of:

h1.block-h1 { ... }

h1.block-h1 is more specific than .block-h1 alone.

See: http://css-tricks.com/specifics-on-css-specificity/

answered Sep 19, 2014 at 17:35

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

emmanuel · Accepted Answer · 2014-09-19 19:36:58Z

1

Just replace your css with:

h1.block-h1  { 
  font-size: 13px;
  font-size: 1.1em;
  line-height: 13px;
  position: absolute;
  top: 13%;
  left: 6%;
  z-index: 99;
  color: #E35094 !important;
}

edited Sep 19, 2014 at 19:36

emmanuel

9,61310 gold badges27 silver badges38 bronze badges

answered Sep 19, 2014 at 18:46

WpTricks24

8251 gold badge7 silver badges27 bronze badges

Collectives™ on Stack Overflow

Overriding CSS in wordpress using class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related