I have a <p:panel> with id X and i want to remove the padding from its content X_content the generated HTML for the panel content is:
<div id="X_content" class="ui-panel-content ui-widget-content"> and the element appears in chrome developer tools to to have a padding:
padding:0.5em 1em;
i made an embedded style sheet to override the one in primefaces as follows:
<h:head>
<style>
.ui-panel-content, .ui-widget-content{
padding:0px;
}
</style>
</h:head>
but i didn't work, the padding still exists, could anyone help me?
Your CSS selector
.ui-panel-content, .ui-widget-content {
...
}
basically means: "Select all elements having ui-panel-content or ui-widget-content class".
However, the padding is definied in PrimeFaces default CSS by this CSS selector
.ui-panel .ui-panel-content {
...
}
which basically means "Select all elements having ui-panel-content class which is a child of an element having ui-panel class" which is according CSS cascade rules a stronger selector. This has thus higher precedence than your CSS selector. This is regardless of the declaration order of your style class (the declaration order only matters when the selectors have an equal strength).
When overriding PrimeFaces default CSS, you should provide a selector of at least the same strength or a stronger one. In your particular case, just use the very same selector if you intend to apply the style globally:
.ui-panel .ui-panel-content {
padding: 0;
}
Please note that when using <style> in <h:head>, then it would still be overridden by PrimeFaces default CSS, because it's auto-included in end of head. Rather move the <style> to <h:body>, or, better, put it in its own CSS file which you include by <h:houtputStylesheet> inside <h:body>.
See also:
How do I override default PrimeFaces CSS with custom styles?
CSS selector syntax
Related
I am using external style sheet more than one and internal css and also bootstrap predefined stylesheet. Now the problem is, I need 1 external style sheet would override all style sheets,internal css and inline css. how can i success it
You must use "!important" for your properties to override all styles
p {
padding: 10px !important;
}
There is precedence to css styling methods. Inline styles takes precedence over internal css (using <style></style> tags) and external css (using <link /> tag).
To force properties use !important keyword after your property value.
Example:
external.css
.home-page {
background-color: green !important;
}
PS: Check this question for more info:
What is the order of precedence for CSS?
You need to add/import external css which should override all the styles at the bottom. First add/import bootstrap, then add/import other css files, then your css file which should override others.
When Adding/Importing css files, order is important. The file you add/import at last will override the previous styles.
If something doesn't work as you expected, then give them important like this
h1 {
font-size: 25px !important;
}
In-line css rules always take precedence than other css rules/styles. In that case, you need to mark your rules with !important keyword.
There are several rules ( applied in this order ) :
inline css ( html style attribute ) overrides css rules in style tag and css file
a more specific selector takes precedence over a less specific one
rules that appear later in the code override earlier rules if both have the same specificity.
A css rule with !important always takes precedence.
Sourec: Details about precedence and css specificity is talked here
I have a page that I need to modify some behavior. The element that I'm working on has a [attribute] directive, like this:
<div class="someClass" myAttributeDirective></div>
The myAttributeDirective has it's own css page that defines some styling, like this:
[myAttributeDirective] {
/* a few different properties */
border: 1px solid red;
position: relative;
}
/* then some more class stylings related to the directive */
So you see, in the css, it's defining some styles for JUST the attribute, so if the attribute exists in any element, apply those stylings.
When I view my element in Dev tools, it doesn't look quite right. In order to "fix" it, I un-check one of the css properties that is causing my issue, the position: relative;.
BUT
I can't change the "core" css for that directive, because it's used throughout the application. AND, if I try to override that property, it doesn't work (actually, cycling through the different position: * options only leads to making things look worse).
So, how do I override that specific property, without changing the core css file?
If you want to override style in any case irrespective of which order style is applied, consider applying style inline in the div.
<div class="someClass" myAttributeDirective style="position:absolute;"></div>
I overwrite some of the jQuery UI CSS classes in my MVC Views.
I want to move all the style elements to an external style file. But I don't want the overwritten CSS classes to apply to all the views.
Is there a way to specify CSS classes for a particular view, or any recommended way to approach this?
I'd rather keep just one css file if possible.
Assuming that when you say "classes" you mean "rule-sets":
Since you have added a requirement to stick to one CSS file (and I assume you don't want an inline <style> element):
Prefix each selector with an id selector and a descendent combinator: #someid
Then add the id to the body element of the view: <body id="someid">
Thus:
.foo { text-decoration: overline; }
becomes
#myFirstView .foo { text-decoration: overline; }
Warning: This will increase the specificity of each selector (in the group of rule-sets specific to your view). This could change the order in which these rules and the generic "apply to every page" rules are applied. You could avoid this by prefixing all the shared rules with #generic and adding <html id="generic" lang="en">.
You could add an id to the body of the view you wish to override the styles in.
HTML:
<body id="specialview">
...
</body>
CSS:
#specialview .class_override { ... }
My website has a stylesheet defined in the header as style.css with a selector:
.myClass {background:#000;}
Now my div looks like:
<div class="myClass" style="background:#fff;"> </div>
Which one has priority, the inline or the class?
The order of precedence with CSS is as follows:
!important (this is a bit hackish though but it is the only way to override an inline style. Try to avoid using this unless really necessary). Example: p {color: blue !important; }
Inline, such as <p class="redText" style="color: red;">CSS is awesome</p>.In this example, the class is ignored if the redText class declaration has already tried to define the property of color:. Other properties can still be honored though.
Internal styles - those written inside the <head><style> section of an html page.
External stylesheet which defines styles. Your html document must have a link to this sheet in order to use it. Example, again inside the <head> section is: <link rel="stylesheet" type="text/css" href="mystyle.css" />
Check here to brush up on the terminology: http://www.w3schools.com/css/css_syntax.asp
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:
Browser default
Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
Inline style (inside an HTML element)
Source (Edit: of original incorrect information, since corrected both here and there): w3schools
W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)
The order of precedence with CSS is as follows:
Inline, such as <div id="orange" class="green" style="color: red;">This is red</div>.In this example, the class is ignored if the green class declaration has already tried to define the property of color.Also id is also ignored if it has tried to define the color.
Id Selector , such as #orange { color: orange; }
Class Selectors , such as .green { color: green; }
Element Selectors ,such as div { color: black; }
Mozilla Developer Network Documentation Has Well Written Documentation on That Which Says
When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors.
The text color of the below will therefore be red.
div { color: black; }
#orange { color: orange; }
.green { color: green; }
<div id="orange" class="green" style="color: red;">This is red</div>
Please Consult MDN for any HTML, CSS or JavaScript Knowledge, w3school does not have a very good reputation in developers community. For Further Info On This Matter Please Visit w3fools.
There is no 3.Internal or 4.External precedence. Whichever stylesheet comes last in the html page which will get the precedence.
Eg.
<style></style>
<link> </link> <!-- Precedence -->
<link> </link>
<style></style> <!-- Precedence -->
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}