I currently use these:
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
Codes from a .css file called layout.css, I use them for my navigation bar.
Now I have a link which I don't want to use the .css for, I need to do something with classes I think, but can't get it to work.
I tried doing:
a.not
{
/*nothing*/
}
And then putting class="not" inside the link tag, but the link still uses the same style as the menu instead of the standard blue link.
I am not good with .css, so that must be why I can't get it to work.
Does anyone know how to solve this?
Thanks in advance!
You can use the :not() selector.
a:link:not(.not), a:visited:not(.not)
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover:not(.not),a:active:not(.not)
{
background-color:#7A991A;
}
This
a.not
{
/*nothing*/
}
does not overwrite previously set styles.
Rather, you must reset the values yourself. And that's a tedious process. Another approach is to use a basic style for all a elements, then create two classes that style any non-basic a elements accordingly.
Related
a{
text-decoration:none;
color:#666;
border-left:2px solid grey;
padding-left:10px;
}
li{
display:inline;
margin-left:10px;
color:grey;
}
i have written this code in "style tag" but the same code is applying on all links, i aslo made separate divs and classes and please tell me some way to use this code for different classes with different value like in one links div i want that code, but in other links div i don't want the border left and color= grey,,,but if i chnage it then the change will also occur at other places please tell me something better?
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.
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.
I have default properties defined for my links like this:
a{
color: blue;
}
a:hover{
color: red;
}
The problem is that I lose the all the hover properties when I do something like this:
#header a{
color: gray;
}
So to keep the hover working as I defined it before in the defaults, I'd have to declare it again:
#header a:hover{
color: red;
}
Is there any way to do this without loosing the original hover action defined?
Unfortunately, if you want it to work in all browsers, you'll have to override it.
a { color:blue; }
a:hover { color:red; }
#header a { color:grey; }
#header a:hover { color:red; }
Example.
Alternatively, you can make use of !important. Usually this is a sign that something weird is going on in your css, but this seems to be the only alternative to duplicating your css.
a { color:blue; }
a:hover { color:red !important; }
#header a:hover { color:red; }
Example.
You could also make use of a css compiler such as sass or less which would let you write it in a manor where you aren't duplicating effort - but that's beyond the scope of this question.
You're over-riding the styles with a cascade. Putting "#header a" gives that style more weight than the original style. You can over-ride it with a !important (although I wouldn't recommend it). Here's an article that explains this concept.
One way you can do this is to specify the default style as !important.
Using !important is usually a sure fire sign that your code can be improved however in this context, and without re-defining the styles, it seems like the best choice (best I know of right now).
a:hover{
color:blue !important;
}
Working Example
Also note that if you do go down the route of using the specific selector that you can combine both selectors together to reduce code duplication.
a:hover, #header a:hover{ color: red;}