I am using input-group input-group-lg classes to add styles to textarea.
The border is not being applied to the textarea.
Default value for the border is 0.
in bootstrap.css if we modify
.input-group .form-control:first-child{
border:1;
}
Then i am getting border. How can i apply this style to my_styles.css which is in my project.
I pasted above selector in my css file and used !important also and not getting border.
Thanks in advance.
You defined border: 1, what 1? One apple, one meter, one pixel?
Complete border definition is border: 1px solid #000 (width type color), if you only want to change border width, use border-width: 1px;.
Do not use !important unless you really really have to.
To override the existing styles, make sure you load your CSS files after the bootstrap one. Then, make sure your rules are at least as specific as those in the original CSS file, only like that you can override them.
Here is a nice tool for comparing specificity: http://specificity.keegan.st/
Also, make sure you follow the proper syntax for each CSS rule. The example you've shown is not valid CSS therefore it should not work, ever. Look at #panther's answer for detailed explanation.
Related
There are two import urls being called
#import url(SiteA.css);
#import url(SiteB.css);
SiteA.css has
div {border-color: blue;}
SiteB.css has has
div {border-color: red;}
what would the border color would it be blue or red , which wins SiteA.css or SiteB.css
The last called styling will overwrite all the above. CSS will run from top to bottom. This means that the styling on the bottom will overwrite the styling above, unless you use !important. So to answer your question, the border will be red.
If you don't now how !important works you can read the following article:
https://css-tricks.com/when-using-important-is-the-right-choice/
HTML will read and execute the code going from top to bottom. Because importance or specificity isn't defined in your CSS, the stylesheet that gets called lower in the file overwrites the stylesheet above it.
So in this case, the second stylesheet will overwrite the first and the border will be red.
Definitely SiteB.css wins as it comes after the other one, CSS rules are overwritten by order (unless you use !important or use more specific selectors).
Thanks all , I read this post now I understand the last wins
http://www.blooberry.com/indexdot/css/topics/cascade.htm
i'am new to mkdocs, here is what i'm trying to do:
add a caption to images and use a css style to use a shorter margin-bottom
i managed to install a python-makdown extension "captions", so if i use
: my sub caption
i'll get
<figure><img ...><figcaption>...
in html. Unfornutately the spacing (css: margin) is to big so i included a css file to remove the default values. Inspection in my browser now shows me, that base.css overwrites my style, so margin remains at default.
How can i overwrite base.css styles with my own styles?
As i wrote in my comment, !important guarantees overwriting:
figure img {margin-bottom: 0px !important;}
But I don't understand why...
If you use your browser's developer tools to inspect the img element...
You can see that the img is defined with a rule for div.col-md-9 img. that is, any img tags under the div with a class of col-md-9.
We can see that (as explained in CSS Precedence) the original rule uses one class attribute and two element names for a specificity of 0012. You need something of equal or higher specificity. But figure img only gives you 0002, which is lower.
To override that, you need at least the same level of specificity:
I'm sure various other permutations would give a working result as well. But we have a working solution, so why keep going. And thanks to the "inspect" tool, it was pretty quick and easy to resolve.
Rather than tweaking the CSS, it might be easier to try a different plugin, such as img2fig
I've the following problem, I'm trying to change the color of the text of a "< li>" element, in joomla menu. I give the menu a link to css selector called blueMenu, this is my CSS regarding the class:
.blueColor {
color: blue;
}
However this doesn't change the color of the text, on the other hand if I change "color" with "background-color" the background of the text becoms blue. Any idea what may causing the problem?
You dont give much information, but it might be that the li has a child element inside that its overwriting the li styling, make sure you using the style on the last child.
You can also force it with !important;
.blueColor {
color: blue!important;
}
This really much depends on your template.
As already said, reasons can be inline-styles, or may more "distinct" declarations.
If you just specify the class like you did in .blueColor this will be treated with a lower priority as e.g. li.blueColor or to get even more clear both with be treated with a lower priority as e.h. #someId.andClass .subElementClass li.blueColor a.thisIsWhatIsReallyBlue
This is more about CSS specifications than a Joomla-Problem though.
You might check the style that is really applied by just launching your Development-Tools of your webbrowser (for Chrome simply press F12 or right-click on the element and inspect the element directly)
The CSS-Section on the right side might tell you about what really makes the item become blue ;)
Oh, and just a note:
As already mentioned you can use !important to "force" the styles to be applied, but if this is not absolutely necessary, i'd suggest to find the way to override this style on a clean way, since !important, if used to often, might result in a complete mess of your stylesheet.
regards
I'm not familiar with joomla but it may be inserting an inline style to whatever element you're trying to style. Right click on the element and use inspect element (firefox) or just inspect (chrome) to see if any styles were applied.
It'll look like <div class="" style="color: blue;">
If in my webpage, i have all the three css defined for a div
Inline
Internal
external
I know that browser first looks for 1)Inline then for 2)Internal and last, it looks for external css.
but i want to call only external css, how it would be done?? Can i do it through !important or there is any other way?
There is no difference between internal and external style sheets. Which styles are applied depends on:
Specificity
Declaration order
Inline styles are the most specific, then identity rules (#), then class rules (.), then element rules.
For two rules that have the same specificity, for example div .main and span.title, both rules apply, but the one declared last takes over when they specify the same properties.
The only way to circumvent the precedence is to use !important.
Best thing to do is to put everything into an external css file.
If you must have inline styling then make sure you only have ones that aren't already defined
in your external stylesheet. i.e Dont duplicate/override styling. e.g, if you have the following in your css file:
div { padding: 5px; }
then dont have the following inline styling.
<div style="padding-right:2px;" />
Just put it into the css file
div { padding: 5px 2px 5px 5px; }
Like you said, you can use !important if you have to override a styling for just one page that doesn't apply to the other pages in your site.
1)Inline then for 2)Internal and last, it looks for external css.
No. There is no difference in priority between CSS included with <style> and CSS included with <link>.
but i want to call only external css, how it would be done??
You cannot cause CSS included via <style> or CSS included via the style attribute to be ignored.
Can i do it through !important or there is any other way?
You could apply !important to every rule and then hope that no rule included via <style> or style also has !important… but that way lies madness.
As I see in the primefaces documentation,
1) To change the font-size of PrimeFaces components globally, use the `.ui-widget` style class.
An example with 12px font size.
.ui-widget,
.ui-widget .ui-widget {
font-size: 12px !important;
}
I have 2 questions on this:
Why is the .ui-widget written thrice in the above code?
For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?
In the style declaration they are comma delimiting the list of different class overrides. Specifically this piece of css states:
Classes ui-widget and ui-widget child elements of an element that has the class ui-widget.
As far as the header background is considered you might not have luck using simple CSS to modify the background color as I believe that it is likely using various different 1px wide GIF or JPG images repeated as opposed to a solid contiguously declared color.
If you want to customize the default themes of the Primefaces components with your own stylesheets then you are best to look into a tool like Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ for inspecting classes, styles and modifying them real time on ANY web page that Firefox is currently viewing. It even has built in Javascript debugging.
For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?
tabView, like all other PrimeFaces components has the attribute styleClass. Therewith you can assign your own CSS style class to a tabView instance (or any instance of a different component).
So you can create two style classes with different background colors.
xhtml:
<p:tabView styleClass="myClass">
...
</p:tabView>
css:
.myClass {
background-color: yellow;
}
You might need a more specific selector, read about css specificity
Perhaps a little subjective, but unless you're looking to customise existing Jquery UI IDs within a pre-existing/pre-rolled Primefaces theme then you're on a bit of a hiding to nothing. PanelGroups, PanelGrids and TabViews, for example, burst their containers and not even an overflow:auto can repair it.
One of the most infurating things about the Primefaces library is how the components do not pass W3C validation, leading to hours of "Fighting the Framework".