Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have this in the external css
body {
color: #000000;
font: 12px Verdana !important;
padding: 0;
text-align: left;
}
i want to change the font so i am doing:
<body style="font-size:9px ! important;">
I'm assuming you can't simply change the external CSS file.
This sort of thing is horrible to deal with and you should write the owner of that CSS file a condescending letter. Once you're done with that, you have to win the specificity battle. CSS selectors apply according to which one is the most specific. When !important is used, it means, "screw the specificity of anything else, use me."
However, when two selectors that target the same element both have a property with !important, the specificity kicks back in again (fun huh). Now this sort of war is best avoided (hence the letter and ideally slashing off important from the offending file), but you can do something like the below in your style sheet, which is a more specific selector than just the body tag AND has !important.
html body { font-size:9px !important;}
or
* body { font-size:9px !important;}
This sort of war is like nuking the body tag from space, so beware the collateral damage of this.
EDIT: Oh by the way inline styles beat out external stylesheets and inline blocks, such as your style attribute, and therefore would work yes, but if you're working on a site with more than one page that technique is obviously painful to maintain. The above approach will allow you to keep the override in an external stylesheet. Cheers.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
HTML
<a class="link cta"> link </a>
CSS
.link, .cta, .blueText, .title{
color: cyan;
}
The browser see the class names (link, cta) in html first then find the style in css and then apply the style.
Or
It see the class names (.link, .cta, .blueText, .title) in css first then find those class name in html and then apply the style.
I believe it's more like the second. Basically:
Not necessarily in this order:
The browser parses the HTML and creates a bunch of objects called The Document Object Model, or DOM.
The browser parses the CSS. Each CSS block is made up of a selector and then a bunch of properties.
For each CSS block, the browser looks through the DOM for all the elements that match the selector and then applies the properties.
In your above example, the selector is a list of classes but there are other kinds of selectors.
Note that in real life things don't always work out in that simple order as things can be loaded late, etc.
Hopefully that is of some help...
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm a second-year IT student and I currently need to make a website. I made a simple website and first started with an external CSS, then I converted it into an embedded type. The next step would be to convert it into inline CSS. I first did it manually but it gave the same results as with an online converter I found on the internet. Here is my HTML code with inline and media queries.
<html>
<head>
<title>Hi</title>
<style>
#media only screen and (max-device-width: 600px) {
div.size {
font-size:1000px;
}
}
</style>
</head>
<body>
<p class="size" style="font-size:100px";>Hello</p>
</body>
</html>
Here are some links to screenshots: https://drive.google.com/drive/folders/1A67dCcEOksZdoPdXkChvYCJTmLcy1TxA?usp=sharing
Your CSS rule is this:
div.size {
font-size:1000px;
}
But in your HTML code you are using the .size class on a p tag, not on a div tag, so that rule won't apply to your p tag.
Either remove the div from the class selector (making it just .size { ... }) or change the selector to p.size { ... }
Inline styles have a higher priority then internal or external styles. This makes sense, when you are trying to overwrite general style properties of a specific element:
div {
color: red;
}
<div>
I am red because the general styles (internal or external) say so.
</div>
<div style="color: blue;">
I am blue because of my inline styles. They overwrite the general styles.
</div>
It makes no difference whether you use media queries or not. Inline styles will overwrite the general styles... Unless you use the !important keyword like this:
div {
color: red !important;
}
<div>
I am red because the general styles (internal or external) say so.
</div>
<div style="color: blue;">
I have inline styles but I am still red because of the !important
</div>
However using !important can lead to more problems then it actually solves but it might be sufficient for your assignment. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for some rationales.
You can't specify media queries with inline styles. Hence, you would have to mark every single css property in the media queries with !important.
I recommend to simplify your assignment project and not use media queries here. I just doesn't work with inline styles.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to display two kinds of styles in one webpage. I have a.css for the first style and b.css for the second style. The order is b overrides a. The problem is I want the css priority to be reversed in a particular div tag. Is this possible?
What is the reason for this? You can always override using an "!important" declaration. For example:
.style { font-size: 12px !important;}
Also, refer to this guide here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade (Specificity Calculations, Inheritance, The Cascade)
There are very few cases where you need to have 2 different CSS files to do the same thing. However, there are many methods that can fix this, one of which is just creating an class/ID of its own in what ever CSS file you want to override with and then attach it to the HTML Element.
If that doesn't work, my next suggestion would be is to try inline styling.
<div id="blabla" style="whatyouwantforthisinparticular">
You can't just "override" another script through HTML. Code works in a linear format. Once it sees a new line of code referring to that, it will take precedence based on what you did with it. For example, in CSS, you can have 2 different body stylings, but the top one's attributes will only be used unless the second has something new to add. For example:
body{ background-color:black; width: 500px;
}
body{ background-color:white; height: 300px;
}
In this example, background-color: black will changed to "white" and then it will add 500px to the height on top of the width of the previous styling. However, if you must have black, then adding !important will make it take precedence over white.
Yes you can do it using the !important attribute.
.your-class{
property: value !important;
}
Also you can do that being more specific in your class
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Is there a way to override every style property using a method similar to the !important declaration.
I want to override all properties without changing the order of the loaded stylesheets.
I'm also not able to change different stylesheets
EDIT
Might there be a way to put !important on an element?
You could be more specific in your styles.
For example, if you had HTML like this:
<div id="greg">
<p class="likes">
Hello, something <span class="toast">more</span>.
</p>
</div>
This:
span{
color:red;
}
would be over written by this:
#greg .likes .toast{
color:blue;
}
Instead of slapping !important everywhere, just make your styles more specific.
JSFiddle
Alternatively, if you can't actually edit the CSS file, you could always try inline styles, although they're harder to overwrite and shouldn't REALLY be done unless 100% necessary or you're applying styles through javascript etc...
example:
<div style="color:red">Caterpillar</div>
You should use weight of css selectors.
Good article by Chris Coyier
So you can increase the weight of your selectors using body tag for example.
div {
background: red;
height: 150px;
width: 150px;
}
body div {
background: blue;
}
the only way to do it would be to apply a !important style tag to the element in itself since this would then take preference over the style sheet declaration.
with simple html:
<p id="foo" style="color: blue!important;">LOREM IPSUM</p>
http://jsfiddle.net/vimes1984/5KbGV/
With JS:
$('#foo').attr('style', 'color:green!important');
http://jsfiddle.net/vimes1984/5KbGV/6/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have some CSS classes as:
.span9 {
width: 870px;
}
.span4 {
width: 370px;
}
In another custom CSS file I want to make another CSS class .span9? How do I do this?
The reason is because a DOM element uses .span4 and I want to override this but it must be overridden in a custom external CSS file.
Is this possible?
you could use the !important feature to override any settings in another file so in your new file you could do something like this:
.span9 {
width: 800px !important;
}
Yes it is, CSS is cascading (style sheet) so simply load the changes after the initial styles and it will work as you want. If you want to override width just re declare, if you want to add styles simple declare them.
If you have different parent of .span you can do this :
HTML
<div id="parent">
<span class="span9"> Hello world!</span>
</div>
CSS
.span9{width:870px;}
#parent .span9{width:100px;}
Or in you're HTML directly (but it's not a very good method)
<span class="span9" style="width:100px!important;"> Hello world</span>
Yes, just use !important. This will override other CSS rules that come after it, unless they're also marked as !important.
So your second stylesheet could contain something like
.span9 {
width: 1020px !important;
}
and that's what the CSS will default to. You can use this to override inbuilt stylesheets in CMSs etc, without having to mess with their actual stylesheet.
You can override it by concatenation of tag name and class name. For example , this : div.span4 will override simple .span4 , have a look: http://jsfiddle.net/5dYHG/1/