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:

Code:

<span style="background-color:#000099" font-color="FFFFFF"><a href="#" target="_blank"><strong>sample text</strong></a></span>

My style sheet has the

Code:

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...

Code:


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

Originally Posted by nootkan

Code:

<span style="background-color:#000099" font-color="FFFFFF"><a href="#" target="_blank"><strong>sample text</strong></a></span>

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:

Code:

<span style="background: #000099; color: #FFFFFF;">

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:

Code:

<span style="background: #000099; color: #FFFFFF;">

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

Originally Posted by Medyman

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 <p> 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.

Thread: background color for portion of text

Thread Tools

Search Thread

background color for portion of text

The Following User Says Thank You to Medyman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions