I have a <rich:popupPanel> that I have to style. I have inspected the element and found that the following CSS is been used.
.rf-pp-hdr-cnt {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
font-family: Arial, Verdana, sans-serif;
font-size: 17px;
}
Now I have made changes to this CSS and included this in my CSS file. However, my custom CSS is ignored and the original RichFaces style is read. How can I use my custom CSS and override the original one?
First, you need to make sure that the selector is at least as strong as the original selector of the styles you'd like to override. So if the original styles which you'd like to override are been specified by for example .rf-something-else .rf-pp-hdr-cnt {}, which is a stronger (more specific) selector, then it would always get precedence, unless you add (ugly) !important attributes to every style being overridden.
Second, you need to make sure that your custom CSS is been loaded after the RichFaces one. Easiest way to achieve this is using <h:outputStylesheet> in the <h:body>.
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="custom.css" />
...
</h:body>
This way it will implicitly be relocated to the end of the HTML <head>, after all auto-included JSF/RichFaces resources.
See also:
W3 CSS2 specification - 6.4.3 Calculating a selector's specifity
Sitepoint.com CSS reference - specifity
Related
I have an HTML that loads two stylesheet:
Bootstrap style (bootstrap.css)
Custom app style (site.css)
I have the following code in bootstrap.css
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
What do I need to insert into my site.css so I give priority to site.css style without modifying bootstrap.css:
.modal-open .modal {
overflow-x: hidden;
overflow-y: scroll;
background-color: #D5D5D5
}
Rather than adding !important, you can just add the custom style sheet after the bootstrap stylesheet in the <head> section of your site:
<link href="bootstrap.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
This way, for any duplicate CSS selectors/properties the site.css will override the bootstrap.css
First, you should load the site.css file after bootstrap.css like #luka suggests. This doesn't always guarantee success because the specificity Bootstrap gives some of it's rulesets are really high. It appears in your specific situation, you shouldn't have any problem. But Bootstrap's rulesets intertwine sometimes and there may be something you're not aware of or can't locate that might be preventing your ruleset from succeeding.
In the case of you loading site.css after bootstrap.css doesn't work, do not use !important. Instead, double up on your selector:
.modal-open.modal-open .modal.modal {
overflow-x: hidden;
overflow-y: scroll;
background-color: #D5D5D5
}
According to this online tool, the selector above CSS specificity score is 4, while Bootstrap's is a 2. This technique has been 100% for me for years.
Try adding !important :
.modal-open .modal {
overflow-x: hidden !important;
overflow-y: scroll !important;
background-color: #D5D5D5 !important;
}
You have several options:
If the rule is exactly the same - the last rule that exists will take over (so if you link first to the bootstrap.css and after it to the site.css - the style inside the site.css will take.
You can add the !important (not the best option, but you can do it).
You can duplicate the selectors: .modal-open.modal-open .modal.modal {...}
I have read and learned that internal stylesheets will override external ones. And also, I learned that the stylesheet last to be called will override the previous one.
With that said, when I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal. It would make sense, as the external sheet was called last, but with what I have learned so far about internal CSS as having higher precedence, it shouldn't matter if it was placed before the external one, right?
There are only three types of styles:
Inline
Embedded
External
And the inline styles are very powerful, because, they are included along with the tag:
<div style="/* rules */">
The embedded styles are almost similar to external styles. Embedded styles are defined by using the <style> tag inside the same page. The main difference between embedded styles and external are, embedded are specific to the page, which they are contained, while external are generic to any page that uses it.
<!-- External Style -->
<link rel="stylesheet" href="style.css" />
<!-- Embedded Style -->
<style>
/* Page Specific */
</style>
And specificity matters in the way of how you import the styles. Always load your external styles <link /> first and then your page specific embedded <style> tags.
The specificity is as follows:
* Image credits CSS Tricks.
I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal.
Consider I am using bootstrap library, and Google Fonts. I will load them first, and then override them in my own styles.
<link rel="stylesheet" href="googlefonts.css" />
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="custom-styles.css" />
There's no difference between having your embedded or internal styles in CSS file or using <style> tag. The order of loading precedence matters.
A CSS file, say style.css with the following contents:
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
And having a style tag like this:
<style>
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
</style>
Both of them have no difference in them. The order you load matters very much.
I have a stylesheet which has the following property,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#FFFFFF!important;
}
I can't edit the stylesheet. How do I change the property to
color:#000000!important;
I tried to write the following code in another stylesheet,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#000000!important;
}
but it did not work. Please guide. Thanks.
Other than Emmanuel's answer which talks about this: CSS Specificity, You can also try using two approaches:
Change order of stylesheet
Make sure your other stylesheet order is higher than the current version. That is include the new stylesheet link after the stylesheet which is to be overridden
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css"> <!-- Styles that will overwrite -->
Inline HTML
If you can change your HTML, you can use this:
<span style="color: #000000 !important;">
!important in inline style will have higher priority than in other types of styles.
Did you try using:
.primary-nav .suppa_rwd_button span{
color:#000000!important;
}
Other way could be using JavaScript:
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Cheers!
In order to override an !important rule you have to put a same specific rule after the previous one or to increase specificity of new rule as:
nav.primary-nav li.suppa_rwd_button, nav.primary-nav li.suppa_rwd_button span{
color:#000000!important;
}
* suppose that .primary-nav is a nav element and .suppa_rwd_button a li element, you could change them due to your markup.
In both cases you have to also use !important in your new rule.
Reference: MDN - Specificity
I am using Bootstrap CSS on my site and am loading in the <head> element. Just below I load the boostrap I have a <style> element where I am trying to override some CSS from the bootstrap, but it is not overriding it when I look at the Chrome Dev Inspector. I thought elements in element should cascade the previous ?
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Women's Transit</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />
<style type="text/css">
/* Global elements */
input {
height:30px;
padding:8px;
}
</style>
</head>
You probably want !important.
input {
height: 30px !important;
padding: 8px !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.
Important:
When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.
So !important is the easiest way to override styles, because it is more "specific" than other styles. Please note that overriding styles is very bad practice, especially with !important.
The actual solution: Don't override styles.
The internal or embedded style you created would have a higher "order of importance" than Bootstrap's and cascade over their styles ONLY if the same selector was used in Bootstrap's sheet with the same weight and selectivity. That's not likely the case because they use classes to modify most styles. The "input" element has a weight of 1, so if they use classes with those properties they would easily cascade over your element style (a plain class generally has a weight of 10).
Bootstrap does use an "input" style in their reboot element style sheet, so your sheet would likely cascade over that one style. But I don't see them changing height or padding there so your styles would apply until their custom class changes its property styles further. In addition, their input style changes things you don't, like "margin" and "line-height" which might be affecting your layout further.
My advice is to NOT use "input" or "!important" and instead create a custom class and add the class to your element. Make it more selective than Bootstrap's with a full set of properties so you cascade over Bootstrap's input and class styles but inherit some things you like. This gives you full control now over what you like and don't like in Bootstrap:
body form .myinput{
width:100px
height: 30px;
padding: 8px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
<input class="myinput ..." />
The downfall of most young web developers with CSS is they do not add enough style properties to their styles and rely on either inherited or unknown changes to be cascading down into their elements. Adding a full set of properties gives you total control over how that element looks and what it inherits.
The mystery is gone :)
Quite confused here.
<html>
<head>
<style>
.one
{
font-weight: normal;
}
.two
{
font-weight: bold;
}
</style>
<body>
<p class="two one"> Test!!!!!</p>
</body>
</html>
Why is Test bold? I'm clearly defining "normal" for the font weight "after" the bolded one?
I thought CSS did the cascading based on what order the classes were added right? Not the location in the file?
CSS doesn't care what order you specify the classes inside your class attribute.
Here, both classes have equal specificity, so the class lower down in your CSS "wins".
Specifics on CSS Specificity - a well written article explaining specificity.
Pointless demo of your code: http://jsfiddle.net/JwhmE/
It doesn't go off the order of the classes on the div but the order they are defined in the style rule.