background color for portion of text [Archive]

View Full Version : background color for portion of text

nootkan

07-25-2008, 07:28 PM

I need some help with creating a background color along with a text color and link for a block of text in my website. Here is what I tried but it didn't work for me:

<a href="#" target="_blank">sample text</a>

My style sheet has the
a:link {
color: #0000FF;
text-decoration: none;
}
a:visited {
color: #000099;
text-decoration: none;
}

a:hover {
color: #FF0000;
text-decoration: none;
}

a:active {
color: #FF00FF;
text-decoration: none;
}

for the body text of my pages, but I want this text link and other blocks of text links (yet to be determined) to be white with the background of #000099. Right now it keeps defaulting to the style sheet colors.

I'd post my url but the pages aren't published yet and reside on my hard drive still. Any ideas?

coothead

07-26-2008, 11:44 AM

Hi there nootkan,

have a look at this example, it may help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
a {
color:#00f;
text-decoration:none;
}
a:visited {
color:#009;
}

a:hover {
color:#f00;
}

a:active {
color:#f0f;
}
.blue_white {
background-color:#009;
color:#fff;
font-weight:bold;
}
</style>

</head>
<body>

<ul>
<li><a href="#">sample text one</a></li>
<li><a href="#" class="blue_white">sample text two</a></li>
<li><a href="#">sample text three</a></li>
<li><a href="#" class="blue_white">sample text four</a></li>
</ul>

</body>
</html>

coothead

TheJoshMan

07-27-2008, 05:29 AM

<a href="#" target="_blank">sample text</a>

The highlighted section of your code is erroneous.

First of all, when you define the "style" of something in your HTML, the proper format is:



Once you set the "style" attribute by opening the double quotes, then you use colons and semi-colons until you close the style attribute with another set of double quotes.

Also, when defining a font color using CSS... The term "font-color" is not proper code and is not widely recognized. The proper way to word this would simply be:



Hope this helped.

Medyman

07-28-2008, 02:07 PM

Also, when defining a font color using CSS... The term "font-color" is not proper code and is not widely recognized. The proper way to word this would simply be:

Not widely recognized gives the impression that it is usable in some instances. It is not. As Nyne Lyves correctly points out, the way to define color for text is by defining it's "color" property.

Also, note that background-color IS valid. If you're defining CSS styles elsewhere, it might be more "friendly" to use background-color. Using the shortcut "background" style overwrites other background related styles previously set. So, for example, if you've set the background-image, background-position, background-repeat, background-color, etc...they'll be reset.

TheJoshMan

07-28-2008, 08:36 PM

Not widely recognized gives the impression that it is usable in some instances. It is not.

Haha, I suppose I should've done some "research" before I replied to that post... I know I'd never seen it used, but I didn't take the time to look it up and see if it was valid at all.

Thanks medyman for clarifying.

nootkan

07-29-2008, 06:17 AM

;) Thanks for the replies. I am on the road right now and will give your suggestions a try when I can find the time. Thanks again.
Nootkan

nootkan

08-01-2008, 07:06 AM

Okay I tried all suggestions and nothing worked. coothead, your'e suggestion got everything right except the hyperlink wasn't white it was blue. Also I didn't use the <ul> tag as my text is inside a tag.

What I'm trying to do is put the first word or words of the paragraph into a colored box that is a hyperlink to that page that the paragraph defines. My body is white which is why I'm looking to match the dark blue color of my nav bar on the left side of my page. Hopefully this explains a little better what I'm trying to do.

PS: I'm trying to re-create an existing site using css instead of the frames it was built with. I'd show you a link to the existing site, however I'm a little embarrassed as it is a mess.
Nootkan

TheJoshMan

08-01-2008, 08:01 PM

no reason to be embarrassed, most sites are ugly until they are finished.

Also, it would be much easier to fix your issue if we could see it first hand.