Jump to content

applying style to links


ron

Recommended Posts

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.

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...

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.

 

 

 

 

Link to comment
Share on other sites

  • 1 year later...

[!--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

 

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.