How to add background color to a specific area

Greetings,

I am new to html and I need to add background color (lime green) to the box below.  I believe this would be the code as it stands now:

      <tr>
        <td colspan="2" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-bottom: 15px; padding-top: 15px;">
           $TEXT</td>
      </tr>
      <tr style="background-color:#BBBBBB; height:1px;">

Would I replace the  :#BBBBBB  with  #00FF00  or does this color apply to something else?

Thanks


text-box.JPG
John500Asked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
you need to apply:
style="background-color:#BBBBBB; height:1px;"

to the  that contains the text you want colored:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
</head>
<body>
<table summary=""> 
 <tr style="background-color:#32cd32;">
        <td colspan="2" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-bottom: 15px; padding-top: 15px;">
           $TEXT
	   </td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
hieloCommented:
>>Would I replace the  :#BBBBBB  with  #00FF00  or does this color apply to something else?
Yes.

It applies to the background of the row.
0
 
hieloCommented:
BTW:
#00FF00 is green.

limegreen is more like:
#32cd32
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
John500Author Commented:
I just tried it and the only thing that gets colored is the bottom line.  The line is still grey but behind the line is green.

How would the whole box get the color?

Thanks
0
 
John500Author Commented:
Actually I'd like to try two ways:

1)  change the $TEXT color to lime green
2)  change background color of the box lime green
0
 
hieloCommented:
change the background => style="background-color:#32cd32;"

change the text color => style="color:#32cd32;"
0
 
TunaMaxxCommented:
The way you have it, the green background would start in the NEXT table row (<TR>) element, and then that row would only be 1 pixel tall.

Just replace your FIRST <TR> in your provided code with your LAST <TR> statement, and ditch the 'height: 1px;' like this:

 
<tr style="background-color:#BBBBBB;>
    <td colspan="2" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-bottom: 15px; padding-top: 15px;">$TEXT</td>
</tr>
<tr style="background-color:#BBBBBB; height:1px;">

Open in new window

0
 
John500Author Commented:
Ok, and finally - if I were to test these options statically would I just remove the $TEXT and replace it with something within quotes - or what?

Thanks!
0
 
hieloCommented:
just replace $TEXT with the content. Quotes are not necessary:

 <tr style="background-color:#32cd32;">
        <td colspan="2" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-bottom: 15px; padding-top: 15px;">
           Hello there
         </td>
  </tr>

Open in new window

0
 
John500Author Commented:
Thank you sir ....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.