It is working when i apply it as inline style.
<div id="footer">#Copyright 2012</div>
#footer
{
background-color:Black;
color:Silver;
width:100%;
text-align:center;
position:absolute;
bottom:0;
}
Look with Firebug which style is winning over your.
Please note that the order of declaration of your CSSs in your page matters, last win.
So you probably have another #footer rule in another stylesheet loaded after your.
Related
I have mixins for red button
e.g.
.btnRed{
background:red;
color:white;
border-radius:3px;
min-width:200px;
font-size:18px;
}
I use it to style my main buttons , but for one I overwrite min-width and font-size:
.class1{
.btnRed;
min-width:0;
font-size:25px;
}
When I check it in firebug I get this result:
.class1{
background:red;
color:white;
border-radius:3px;
min-width:200px;
font-size:18px
}
.class1{
min-width:0;
font-size:25px;
}
and added styles are ignored.
So my question is:
how can I combine mixins and new added styles in one class1 and make added styles important without declaring !important.
I've tested your LESS and all seems to be fine.
When applying class1 on elements I've got the overridden values.
See this working example.
So my guess would be that your problem lies somewhere else
I have a browser extension that adds a div element (and others) to the page. Is there a way to make sure that the page styles don't affect the styles within my added element?
I've considered making it an iframe, but would prefer not to make the extra call. Making sure to overwrite every single possible style also seems a bit much, although my added information is just basic text and links.
I noticed you said you'd prefer not to use every style but I figured I should mention it here in case it helps someone else. Basically this is a class that can remove most inherited/predefined attributes. You can just add the class to any element you would want to exclude. Here is an example:
.reset {
background:none;
border:none;
bottom:auto;
clear:none;
cursor:default;
float:none;
font-size:medium;
font-style:normal;
font-weight:normal;
height:auto;
left:auto;
letter-spacing:normal;
line-height:normal;
max-height:none;
max-width:none;
min-height:0;
min-width:0;
overflow:visible;
position:static;
right:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
top:auto;
visibility:visible;
white-space:normal;
width:auto;
z-index:auto;
}
Now just add "reset" and it should set it back to normal. You can then define styles below that line and they will override the styles in the reset class.
You could also add a wildcard selector to the reset class so that is targets the element's children as well.
.reset,
.reset * { /*...etc */ }
NOTE: Wildcards are supported by IE8+, so if you are working on IE7 or lower - no dice.
Is there a way to mark a CSS rule as less important, such that it doesn't override a subsequent rule even if the first rule has higher specifically? For example, say I have the following in my CSS file:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
The idea I was going for is that all text input fields that are children of the div "inputDiv" get a width of 125px, except for certain specific inputs that get some other width. The problem is that the first declaration overrides the specific item declarations.
I've tried the following:
Append !important to each of the specific widths. Works, but many claim (rightly, I think) that !important should be avoided, and it is rather cumbersome as it must be added to each element with a specific width.
Prepend #inputDiv to each of the specific selectors, i.e. #inputDiv #differentInput1 Again, works, and avoids the issues with using !important, but still cumbersome as it has to be done to each element.
Is there any way to simply say that the items in the first declaration are less important, and shouldn't override anything?
There's no way to do this since it's antithetical to CSS in the same way that !important is -- doing the opposite would be just as abusive. Your only option is to rely on selector specificity. You can write this in a way that is not as cumbersome by using a class for inputDiv instead of an ID, for example.
maybe a way to solve you problem or answer your question you could try something like this
(http://jsfiddle.net/6aAF5/)
<div class="inputDiv big"> BIG</div>
<div class="inputDiv middle"> MIDDLE</div>
<div class="inputDiv small"> small</div>
<p>
<div class="inputDiv"> normal</div>
</p>
<style type="text/css">
.inputDiv {
background-color:green;
width:200px;
height:20px;
}
.inputDiv.big {
background-color:red;
width:400px;
}
.inputDiv.middle {
background-color:lime;
width:100px;
}
.inputDiv.small {
background-color:orange;
width:50px;
}
</style>
and little explanation about the !important
!important in a css file is used to override styles which are defind directly in the html.
this means if you have
<div class="isItImportant" style="background-color:red;width:100px;height:100px;"></div>
<style type="text/css">
/* this changes the styling */
.isItImportant {
background-color:green !important;
}
/* this doesn't change anything */
.isItImportant {
background-color:fuchsia;
}
</style>
(http://jsfiddle.net/6aAF5/2/)
You can avoid these issues by being smarter about your selectors, as others have noted. As a best practice, avoid IDs whenever possible, and try to use just one or two selectors for any given set of styling.
For example, rather than:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
You might try doing this:
input[type="text"]{
width:125px;
}
.differentInput1{
width:25px;
}
.differentInput2{
width:500px;
}
If you need more specificity than that, something like this would also work:
.inputDiv input[type="text"]{
width:125px;
}
.inputDiv .differentInput1{
width:25px;
}
.inputDiv .differentInput2{
width:500px;
}
Ultimately though, you want consistent styling throughout your site, so you shouldn't need to get so granular. You might want to look into OOCSS, which was great in helping me write lighter-weight, more scalable CSS.
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
http://oocss.org/
Well, there are some ways to achieve what you want to (if you don't want to do a lot of change),
Change your div id="inputDiv" to a class name class="inputDiv", and change your css selector to .inputDiv. This way your 1st declaration won't override your proceeding declarations.
Use LESS or SASS, which allow you to namespace css rules.
And lastly, You can override the (unwanted) styles using jQuery, but it's an unnecessary overhead.
PS: Being descriptive in CSS is rather helpful although it's cumbersome.
I am trying to figure out how to target only the first that resides within a on one of my pages...
Maybe I am doing something wrong, looking for help.
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
In my CSS, I have the following code:
#mem-tools a{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
however, I only want the first to be styled this way, and not the second within the .members class
From what I understand psuedo classes do not work for IE, so I an not use :nth selector.
Can I define the first only, to use the above noted style?
Am I over complicating this?
The :first-child would work, but if you don't want to use pseudos can also create a class to style the element... might be eaiser:
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
Then you can style the class accordingly:
#mem-tools a.first-link{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
That way you can avoid pseudos.
#mem-tools a:first-child might do the trick
.mem-tools +a {
/*
try your Styles here
*/
}
There are 2 methods for external css assignments.I am using the first method; most websites use the second method. I wonder whether I am doing it wrong!
Fisrt method:
Create a class for almost each & every css rule and use them anywhere.
<div class="f_left d_iblock">
<span class="w_100 f_left">blah blah</span>
</div>
.f_left{
float:left;
}
.f_right{
float:right;
}
.d_block{
display:block;
}
.w_100{
width:100%;
}
....
....
Second method:
Create css rules for each element.
<div id="container">
<span>blah blah</span>
</div>
#container{
float:left;
display:inline-block;
}
#container span{
width:100%;
float:left;
font-weight:bold;
}
In general I am using the first method. I am choosing this method because this provides the following to me.
Small css files hence provide less load time.
Reusable css rules.
Clear code hence CSS management is more easier than second method.
I don't need to create an id or class attribute but only assign css rules. So I don't need to think of a name for each element :)
I think browsers can interpret css rules fast so this enhances the performance.
I see most sites generally don't use this method most and I am starting to think that I need to strive to improve performance, but I am bulking html files instead of css with writing 3 to 4 css rule names to each element.
Note:I know little English. I hope you can understand me. I will be happy if you can write simple sentences :)
The main reason not to do it the first way is that it doesn't separate presentation from content: your HTML elements will look like <span class="f_left d_block w_100">, with the presentation embedded into the HTML itself. The whole point of CSS is to remove the presentation from the HTML so you can write <span class="product-list-description"> in HTML and then define the style in CSS.
The first method allows perhaps fewer CSS rules which can be re-used on lots of different elements, but it forces you to change your HTML whenever you want to change presentation. For example, if you have lots of elements with the same CSS rules applied, if you want to change how they look you'll have to change the HTML for every one of those elements. This is a lot of work and is prone to errors. With the second method, you'd have a CSS rule that applies to all those elements, and to change their presentation you only have to change the rule. In most projects this is a significant advantage.
Your both method is not so good yet. you can write second method like this:
#container{
float:left;
}
#container span{
display:block;
font-weight:bold;
}
But your approach for creating a separate class for every property is not good.
There are some good article you have to read about check these
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.mozilla.org/en/Writing_Efficient_CSS
UPDATED
Why your approach is not good suppose i have three different element there most of the property is same but are different.
For Example:
.one{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:18px;
color:#000;
line-height:1.5;
}
.three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:13px;
color:#000;
line-height:1.5;
}
You can write this in a better way which decrease your CSS file size. Write like this:
.one, .two, .three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
font-size:18px;
}
.three{
font-size:13px;
}
So, if i go through your approach i have to define each property separately, it's time consuming & heavy also.