Just wondering which of these methods of styling has the priority while styling html:
Using CSS:
div{background-color:yellow}
Using style attribute:
<div style="background-color:red"></div>
Using script:
document.getElementsByTagName("div")[0].style.backgroundColor="green";
The last example will win, because it's the same thing as your second example (both are inline style properties), but happens later, overwriting red with green.
In general, it's (in descending order of priority):
Inline style properties with the !important flag
CSS properties with the !important flag
Inline style properties without the !important flag
CSS properties without the !important flag
...where within the "CSS properties" area there's the entire realm of specificity.
The priority is exactly opposite your list.
Linked CSS-stylesheets are overridden by inline-styles, and JS-added rules will override both linked and inline styles. They are actually overwritten in the moment - not stored, but on load / when the JS is run, it will overwrite current styles for the remainder of the session (or longer, depending on how the JS is set up).
The css belongs to the css files, so using CSS is the normally the best option.It's better because is more readable, and its better organized than putting it directly in the html or via javascript.
One important thing to be aware of, is the CSS Specifity. That means, different methods of writing CSS have different priority when the browser have to apply the styles. Check this link for the documentation about CSS Specifity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it helps
Related
Bootstrap responsive utilities are all using !important, which doesn't make much sense to me. And it doesn't do inheritance like col-xx-xx does. I'd like to know why they added !important for these classes. Someone mentioned it was for specificity. What does that mean? In addition, show and hide classes seems to use !important as well. Why?
While using !important is rarely a good idea as you noticed yourself, since it is a pain to overwrite without using !important yet again, I believe TB has a good reason for doing this for the responsive utilities.
If you state that you want e.g. a button to be not visible on e.g. small displays, by setting the hidden-sm class to that button, you never want it to be visible on small displays. If you would not use important on that utility class, and you would e.g. want a block button on all the other display sizes by adding .btn-block class, your button would become visible again on small displays, since the .btn-block sets the display property back to block. Or at least it could, depending on the order of things, since .hidden-sm and .btn-block have the same specificity when it comes to the cascading rules of css.
Nothing much you can do about that without the !important statement. So this is one of the edge cases where you would have to use it to guarantee the correct behavior.
But you are right in questioning this, !important should only be used as a last resort!
This is really really weird:
Without anything in chrome buttons look like this:
<button>Test</button>
However when you throw in the slightest of border-curvature, the css dramatically shifts to
<button style="border-radius:1px">Test</button>
Event More noticeable is the button:active css changes....
How is it that so many properties can change by adding styling to an object?
is there even such a thing as a css selector based on styling?
ie. button:styled{}?
here's a jsfiddle https://jsfiddle.net/vya24rhw/
The reason that you are seeing a big difference is because when there is no border-radius set, the UA (WebKit) assigns the value for the -webkit-appearance property as button whereas when there is a border-radius set, it resets it to none. It seems like the button appearance has some specific style settings which are not applied when the appearance is set to none. This can be viewed from the Computed Styles tab in the Developer Console.
As stated in this WebKit blog article dated 7th October 2005, there are three appearance constants for buttons namely, push-button (which is used by <input type="submit" .../>), bevel-button and button (which is used by the <button> element). When an appearance constant is set, the element continues to use the pre-defined appearance settings unless we explicitly reset the appearance value to none or use our own background and/or border properties. In my opinion, this explains the reason for the difference that we are seeing.
Note: The blog article doesn't explicitly specify border-radius but I am considering border properties to cover the entire spectrum of all properties relating to border and its styling.
In a website, I have a header and footer that comes from another website.
Those header and footers came with javascript and add lots of CSS files (CSS files used from another website) ... and the main website too!
Those CSS are like battle themselves and the rendreing of the header and footer are like mixed styles because of mixing CSS rules from all css files...
How Can I remove all the CSS rules (main.css) on the two part of the main website and just apply the "headerAndFooter.css" on those two parts?
The every part havs his proper div.
Thanks in advance
You should create a new class for your headers and footers in a separate CSS file - and enter the needed styles there. That way, they won't conflict with the rest of your site - and you won't compromise the rest of your site's layout by modifying global CSS.
Of course, without seeing any of your code, it's hard to provide a detailed answer, but in cases like this, more accurate class names are a good starting point.
You can use !important at the end of the value of the property you are trying to change, if you have several rules overwriting each other.
For example: the blue color would show, not the red, because you labeled the blue as important.
body {
color:red;
}
body {
color:blue !important;
}
A better solution would be to just erase the rules that you don't need from the different css files.
I finally download the incoming CSS and prefix them by #header and #footer. Than I ahave full control of all CSS because I use it locally.
At the moment I've been using the css line-height property in the parent div to increase the line spacing, and this works fine for the text, and even <input> elements. The only problem is any custom controls like the JQuery spinner or Chosen will try to fill up this entire line height (as they're set to display:inline-block)
Currently it appears like this:
How do I get these widgets to appear the same height as the text? I mean the default <input> elements can, so surely it's possible?
Find the element class/id and on your own style.css you can customize it's property with !important But use of !important is not considered as a good practice. (But if there's issue on one-or-two places, i think that is Ok)
Another way can be, why not making changes on jquery ui css that you are linked to.
I'm working on a browser script that scans a page for keywords, highlights them, and when the user hovers over them - creates a tooltip that gets filled using AJAX and PHP. The only problem I've run into is that the CSS of the website the tooltips are displayed on is interfering with the CSS of the tooltip content.
The tooltip uses an <img>, <p> and <table> with <tr> and <td>. My PHP file echoes these elements back with ID's which I have styled in my CSS file. My CSS displays properly on some sites like Wikipedia, but others mess up the padding/margins/alignment. For example, certain websites may align <td> center, while I would like it aligned left. I have already added "!important" to many of the ID's used.
Question: How do I keep a website's CSS from interfering with the styles of my tooltip?
One thing you could do is to use a id for your tooltip container.
You just need to keep in mind that id have to be unique. So you must not have two tooltips on your page.
<div id="my-tooltip-2986234">
the content of the tooltip
</div>
Then for your css file your create something like this:
#my-tooltip-2986234 * {
/*reset all style properties here (you can take this of a css reset script)*/
}
Because id a have a higher weight then rules without an id this should overwrite all stylings of the foreign page inside of your tooltip container.
You will also need to prefix all your rules for the tooltip with that id.
#my-tooltip-2986234 a {
/*style for your a*/
}
You indeed could still have problems with !important rules of the foreign site. But creating your styling code that way would minimize the conflicts. Your can still think of adding !important rules to your rules. But at least for the things I created prefixing the rules with an id was sufficient.
Another solution - but not as elegant as the one above - is to create an iframe container where you write your content to. That way you would have complete sandboxing of your css rules. But because I didn't use iframe for a long time I don't know right now where the pitfalls in the various browsers are (You need to create an iframe without a src, because of cross domain policies, which used to cause problems in some browsers).