CODEWITHSUNDEEP
html
nmakb
nmakb

Reputation: 1245

how to change color of 2nd heading in html

I have an html page which starts with a header followed by a table and second header followed by a second table. The first header is red in color, I want to get second header in say green color. I am trying to use the same text/css which is setting red color, but doesn't seem to work the way I am setting. Putting another style in green just before the second header is also setting the first header to green. Please help.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="generator" content="SQL*Plus 19.7.0">
<TITLE>GG - Missing Index</TITLE>  <STYLE type='text/css'>

BODY{
  background:white;
  text-align:Left;
  font-family:calibri;
  font-size:20px;
  border:1px solid black;
  font-weight:bold;
  color:red;
  }


TH{
  background: gold;
  color:black;
  font-family:calibri;
  font-size:11px;
  border:1px solid black;
  }


TD {background: white;color:#000000;font-family:calibri;font-size:11px;border:1px solid lightgrey;text-align:justify;} -->  <!-- TR {valign:top;} -->  <!-- P {background: white;color:RED} -->


#Red_Header{
color: red;

}

  </STYLE>
</head>
<body color='white'>
<br>
<br>
Heading 1
<br>
<br>
<table BORDER='1' cellspacing='1' cellpadding='1' width='50%' >
<table> <tr><th scope="col">PDB</th><th scope="col">SCHEMA_NAME</th><th scope="col">TABLE_NAME</th><th scope="col">INDEX</th></tr></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> </table></table>
 <STYLE type='text/css'>  <!-- BODY {background:white;text-align:Left;font-family:calibri;font-size:20px;border:1px solid black;font-weight:bold;color:green} -->  <!-- TH {background: gold;color:black;font-family:calibri;font-size:11px;border:1px solid black;} -->  <!-- TD {background: white;color:#000000;font-family:calibri;font-size:11px;border:1px solid lightgrey;text-align:justify;} -->  <!-- TR {valign:top;} -->  <!-- P {background: white;color:GREEN} -->  </STYLE>


<br><br>Heading 2<br><br><table BORDER='1' cellspacing='1' cellpadding='1' width='50%' ><table> <tr><th scope=col>PDB</th><th scope=col>SCHEMA_NAME</th><th scope=col>TABLE_NAME</th><th scope=col>INDEX - COLS</th></tr></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr></table></table>

I am trying to get Heading 2 in green and Heading 1 in Red.

Upvotes: 0

Views: 1798

Answers (1)

vinod
vinod

Reputation: 796

Just add the specific heading in a <div> tag and give it a class name. Also style the class with color.
IN Your code--
Add following snippets inside <style> tag..

<style>
   .head1{
      color:red;
    }
   .head2{
      color:green;
    }
</style>

Modify headings to make it inside <div> tag as follows..

<div class="head1">Heading 1</div>
<div class="head2">Heading 2</div>

If u want the complete code or any help just comment down :)

Upvotes: 1

Related Questions