How to override background-color for all classes using css?


Tags: css,primefaces,themes

Problem :

I'm using a CSS theme that I'm not allowed to edit, I need a way to paint all the white backgroud-color with something less shiny.

I'm new to CSS, what should I do to override the background-color for all classes using CSS?

Here is a screen shot, I'm using Primefaces to generate the web content hence I'm unable to change the provided CSS

A screen shot of what I'm trying to change

I already understand that every element has it's own class in the theme, but I don't know their names, nor which one of these classes provide the background-color for those elements, what I'm looking for is a simple way to repaint the white color in the whole page.



Solution :

From the official documentation:

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

And also:

Specificity is based on the matching rules which are composed of CSS selectors of different sorts.

That means that the CSS would be applied depending of your browser and your CSS Selectors for that browser.

And you should also look at what CSS Selectors has a higher specificity.

But as you want to override the background-color, that means to get the higher CSS Selector specificity I think what you are looking for is the !important exception.

Again from the documentation:

this declaration overrides any other declarations.

that means that the property of CSS that you are going to set with !important exception will be applied overriding the rest of different configurations that has that property.

But also, you have to care about to abuse of that property:

Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

What I recommend:

  • Try to set your background-color with CSS Selectors with higher specificity.

  • If you cannot modify the property, and you have tried all the posibilities, then use !important exception.


    CSS Howto..

    How to align buttons below and right-aligned to a HTML list?

    CSS - How to upscale Unicode arrows?

    How do I make a div not display, if the browser window is at a certain width? [duplicate]

    How to use window height in css using jquery

    How to draw a diagonal line with GWT or HTML+CSS+JavaScript?

    How to stop CSS within a RichText field from overwriting document

    How to call css into div class inner div?

    How to make a bullet of an image slider look different while is active?

    How to convert html & css to an image?

    How to create a CSS shade effect with a faded sidebar

    How to override the css using the JQuery

    How to Stop jQuery from Buffering Hover Effects?

    How to select 1st Column of div Table?

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How to style SVG with external CSS?

    How can I get the post text to be beside the avatar and not below it?

    IE css filter: adding black outline to text - how do I remove it?

    How to Add Another Instance of Date picker in given Code

    How to add custom tag to a header to make the font size larger in WordPress? [closed]

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]

    How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

    newbie css/php question - how to get a div between a label and an input with cakephp

    How to apply a fixed backgound in fullpage.js

    How to call and hide lists using two buttons - using Javascript HTML CSS?

    how to center background image in window resize

    How to center-align an HTML child table within a parent table via CSS

    CSS How to force DIVs side by side with text overflow?

    SVG + CSS - how to include in HTML and scale & color?

    how can I make my image (down arrow) disappear when I start scrolling my page?

    How to add css files to a custom module in Odoo 8?