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/
Related
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 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.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
In my sass I'm keen for it not to get out of hand, i've a simple question/example what I'd like to know is what'd be the most efficient way to target the button in the example below?
Personally I like option 2 but have i done it correctly?
Call it picky but my problems are as listed below,
I'm not a fan of adding class/id to everything through html
Using Sass's ability to nest/target child elements within a parent is too overly specific
Option 1:
Give button class name in html making it easy to target in css
<div id = "box">
<!-- Give button class/id -->
<button class = "button1"></button>
</div>
Option 2:
Have _buttons.scss partial containing a .button1 class
On my main.scss target the parent container #box without button a class name in html, and then target nested button
buttons.scss
.button1 {
width: 100px;
height: 100px;
background-color: grey;
}
main.scss
#import 'components/buttons.scss';
#box {
button {
// Extend class from buttons.scss
#extend .button1;
}
}
I think it depends on how often you are going to use the styling for different buttons. Having an id of 'box' seems very specific to me though. Are you not going to have any other boxes? If so, this needs to be a class and not an id.
Instead of targeting a parent and styling the child (what happens when u want to style an element without that parent), I would just style the class on the button itself.
1st option - only one class needed in the HTML
.button1{
/* button css */
}
2nd option - id attribute needed, specific HTML hierarchy, more CSS output
#box button, .button1{
/* button css */
}
A lot of the answer as to what's "most efficient" when it comes to SASS and partials depends on what your complete SASS configuration will look like, so it's hard to say based on a specific example.
Are you going to need to use the style for this button in multiple stylesheets?
For instance, if you only have one style sheet (main.scss), I'd say there's no reason to use a partial at all. Partials should be used when you need to include the items in the partial in multiple stylesheets. Many people, for example, will write all variables and mixins in a partial and include them in every stylesheet.
Given this one specific example, the more efficient thing to do is not use a partial.
Adding a class to the button and targeting that class in the css, or targeting the container and child element (without class) is equally efficient:
#box button {}
button.button1 {}
Also, there's no reason to nest here if you don't have other rules inside of the #box parent:
#box {
button {
}
}
Just do this:
#box button {}
(And be careful with extends. If used in areas where they're not really needed, you can end up with a TON of unnecessary style rules. See this great article.)
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/