I just wanted to know, does the web browser style sheet override all other CSS styles or is that not true?
There is a specific hierarchy in css stylesheets. Normally your custom styles.css should override all the webbrowser styles.
Yes it does,as long as you use the correct path's
Or specify for which one are you talking about e.g. the one that you will use to edit or something else?
That is false. You can have outside style sheets linked and have inner style code and they will both work. But if there is content that is styled in both outer and inner CSS, then inner CSS will override outer CSS linked pages.
Related
I am looking to know if there's a way to override the CSS of a Vue component which has been loaded in the browser.
The component is being worked on by a different developer and is being pushed live independently of the parts of the page I'm working on.
I've tried the following:
using the !important tag
trying to increase css specificity
using the :host() & :root() selectors to try and override the component css
However none appear to work and it appears that the component also generates a style="" in the tags so the CSS is embedded at that level within each tag.
Just wondering is there any way of applying CSS in the base HTML file that would override the CSS of the component.
Thanks for any help with this.
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.
I'm working with wordpress and have been removing the width and height attr's when adding images as they are added automatically, however I have been sizing the images via stylesheet:
.foo img {
max-width:500px;
width:100%;
}
After doing a little reading it seems the inline attr's help with page loading times so I was wondering:
Should I use one or the other or both?
Will the inline attr override the css?
They should be added inline to help with page loading times, as you mentioned. Inline styles will win against external style sheets, but style sheets will override height and width attributes.
In other words, <img height='300' width='300'> can be overridden in an external style sheet, but not <img style='height:300;width:300'>.
You should use the external sheet if you want all images class foo width the same attributes. The width pixels determine the resolution, the width percentage determines the stretch. Inline will override the external sheet.
External style sheets are used to organize your design and can be cascaded. The advantage of using external style sheets is that you can make changes to one or more independent style sheet files without having to modify inline attributes in the main markup. In this way, you can easily change style properties.
You can use inline styling that will override style sheet properties in most cases but the syntax and format should be correct.
It really depends on what you want to do but I usually prefer external styling as this allows a designer to design (via external style sheets) independent of the developer.
Please refer to http://www.w3schools.com/css/css_howto.asp
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
I am injecting some html + css into every page from my firefox plugin. But this styles is sometimes getting overridden by the style sheet. I want to stop this behavior.
I know this can be solved by some css tricks. Adding !important for instance. But is there a way available in firefox or xul to do this easily?
Using !important alone is not enough, the webpage could do the same and still override your styls. You can use the Stylesheet Service to register a user stylesheet. If you then use !important then web pages will no longer be able to override your styles.
Note that user stylesheets are always global and apply to all webpages as well as browser's own XUL documents. You can restrict them to particular webpages using #-moz-document.
#MEGA_PLUNGIN a {}
#MEGA_PLUNGIN span {}
#MEGA_PLUNGIN div {}
#MEGA_PLUNGIN table {}
...
Not the best solution but right...
To me, this is one case where you would certainly use !important.
That said, you can try to use specificity to ensure your styles are being set.
So, make sure that you are targeting the elements are precisely as possible, in order to override those styles that are not as specific.
For instance, if you have this structure
<body>
<div>
<h1 class="something">
<a href>
The site's styles may target
h1.something a{
You should aim to do this
body div h1.something a{
which is more specific and would override the above styles.
The other thing you might be able to do is append your styles just before the </head>, which would make them appear last in the cascade, and, if they are equal, will be applied.