CSS and Hyperlinks [Archive]

kirupa

January 21st, 2004, 03:25 PM

Hey everyone,
I am slowly trying to get all the text formatting on the site linked to a style sheet. I do have one major question that has been bugging. It has to do with hyperlinks.

Seems like creating a CSS style for the hyperlink causes all hyperlinks to have the same properties. Applying any CSS style to a hyperlink doesn't seem to work either.

Here is a URL:
http://www.kirupa.com/temp/css.htm

Is there any CSS-based solution besides having to manually specify the font style and size for the supporting hyperlink?

EDIT: In the official version, the styles will be in a stylesheet file :)

Cheers!
Kirupa :cap:

January 21st, 2004, 03:49 PM

hey kirupa :)

You can apply custom styles to a hyperlink by defining them in a class:

<style type="text/css">
.supportLink {
font-family:Verdana, sans-serif;
font-size:8pt;
color:#666;
}
</style>

Then you would change all the supporting links to:

<a href="bla.html">hey</a>
to
<a class="supportLink" href="bla.html">hey</a>

January 21st, 2004, 03:53 PM

quick example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.supportLink {
font-family:Verdana, sans-serif;
font-size:8pt;
color:#666;
font-weight:bold;
}
a {
text-decoration: none;
font-size: 10pt;
font-family: Arial;
color: #036;
font-weight: bold;
}
</style>
</head>

<body>
<a href="#">hello</a><br />
<a href="#" class="supportLink">hello</a>
</body>
</html>

senocular

January 21st, 2004, 04:02 PM

you can also specify pseudo elements for your classes i.e. separate link, hover, and visited for classes

<style>
a.supportLink:link {
text-decoration: none;
color: #003366;
}
a.supportLink:visited {
text-decoration: none;
border-bottom: 1px dotted #002050;
color: #002050;
}
a.supportLink:hover {
text-decoration: underline;
color: #005080;
}
a.supportLink:active {
text-decoration: none;
color: #006699;
}
</style>

kirupa

January 21st, 2004, 04:58 PM

Thanks a lot! This rocks :)

kirupa

January 21st, 2004, 07:29 PM

And I tried this out - and it all works well also. I'm hoping to have the home page's text styles be defined in an external CSS style in a few hours :)

EDIT: Thanks again sen/njs! The entire home page's text formatting is entirely defined in a stylesheet :D

January 22nd, 2004, 02:44 AM

cool... no one likes font tags :)

January 22nd, 2004, 11:53 AM

A quick point ;): Points are considered fairly evil to use. They render inconsistently across platforms, and are inaccessible because they can't be resized in IE. It's a lot better to use ems/exs/keywords for CSS font sizing than points(pixels are better than points because they render consistently, but still aren't accessible - you can't resize them in IE)

this is what points render like on some platforms, for example:

http://style.cleverchimp.com/font_size/points/font_wars.GIF

senocular

January 22nd, 2004, 12:31 PM

what is that, IE 3? :P

January 22nd, 2004, 01:39 PM

Still relevant ;)

[m]

January 24th, 2004, 01:14 PM

Hahaha... riiiiight. ;)

January 24th, 2004, 03:39 PM

it still is relevant :P
Points are bad because:

a. In IE, unless you have checked a specific option, you can't resize them.
b. There's no guarantee of how they'll work crossplatform, as they depend on the dpi.