I'm trying to make a pseudo link class with the CSS3 text-shadow for both navigation and normal use of links.
The problem is that the state "a:hover" is overruling "a:visited" so when doing a mouseover on the link that previously has been visited, it outputs different that it should.
If the a:visited state isn't present in the CSS the color of the visited links will turn into the standard purple color, which I don't like it to.
Have a look at the site: www.sayhi.dk
The code looks like this:
HTML
<a class="lnk" href="http://www.twitter.com/sayhidk">#Sayhi.dk</a>
CSS
a.lnk:link {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
a.lnk:hover {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow: 1px 1px #7c7565;
color:#ffffff;
}
a.lnk:visited {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:#ffffff 1px 1px 1px;
color:#7c7565;
text-decoration:none;
}
a.lnk:active {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
Hope that you guys can help me out.
In your example, specifying 'color' in the :visited style is sufficient.
Edit: the solution was to put a.lnk:visited before a.lnk:hover.
This may or may not help, but I never define a:link styles. I instead define an "a" style (no pseudo class), and styles get inherited nicely. Then I define :hover, :active, etc... And if I do not define one for a particular style, the catch-all "a" style gets applied.
It is also good practice to define a :hover as well as a :focus. They can be the same style if you like. The :focus is used in a limited way by the iOS and handicapped users who don't use a mouse but use a keyboard to navigate.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Back to basics, I have neglected my CSS skills thus my CSS is a bit (very) rusty I'm working on a wordpress theme. The style.css themes default H2 style is coded as follows:
h2 {
font-size:1.7em;
background:url(images/heading_bg.gif) repeat top;
color: #fff;
padding:6px;
border-bottom:3px solid #e40001;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
font-weight:normal;
}
This result in any <h2> tag inserted into a post looking like this:
This provides a nice look in the theme however in certain situations I would just like to have a basic unstyled <h2> tag thus I created the following class:
.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
MY Problem - What I want to Achieve
I would like to overwrite the default <h2> style of the theme in certain situations however if I add the above class to any <h2> tag the .normal class is ignored and it keeps on displaying the normal h2 rule....why is this? What am I missing? How can I overwrite the default h2 style at certain types?
This the snippet I worked out. Doesn't seems a problem to me. Go through this code carefully.
PS: color="red"; is wrong. Use
when you want to override some element, you gotta look at the rules used in that element. ie, you gotta remove the background if any, change margin, paddings etc.
color:red;
h2 {
font-size: 1.7em;
background: url(http://i.stack.imgur.com/pOVzy.jpg) repeat top;
color: #fff;
padding: 6px;
border-bottom: 3px solid #e40001;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
}
.normal {
font-size: 1.4em;
font-weight: bold;
color: red;
font-family: 'Oswald', sans-serif;
background: none;
}
<h2>
hello
</h2>
<h2 class="normal">
Hello World
</h2>
You should mention all css properties of h2 in your .normal class, thus it will be something like this:
.normal {
font-size:1.4em;
background:none;
color: #FF0000;
padding:0px;
border-bottom:none;
text-transform:initial;
font-family: 'Oswald', sans-serif;
font-weight: bold;
}
you can use the below code:
h2.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
which means h2 has a class normal then overwrite the styling
You may do one of these:
use .normal selector after h2 in your css file (assuming they have same specificity)
use !important in your .normal decleration
.normal{ propert: value !important; }
add some specifity to the .normal selector like:
h2.normal{ bla bla ...}
This question was probably asked tons of times already, and i know that photoshop renders text completely differently from browsers, but perhaps some css guru could help me get this text to looks as much close to how it looks in PS as possible:
The most closest i got is:
color: #666;
font-size: 11px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: bold;
But it looks to bold, and if i remove bold it's to thin...
Try using text-shadow property to anti-alias your font and can give boldness a lil without using font-weight: bold; and you can add letter-spacing too like this : My Fiddle
HTML
<div class="demo">Music 1</div>
CSS
.demo {
color: #515151;
font-size: 11px;
font-family: arial,sans-serif;
text-shadow: 1px 1px 1px #515151;
letter-spacing: .1em;
}
In order to create a less shadowy, more bold/sharp effect, you could try using multiple short-distance shadows as an alternative:
text-shadow: 0 0 .1px, 0 0 .1px, 0 0 .1px;
However, this will most likely be a performance hog when used on larger piles of text.
Yahoo keeps inserting blue dotted links within our HTML emails on plain text within a <p> tag. It seems to be doing this to locations mostly.
I've tried to override this using inline styles like:
style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt; text-decoration:none; outline: none; -moz-outline-style: none;"
I've done a bit of research on this and it seems like it may not be possible to remove them, but I'm just looking to confirm that.
Have you tried adding the following to the CSS before </head>:
.yshortcuts {border-bottom: none !important; color: #000000 !important}
There is a little bit more info on this over at Exact Target's blog.
I can not figure out why the below css will not do what it appears to do, if anyone can explain why or help show what I am doing wrong, would greatly appreciate.
<style>
.button-blue a:link{
text-decoration: underline overline; color: red!;
background: #55a4f2!;
padding: 12px 24px!;
-webkit-border-radius: 6px!;
-moz-border-radius: 6px!;
border-radius: 6px!;
color: white!;
font-size: 16px!;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif!;
text-decoration: none!;
vertical-align: middle!;
font-weight:bold!;
}
.button-blue a:hover {
background: #1071d1;
color: #fff;
}
.button-blue a:active {
background: #3e779d;
}
</style>
<div class="button-blue">
Post Comment
</div>
<span class="button-blue">
Post Comment
</span>
http://jsbin.com/etijiz
It doesn't do what you expect it to do because you have syntax errors. You appear to have used ! instead of !important. If you remove the exclamation marks it will look a little more like you expected it to.
Generally it is a bad idea to use !important and if you find yourself using it you probably need to refactor something. It would be a good idea to learn more about how CSS selector specificity works.
Basically it's because you're applying the style to the span/div and not the anchor and a span/div doesn't have an a.hover etc etc.
A quick test by removing the .blue-button from each of the a: style definitions shows it working more correctly.
Here's the fiddle I set up based on your sample.
http://jsfiddle.net/tS9vt/
Added a comment with a new link showing better behaviour without the exclamation marks.
Edit: here's that link http://jsfiddle.net/LuaAv/
I'm trying to get a button which looks exactly the same whether it is enabled or disabled, but whenever I disable the button it seems to ignore any font styles I have set. This seems to be the case in IE but not other browsers.
So does anybody know the CSS to change a disabled button so that the font is not embossed?
Thanks in advance,
Chris
[Edit]
The CSS is as follows:
.Button
{
background-color:#332F27;
border-bottom-color:#1B1B1B;
border-top-color:#3B3B3B;
border-left-color:#3B3B3B;
border-right-color:#0C0C0C;
color:Black;
font-style:normal;
}
The button has the attribute Class="Button"
[/Edit]
If you are changing the disabled property of the button then you won't be able to get the feel and look of a normal button with CSS which will work in all browsers.
The easiest way is to add another button with no click event attached to it and set this button's display to inline and hide the original one.
If you still want to use CSS for this you can refer this link.
Styling disabled form controls with CSS
//You use this css it helps u
font-weight: bold;
border-right: #3C8FD1 1px solid;
border-top: #3C8FD1 1px solid;
border-left: #3C8FD1 1px solid;
border-bottom: #3C8FD1 1px solid;
font-size: 10px;
color: #045FA7;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-image: url(../App_Images/cssbuttonbg.gif);
line-height: 14px;