There's a pile of questions with related sounding titles, but I didn't see my answer for this question in case anyone is checking (feel free to leave a reference though!).
This is more out of inexperience than anything... but if I have a global stylesheet that sets the CSS properties of a class div.rowpic, and then I do this:
<div class="rowpic" style="background-image: url('whatever.jpg');"> ... </div>
Can I reliably expect browsers to use the full CSS specification of div.rowpic but replace its background image with the style I explicitly stated in this div tag?
Yes, that's what should happen.
Style in the element overrides the definition of the style in the declared CSS('s).
Each property of the styling is applied independently from the others, so even if you import another CSS after that one that has the same class but only redefines some of the selectors, you still get the remaining ones applied from the first CSS.
Of course. In this case, the background image will be replaced since inline styling rule is more important of css styling rules.
Please read this article about CSS specificity: http://css-tricks.com/855-specifics-on-css-specificity/
Related
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.
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.
You can paste this into the bottom of your page right before the tag.
<script>
document.body.style.backgroundColor = "#883377";
</script>
You can the change the #883377 to whatever color you would like.
Does a css class selector always require a definition? For example, if you found in the html: div class="banner", should you always find a .banner in a css file? I ask this question as I've been looking at some website themes and I sometimes find these selectors without any other reference. I'm just not sure if it's an oversight or something common.
There are many reasons to have class names on your HTML elements without having CSS rules associated with them. A couple of examples:
More readable markup. If a component is properly labeled, it's easier to find, debug, or work collaboratively on.
Javascript. Sometimes an element requires some Javascript behaviors, but doesn't inherently need CSS styling itself.
So to answer your question: No, you do not need to define each class or selector in your CSS.
I saved and am using the bootstrap css but it conflicts with my main css.
it has tags body, html, a, img, p... and my css loses configuration
how can I use the bootstrap css without colliding?
thank you
Try importing your custom CSS after Bootstrap CSS.
In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles.
Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Nowadays, it’s used to counteract the pain of having to deal with CSS specificity, otherwise known as the set of rules which dictate that “div h1 a” is more specific selector than “div a”. Most people that use CSS on a daily basis don’t know enough about CSS specificity to solve their problems without using the “!important” suffix.
1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire css of some class best to use !important property.
2.if your are using script in your code so its very easy to differentiate the css styles.
Try combining into one CSS, multiple CSS slows down the sites.
Even, Bootstrap has its own body,html, etc tags. You have to edit them or delete/comment them. So it avoids conflicts.
Generally, the last CSS property will be applied, so if you put your body, html etc at the end of Bootstrap.css, that might work, but not recommended.
When a JavaScript library creates a <div>, it typically sets a class on the div so that the user of the library can style it him/herself. It's also common, however, for the JS library to want to set some default styles for the <div>.
The most obvious way for the library to do this would be with inline styles:
<div style="application's default styles" class="please-style-me">
...
</div>
However, this will make the application's default styles trump the user's styles. A workaround is to use nested divs:
<div style="application's default styles">
<div class="please-style-me">
...
</div>
</div>
This works great for many styles like 'font' but fails for others like 'position', where the inner div's style will not override the outer div's.
What is the best practice for creating user-stylable elements with defaults in a JavaScript library? I'd prefer not to require users to include a CSS file of defaults (it's nice to keep your library self-contained).
When a JS library has a default set of styles that should be used, but should also be overridden, the JS library should include a separate stylesheet.
JavaScript should avoid adding styles directly as much as possible, and defer all styling to CSS where it's reasonable.
It's common for sets of styles to be toggled on and off. The way to elegantly handle these situations are with CSS classes.
A case where it may not be reasonable to simply use external stylesheets is animation. CSS animations could certainly be used, but for cross-browser support, asynchronous interpolation is used to animate styles from one value to another.
There isn't !notimportant or !unimportant in CSS. And I haven't run into an accepted best practice. It seems like a CSS file is the defacto standard for styles that should be user modifiable.
But if you want to keep things all in one library, I would take your second example, with your application default styles, then append a CSS class to it and prepend something unique to the class name. Then if the implementor wants to override your styles, the implementor could just use !important to override your user styles.
Adding !important to one or two styles in a CSS file shouldn't be a huge deal, but if you're creating a bunch of inline styles, this may not be the best solution.
I have an extension which adds some elements to pages. I'd like those elements to look exactly the same on every site. Considering the fact that there are some, ugh, developers, who write their CSS rules with "!important", is there a way to override such rules without adding "!important" to every rule in extension's CSS? Maybe there are some CSS3 or Chrome/Webkit's proprietary methods to do so?
Define your class with parent element class. You could also use !important keyword.
i.e.
<div class='my_parent'>
<div class='class-1'>...</div>
<div class='class-2'>...</div>
</div>
in your .css file
div.my_parent class-1{..}
div.my_parent class-2{..}
No, actually if someone use !important in the css rules there is no other way to overwrite without putting !important. For example,
body{background:transparent !important}
can be overwritten by using
html body{background:blue !importamt}