CSS - Setting Link Styles For Headings As Links

Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.)

In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally.

Right now I've got

Code:

.leftnavtext A:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext A:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: underline;
}
.leftnavtext A:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}

And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks.

Hi, I am having trouble setting up different link styles in my site.

My code is:

Code:

.menu {
	font-family: Helvetica;
	font-size: 18px;
	color: #FFFFFF;
	
}

a.menu:link {
	color : #FFFFFF;
	text-decoration : none;
}

a.menu:visited {
	color : #FFFFFF;
	text-decoration : none;
}

a.menu:hover {
	color : #FFFFFF;
	text-decoration : underline;
}




a:link {
	color : #FFFFFF;
	text-decoration : underline;
}

a:visited {
	color : #FFFFFF;
	text-decoration : underline;
}

a:hover {
	color : #FFFFFF;
	font-weight : bold;
	text-decoration : underline;
}

From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class.

So when I use the following code:

<div class="menu"><I>01</I> &nbsp; <a href="">HOME</a></div>

.. I would have thought the link would follow the style for .menu

But it doesn't. It takes the style of the default links as well.

How do I properly setup an alternate link style??

Does anyone know if there is a css property that applies to links that are linked to anchored tags on the page?

Can there be a selector just for links that go to an anchor tag?
I don't want to use a seperate class for only those links.

thanks

Hi there,

If i have a css class called td.header_menul how do i change the link colour for this class?

I know how to change normal link colours but how do i change them to that specific one?

Thanks!

I need to create signature files for (Outlook) for my group. Until 2 days ago I knew nothing about css but I am learning. Coz Outlook only picks up the body from an html file I cannot use external css sheets, so all coding must be done inline. Only thing I can't figure out is the style for a weblink.

Here's s snip of the relevant line:
<a href="http://www.blabla.com.au" style="font: bold 8pt arial,sans-serif">
<span style="color:#ef812a; font-decoration: underline">www.blabla.com.au</span></a>

The code (probably shabby) renders fine in Dreamweaver, but the sig in Outlook the underline shows blue - I want the underline for any link (visited, not visited) to show as #ef812a which is sort of orange. I can't figure out how to insert the a:link etc stuff.

Thanks
James

I have 2 content areas. One with id sidebar2 and another with id maincontent.

I want the links in these separate content areas to have different hover colors and possibly other characteristics.

My problem is, the styles for sidebar2 are being overwritten by the styles in maincontent as it is below it in the style sheet (cascade).

The hover of the words "Good Game" in this example is green which clashes with the background of the sidebars content. It should be a blue color.

Why does a completely separate id overwrite the styling in a previous id? How can I improve this code to get the desired results.

Line numbers eg (line 140) are just referencing where the code appears within the stylesheet and are not actually in the css sheet.

HTML example:

<div id="sidebar2">
<h1>Daily Content</h1>
<ul>
<li>
<a href="(URL)">Good Game</a>
</li></ul>
</div>


#sidebar2 li a:link, li a:visited (line 140)

{

text-decoration: none;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #336699;

}

#sidebar2 li a:active, li a:hover (line 148)

{

text-decoration: none;
color: #2986aa;
text-indent: 5px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;

}

#mainContent a:link, li a:visited (line 157)

{

text-decoration: none;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #003366;

}

#mainContent li a:active, li a:hover (line 166)

{

text-decoration: none;

color: #99cc66;
text-indent: 5px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;

}

My link hover style isn't happening consistently in either browser. It seems to work better in FF than in IE7. Does anyone have a clue as to what I could look at to see what is causing this?

All my navbar links behave just fine...

URL removed

Thanks!

Hi all. I am in the process of re-coding some beautiful email templates that were pure CSS layouts into nasty HTML nested tables so our clients can still see our newsletter when viewing them in Web based email browsers like Yahoo, GMail, etc. (since these often strip out our CSS sections)

Typically we would define our link styles in CSS using something like: PHP Code:
 a, a:link, a:visited {
        color: #BF28B2;
        text-decoration: none;
        font-weight: bold;
} 



I just realized I am not sure how to represent the same style when using inline styles such as <span style='...'>text</span>. Just what can I do to modify the link styles using inline styles?

Thanks

Hi there,

Is it possible to have the same name for a link style to a text style?

For example:

a.small:link{....

and

.small{...

Many thanks!

I am trying to use the following in my external style sheet for my links:

Code:

a:link, a:visited{
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

}

a:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

}

a.big {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;

}

a.big:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;

}

a.bigger {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;

}

a.bigger:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}

My problem is that I can't get big & bigger to work properly in Internet explorer. When I hover over the link it goes to its proper size but when not hovering it stays at 11px.

hi guys,

I'm sure this is an easy fix but it's driving my little non-technical mind nuts...

I have an external style sheet for a site, and it appears to be linked correctly as altering it does affect the text in my site.

HOWEVER, the elements I've included to keep web links displaying as normal text aren't working (visited, hover, active, etc etc)

Please help.

Code below.

.main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
link {text-decoration: none;
visited {text-decoration: none;
hover {text-decoration: none;
active {text-decoration: none;
}

Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks.

P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-)

I need some really rediculous link styles, like all of the cool fading/pixelating ones that work on IE - but I can't find any for Firefox. Does anyone know if they exist, or where to find them?

Hey all,

So i have two files my html file:
Code:

 
<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<a href="#">this is a test</a>

</body>
</html>

And my css file:
Code:

a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}

except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me?

thanks!
- legit


Edit, whoops sorry, I had the wrong name for my css file

Hi

I'm putting together help documentation for an application and I would like the structure of the document to have all headings and sub headings to be dynamically numbered, for example:

1. Main
1.1. Sub1
1.2. Sub2
2. Main
2.1 Sub1
etc

I've read about the pseudo class :before, but understand that this isn't supported by Explorer, or else I could use:

BODY {
counter-reset: chapter; /* Create a chapter counter scope */
font-family:Arial, Helvetica, sans-serif;
}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
}
H1 {
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}

Could anyone help with any suggestions as to how I could do this please?


Thanks
Sophie