[thelist] css help

Sat Oct 4 20:53:40 CDT 2003

At 14:49 10/04/03 -0700, bruce wrote:
>a have a quick/short question!!! i'm trying to create a simple rectangle
>with some text inside it. i'd like to assign a background color to the
>rectangle and a different color to the text. should be simple, right...??!!
>i'm trying to do this using CSS...

>{snip}
>
>the rectangle would have a backgroung color, the text would be a color. as
>the user selects/hoovers over the text, the text color would change, etc....
>
>any help would be greatly appreciated....!!!!!!!!

Quick and Dirty: It validates, but I'm not one of the list experts, so use 
at your own discretion!  ;-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Quick and Dirty</title>

<style type="text/css">

     .textbox {
    color : black;
    background : #ddd;
    margin : 1em 0;
    padding : 1em;
    border-width : thin;
    border-style : solid;
    border-color : black;
}
.textbox a:hover {
     color: Silver;
     background-color: Yellow;
}
     </style>
</head>
<body>
<p class="textbox">This is a sample paragraph with a <a 
href="http://www.google.com">link to Google</a> to show how the hover 
effect works.</p>
</body>
</html>

==================================
PS: If that version doesn't work in your email client, this one might show 
up... you will have to repair the less-than signs with a search and replace...
==================================

[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
[html>
[head>
[title>Quick and Dirty[/title>

[style type="text/css">

     .textbox {
    color : black;
    background : #ddd;
    margin : 1em 0;
    padding : 1em;
    border-width : thin;
    border-style : solid;
    border-color : black;
}
.textbox a:hover {
     color: Silver;
     background-color: Yellow;
}
     [/style>
[/head>
[body>
[p class="textbox">This is a sample paragraph with a [a 
href="http://www.google.com">link to Google[/a> to show how the hover 
effect works.[/p>
[/body>
[/html>