Inline link styles in CSS

**holmpage** · 04-19-2004, 07:53 PM

How do you write inline CSS styles for links to override the style specified in the global style sheet? I can apply custom styles for any other element, but haven't found the trick for links. I'm using Dreamweaver MX, but don't mind diving into the code.

**inkblot** · 04-19-2004, 08:30 PM

If I understand correctly:

Defining an inline style on a link would be like this:

Code:

link

But if you want more powerful control over the style of a hyperlink you need to use pseudoclasses. You cannot use a CSS pseudoclass in an inline style. For this you would have to either use stylesheets or an embedded style definition:

Code:

<style type="text/css">
  a {
      color: #CC0000;
  }
  a:hover {
      color: #003399;
  }
  a:visited {
      color: #996633;
  }
  a:active {
      color: #CC0000;	
  }
</style>

Hope this helps...

**holmpage** · 04-20-2004, 12:59 PM

Thanks, Inkblock, you did understand correctly, and that's just the information I was needing.

I'm having some trouble applying it, though. See http://holmpage.com/drafts/nsrmta/ - the first page has buttons defined in styles.css. Click on "Find a music teacher" and see how the embedded style definition for links in the text are overriding the styles on the buttons, even though the embedded style comes later in the code.

At the bottom of the page, I've used an inline style for the designer credit, and it worked except for font size in Netscape.

**mikmik** · 04-20-2004, 02:12 PM

holmpage , you wrote

...in styles.css. Click on "Find a music teacher" and see how the embedded style definition for links in the text are overriding the styles on the buttons, even though the embedded style comes later in the code.

Maybe this has something to do with it?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Find a music teacher in Nova Scotia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<link href="styles.css" rel="stylesheet" type="text/css">
<table width="750" border="0" align="center" cellpadding="4" cellspacing="0" bgcolor="#6633FF">
<tr>

I am not sure, though, until I download a copy of your page and look at it.
However, I will let you try that first. You should also try the '!important' declaration in your value part of the "property:value" in the style declaration (I know, to many declarations 'floating about' LOL) in the "styles.css" stylesheet, perhaps like so:
<style type="text/css">
a {
color: #CC0000 !important;
}
a:hover {
color: #003399 !important;
}
a:visited {
color: #996633!important ;
}
a:active {
color: #CC0000 !important;
}
</style>
The application of the inheritance rules (to the cascade) is problematic in IE, and can also sometimes be controled with different versions of the DTD at the top of the html document.

see: http://www.hut.fi/u/hsivonen/doctype.html
see: http://www.ozzu.com/ftopic20762.html

I just solved a similar (read almost exact!) problem on this page
with the link in the lower left corner, called appropriately enough, "music"!
It is hard to see the word 'music' in the link, sorry. What happened was that I was trying to get the link to show up against the black background - color set for the menu at right was overriding my stylesheet for the single link, and not showing as blue. I then put the grey background with an inline style, it worked, but still not the blue, by using inline stlyling.
Anyways, I just went and pet the '!important' in my stylesheet, and it worked!

Also, see the earth shattering news (for all us CSS troubled coders) called "Today is a Beautiful Day" in the Web Programming category. It works almost perfectly, effectively patching IE5.5 and 6 to apply the CSS according to standards.

I am not kidding. I used it on a page that was giving me nightmares, and as soon as I did, everything worked.

I am not kidding.

I am NOT KIDDING!

**holmpage** · 04-20-2004, 04:12 PM

Mike,

The extra link href within the <body> was just a half-assed attempt to address my problem, and I forgot to remove it. I just took it out now, and as you may have already seen, it's not the problem.

I shall study the rest of your posting... thanks.

**mikmik** · 04-20-2004, 05:58 PM

LOL I think we have all tried that 'half assed' approach out out of sheer frustration! I sure have LOFL

I will help you, I will download your page and try stuff, links are one of those mind boggling mysteries of CSS, it looks so simple, but..

Another one is trying to center nested elements. It is so strange, every once in a while, that too, just wont seem to work!!!!!!!!!!!

**G[dot]com** · 04-20-2004, 06:13 PM

Hi every one,

I see that you are dealing with this css thing. I learned a lot from the sample chapters of the book you will find here:

http://www.sitepoint.com/books/css1/

I did not purchase the book coz it is too expensive wih shipping, customs...the exchange rate you know. But maybe you guys can get it. Seems it´s worth it.

Anyway this free sample give a good introduction to the CSS world for newbies (and not so)

Hope it helps,

Gisela

Mike, who can believe you are not kidding eventhough you are being serious about something? It´s in you!

**mikmik** · 04-20-2004, 06:32 PM

You're not kidding Gisela!

Are you a member of that forum too? Sitepoint?

I am of several other, sitepoint, and devshed, and eDevCafe

I am not kidding!

Congratulations, nothing fishy about that

hahahaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

**G[dot]com** · 04-21-2004, 01:51 AM

oh no, no, no... Mik...

I am a woman of one forum only. Monogamy taught since childhood left me this way...#~"@&|@%!

I owe myself to WPW, ya know. My one and only love.

Now, the facts: by the time I crossed paths with sitepoint they had no forum at all...at least that is what I recall. It was more than 2 years ago. Then they opened the forum, the weblog and so forth...by that time I was switching my preferences from Matt Mickiewicz to Garret French...

Anyway, people should get at least their emails, they are really good, don´t you think? http://www.sitepoint.com

BTW have you heard about this site? http://www.thisistrue.com I got to know it from sitepoint´s newsletter. No waste of time. No kidding.

Arigato,

Gi

**mikmik** · 04-21-2004, 02:47 AM

Arigato?

Anime artiste?

So, do you marry these guys, or look at their forums?

I would've thought that sitepoint was for coders, and here is for SEO and marketing.

I have many sitepoint newsletters, it is good, but I like DevShed the best, for learning. project Cool, how can you go wrong with that name?

But I am thinking seniorita is loco, thisistrue is not php or anything from sitepoint, mai oui?
It is just fuuny and I may try it out.
I think that you would like the movie 'Naked Lunch'.
A Canadian Director made it, Cronenburg..Neil?

but he made The Fly, and Feffie Goldblum is a gas and a half, as the main character in it.

But do you think it is possible to fix the links, or shall we get trouble for being off topic.

http://www.podlob.com/
http://boingboing.net/

Tell me, can we make this into a contest?
http://www.mrpicassohead.com/create.html

Thread: Inline link styles in CSS

Thread Tools

Display

Inline link styles in CSS

A little help...

Similar Threads

Inline vs outbound links

Inline Styling For Hyperlinks

Center inline < li > elements

google is toying with inline ads...

inline frames .. www.limage.com

Posting Permissions