I'm working in a DNN environment where the default style sheet which every site loads sets styles for pseudo-classes. I could edit the default style sheet, but since this is stock and comes with all upgrades, I'd prefer to leave it alone and override their styles at the skin level.
Does anyone know of a solution to get all these pseudo classes to start listening to the standalone element again?
A:link
{
text-decoration: none;
color: #003366;
}
A:visited
{
text-decoration: none;
color: #003366;
}
A:hover
{
text-decoration: underline;
color: #ff0000;
}
A:active
{
text-decoration: none;
color: #003366;
}
Also, would a:hover {} always beat out selector a {} no matter how strong selector is?
EDIT:
I'm not wanting to use !important as I'll have to use important everywhere, and I don't want to embed any style to the document.
My presumption is that a:link{text-decoration:none;} will only ever be overridden with the same pseudo class and my hope is that there's a way around having to always define pseudo classes to every a tag.
If you include the declarations inside <style> tags in the HTML itself it will overwrite any styles set in external stylesheets.
Another solution is to create a second CSS document to override the existing CSS. Make sure you include this CSS file after you include the existing CSS file (for IE 6 compat). Then use the !important tag on all styles you want to override.
For more information refer to the section of the W3 specs regarding CSS cascading.
Edit: To answer your second question. a:hover{} would beat out selector a{}, but selector a:hover{} would beat out a:hover{}.
Also, would a:hover {} always beat out selector a {} no matter how strong selector is?
It depends: the more-specific selector will win in the case of conflicting attributes being set; otherwise, they will be additive. (Unless, of course, you're doing things with !important...)
I just tested the load time while using :first-child and :last-child. The difference seemed to be around 8ms for each (on my local machine) although I'm not positive on if that grows by factors the more you use.
Related
In an AngularJS application for stylesheet I don't understand where there is a space between "form.validate" and ".ng-invalid-email.ng-dirty":
<style>
form.validate .ng-invalid-required.ng-dirty {background-color: lightpink;}
form.validate .ng-invalid-email.ng-dirty {
background-color: lightgoldenrodyellow;
}
div.error { color: red; font-weight: bold;}
</style>
Any hint or help would be greatly appreciated it.
Those are css selectors.
form.validate is a selector for any form that has the .validate class on it. .ng-invalid-required.ng-dirty matches any element with both .ng-invalid-required and .ng-dirty classes on it.
It's the same as writing the following in a css file:
.class1.class2 {
color: #fff;
}
Angular will classes to elements that are in a certain state (invalid, valid, etc) and allow you to define how those states will be defined stylistically. Maybe you change the color, bold them, underline them, add an asterisk, etc. They're just hooks to simplify your life when using ng.
Because form.validate .ng-invalid-email.ng-dirty means something with both the ng-invalid-email class and the ng-dirty class on it that is inside a form with the validate class on it, which is what is wanted here.
Without the space it would select a form with all three of the validate, ng-invalid-email and ng-dirty classes on it.
The space indicates a descendant element within the selector syntax. This MDN page has more on that.
So I was tweaking the Firefox built-in reader mode using Stylish extension. The first thing I did was to change the font:
body.loaded.serif div#moz-reader-content, h1#reader-title, div#reader-credits{
font-family: "Marion";
}
It worked fine. Later on I wanted to tweak the links:
a{
text-decoration: none;
}
And the links stay unchanged. I can see in Firebug that this declaration is overriden by the default style declaration (as in "aboutReaderContent.css") which also used a single selector. Then I tried making it more specific:
html body.serif.loaded div.content div#moz-reader-content p a{
text-decoration: none;
}
Still no effect. Firebug says it was still overriden. I had to resort to !important.
My question is, why did this element does not follow the specificity rule? As I understand it, even in multiple files, browser will follow the most "specific" selector regardless the order these files are loaded. To add to my confusion, the first tweak actually overrode the default stylesheet, but that's in another file "aboutReader.css". What am I missing?
I have a blog but most text seems to get underlined automatically. I am trying to find the text-decoration: underline but I can't seem to locate it. This is my blog
www.latestforpc.com
This is the line that causes the underline but I can't find it in style.css
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Web browsers are designed to add default styling to page elements even without that styling being explicity mentioned in the page's stylesheet. In order to change this default behavior, you have to add this code to style.css:
a { text-decoration: none; }
This will overwrite the browsers default styling for your links, and in this case, remove the underline.
If you inspect a link in your browser, like you did, you can find that style, and it also shows you in which CSS file the style is declared.
In this case it says 'User agent stylesheet'. That actually means that it is a default style in your browser (the stylesheet that is built in into your user agent). So that's why you cannot find it.
Now, to fix it, you can add a rule to style.css that overrules this default style:
a {
text-decoration: none;
}
That should be enough. The styles in your css file have higher priority than the defaults of the browser.
Just add the following at the bottom of your CSS;
a {
text-decoration: none;
}
and if you want your links to appear underlined when hovering over them, also add;
a:hover {
text-decoration: underline;
}
Done!
It looks like you have multiple style sheets on your site, so that style could be in any of the style sheets. You might try adding the following in your master css file to override the other style sheets:
a { text-decoration: none !important;}
There are many "browser stylesheets" in browsers like user agent stylesheet in chrome. They are pretty good but sometimes we need to get rid of them. So we use "reset.css"
Or you can only add
* {text-decoration:none;}
if you just want to get rid of the underline
Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?
In my specific situation, I have a main style file containing:
a:link { color: black; }
a:visited { color: black; }
And I would like to have a few specific links rendered with the default colours.
EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.
Edit:
Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:
a:link { color: black; }
a:visited { color: black; }
Use the not pseudo class and write:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).
It is different for each browser.
What you would have to do is get a stylesheet from the browser you are trying to reset (Gecko, WebKit, or Trident) and make that the new default.
Source: Browsers' default CSS for HTML elements
What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.
Some day this should work everywhere:
a { color: red; }
a.reverted { color: revert; }
red <a class="reverted" href="#">default</a> red
But for now think about a workaround. The feature is just not there yet.
If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...
a:link {color: blue;}
a:visited {color: purple;}
Nowadays we can do something like this:
<head>
<style>
:link { color: black; }
:visited { color: black; }
.default-color :link { color: LinkText; }
.default-color :visited { color: VisitedText; }
</style></head>
<body>
<a href='#'>link</a>,
<span class='default-color'>
<a href='#'>link</a></span></body>
The second link renders with default colours.
See: CSS Color Module ยง System Colors
You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".
You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.
example.com/foo.php
example.com/foo.php?random=value
both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".
I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.
With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.
Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
enter code herea.class{
color:inherit;
}
Specifies that the color should be inherited from the parent element.
so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.
Your best with just customizing classes of links of special interest and leaving the rest by default.
No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.
So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.
Just style the ones you want to style by setting a class on them.
.class:link{}
.class:visited{}
Then leave the others default.
You can use this:
a {
color: inherit;
}
That will inherit, and as there is no other link color so the browser will give the link its own style!
in my html I have
<div id="mainNewsBody" class="news">
<a class="readMore" href="/News/Details/1">read more ...</a>
</div>
I tried to style read more ... snipper with this css
#mainNewsBody .news .readMore a{
color: #7F0609;
}
to actually apply this style I have to use !important keyword in color property.
I know that this !important keyword force to use that property but I do not understand why that is the case here, because I explicitly told to match on particular id with particular class element and inside that element to mach link.
Can someone englight me.
Thanks
Try this one:
.news .readMore {
color: #7F0609;
}
There's no need to call for id and class name for the same element.
It's a.readMore instead of .readMore a (the first case would search for an element with class .readMore and append the CSS to any children a-elements)
and #mainNewsBody .news should be #mainNewsBody.news (you should 'concatenate' the id and class since they refer to the same element)
making a total of #mainNewsBody.news a.readMore
Fiddle
EDIT
I see many notes on simplifying your css to just classes. This really depends on what you're trying to accomplish. If you're working with a huge CSS file, I'd recommend specifying as strict as possible. This to prevent any CSS being applied on places where you don't want it to.
a { } for example will mess with all your links, a.news { } will only mess with a class='news'
It'd the specificity which is troubling you, the more elements class id you have in your selector, more specific your selector is.
So for example
.class a {
}
is more specific than just
a {
}
Just see to it that you do not have a more specific selector, if you've than you need to make the current one more specific or use !important declaration as you stated.
In the above snippet this is incorrect
#mainNewsBody .news .readMore a
It will search for an element having class news inside an element having an id mainNewsBody which is not true in your case so either use this
#mainNewsBody a.readMore {
/* This will be more specific than the below one
as you are using id here and not class */
color: #7F0609;
}
Or use
.news a.readMore {
color: #7F0609;
}
Ozan is right, remove the "mainNewsBody" ID from the CSS if it's not absolutely necessary.
.news .readMore a{
color: #7F0609;}
If you want to be really specific and need to include the ID in the CSS selector remove the space from in-front of ".news"
#mainNewsBody.news .readMore a{
color: #7F0609;}
CSS Tricks - Multiple Class ID Selectors
CSS rules marked !important take precedence over later rules. !important ensures that this rule has precedence.
Probably your code is generating inline css for the a element, or you have another less specific definition for a element with !important keyword somewhere else.
Inline styles have priority higher than styles defined outside the element. To overcome the inline style or a style with !important keyword by a less specific definition, you need to define it by the keyword !important and a more specific definition.