Forums

CSS Styling within a html block

Permalink
Hi

I am trying to style some buttons within a html block. My code is something like this:
<style>
button.qq{
color:red;
background-color:black;
}
</style>
<button class="qq"> Click Me! </button>

The styling does not get picked up. However, if I use inline CSS, it works:
<button style="color:red;background-color:black"> Click me!</button>


Please could someone help me out here. How can I style all my buttons without resorting to inline coding for this particular block? I read something about custom templates but I am not a programmer and would like to avoid anything too complicated as far as possible.

Thanks!!
decleaf
 
JohntheFish replied on at Permalink Reply
JohntheFish
Its probably that your theme has stronger rules, so overrides the style section. However, inline styles are always strongest, so win over in the end.

What you need is a stronger rule for the style section. Use an #id that is a close container.
<style>
#my_section_id button.qq{
color:red;
background-color:black;
}
</style>


If that isn't strong enough, you can also make a rule !important:
<style>
#my_section_id button.qq{
color:red!important;
background-color:black!important;
}
</style>

(be careful, it could have side effects if your rule/selection is too general).

If you use the Chrome developer console or firebug, on the elements tab you can see an analysis of how rules are prioritised and what is overruled when for any dom element.
http://www.concrete5.org/documentation/how-tos/editors/getting-help...
decleaf replied on at Permalink Reply
decleaf
Many thanks. Did you mean to say I should use a combination of id+class? I fiddled with the code, did this and it works!

<style>
#mm.qq{
color:red;
background-color:black;
</style>
<button id="mm" class="qq"> Click Me!</button>
JohntheFish replied on at Permalink Reply
JohntheFish
What you have done there is tighter than I was originally suggesting, having the benefit of being just for that one button, so it cant spill out to anything else.

However, if it is that specific, you could just as well have put the styles in the button like you tried at first :)

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy.