applying style to links

[ron]

Hi

 

How do I take off the underline from a linked text?

 

Can anyone help?

 

Thanks

 

[tzhou]

In an external style sheet:

a {text-decoration: none;}

 

If you're embedding into your HTML:

<a href="blah" style="text-decoration: none;">text</a>

[ron]

 

Thanks tzhou for helping a dumbo like me

 

 

 

[algorythm]

just to add to that, to be more specific (in selection i mean), you can use the selectors:

a:link, a:visited, a:hover, a:active which are used for regular links, visited links, links during a mouse over event, and active links respectively.

 

doing so allows you to (for example) have an underline effect only on a mouseover event, like so:

 

a:link, a:visited {
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
a:visited {
  text-decoration:none;
}

 

there is a reason to use them in the order above (the LVHA method [for link,visited,hover,active]), as some browsers have been known to not respect the a tag css code unless they are in that order.

[Fixxer]

here is a chunk of a style sheet i use for one of my sites.

 

:link {color:red; font-family:calligrapher, comic sans ms, comic sans; font-size:14pt;}
:visited {color:red; font-family:calligrapher, comic sans ms, comic sans; font-size:14pt;}
:hover {color:silver; font-family:calligrapher, comic sans ms, comic sans; font-size:14pt; text-decoration:none;}
:active {color:red; font-family:calligrapher, comic sans ms, comic sans; font-size:14pt;}

[Guest rancid-tea]

using :hover without a selector (a for instance) can have interesting results, such as all of your paragraphs gain that format when you hover over them. This is something to keep in mind when creating your stylesheet.

[johnnyM]

One more thing, which is sometimes helpful to the site visitor...

 

on the a:visited sometimes it is visually much nicer to not have the

cursor turn into the hand (indicating a selection that is clickable) but

to keep it as (1) a pointer with a:visited { cursor: default;

and (2) a non-underlined link with the aforementioned text-decoration: none; }

combined with a slightly dimmer version of the original link color

(discernable but not obnoxiously different) all combine in a subtle way to

simplify a link list for a visitor.

 

To some this may be an odd idea, but the longer the list of links, the more

useful it can be in the right situation.

 

 

 

 

[theverychap]

Good advice from JohnnyM there too, Ron.

 

When you are restyling your links, make sure they still look like links to your visitors, otherwise folks won't know whats a hyperlink and what's normal text.

[brandonjp]

[!--quoteo(post=164502:date=Oct 7 2004, 06:47 AM:name=tzhou)--][div class=\'quotetop\']QUOTE(tzhou @ Oct 7 2004, 06:47 AM) 164502[/snapback][/div][div class=\'quotemain\'][!--quotec--]

In an external style sheet:

a {text-decoration: none;}

 

If you're embedding into your HTML:

<a href="blah" style="text-decoration: none;">text</a>

 

is there a way to use the "a:hover {text-decoration:underline;}"

embedd into the HTML?

or actually just some way to specify that i only want a certain set of links (for example, the menu) to change color and decoration when hovered over, but don't want every link to change on hover

 

[moberemk]

Yes. In CSS3, you'll be able to do <a style="::hover {style}">

A better way to do that would be to give the <a> tags you want to use a different effect on, just give them a class.

[Ninjakreborn]

Yes it's pretty easy you create an id instead of a class.

You label it as follows.

You take what section you want an id for, for instance you want to call that bar topnav you do this

.topnav

set the link attributes in an external sheet here

 

Ok after that you run the external sheet into your html, as you were told earlier, then you set the id into the tag at the beginning of the section you are using

id=".topnave"

it will style that one to taht id, and affect it only. Or you can use the # key to select sections in the external css file, I didn't have a lot of time, so if you wantme to do it for me send me a link to your external style sheet, I will set it up for you, and then show you were to put it in your html file.

 

see the post below, I just ran across this saves me the time explaining, wildteen88 set a perfect step by step explanation of all aspects of what I already told you.

 

[a href=\"http://www.phpfreaks.com/forums/index.php?showtopic=90163\" target=\"_blank\"]http://www.phpfreaks.com/forums/index.php?showtopic=90163[/a]