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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
All Courses

From novice to tech pro — start learning today.