Use the CSS Selectors with the given Properties and Values.

Provide the details as given in the table below.

CSS Selectors

Properties And Values

h1

·         text should be aligned to the “center” of the page

·         color should be “#FF00FF”

·         font style should be “italic”

table

·         text should be aligned to the “left” of the page

·         margin left should be “35%”

·         background color should be “#F0F0F0”

tdA

·         text should be aligned to the “center” of the page

caption

·         text should be aligned to the “left” of the page

·         font should be displayed in “bold”

























Set background color of component with class tr1 as : #ff0080
Set background color of component with class theader as : #800000
Set background color of component with id ex1 and vg1 as : #00ff00
Set background color of component with id go1 as : #ffff00
Set background color of component with id av1 as : #d3d3d3
Set color of component with id av1 as : #ffffff
Set background color of component with id bal as : #ff0000
Set color of component with id bal as : #ffffff


Answer:

trainerfeedbackchart.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Trainer's Feedback Rating Chart</title>
     <link rel="stylesheet" href="trainerfeedbackchart.css">
    </head>
    <body>
    
      <div class="foot">
        <form>
        
        <h1>Trainer's Feedback Rating Chart</h1>
       
    <table id="chart">
    <caption>Trainer's Name: Elite Parker</caption>       
        <tr class="theader" >
            <th>S.No.</th>
            <th>Training Module Name</th>
                <th>Overall Rating</th>
             <th>Feedback</th>
        </tr>
        <tr class="tr1" >
        <td>1</td>
            <td>HTML5, CSS3, JavaScript</td>
            <td>5</td>
            <td id="ex1" >Excellent</td>
            
        </tr>
        <tr class="tr2">
        <td>2</td>
            <td>Basic Java Programming</td>
            <td>4</td>
             <td id="vg1">Very Good</td>
        </tr>
        <tr class="tr1">
        <td>3</td>
            <td>Advanced Java Programming</td>
            <td>3</td>
             <td id="go1">Good</td>
        </tr>
         <tr class="tr2">
        <td>4</td>
            <td>UNIX Shell Scripting</td>
            <td>2</td>
             <td id="av1">Average</td>
        </tr>
         <tr class="tr1">
        <td>5</td>
            <td>Python Programming</td>
            <td>1</td>
             <td id="ba1" >Below Average</td>
        </tr>
    </table>
   
          </form>
        </div> 
      
    </body>
</html>


trainerfeedbackchart.css:

 h1{
     text-align: center;
     color: #ff00ff;
     font-style: italic;
 }

 table{
     text-align: left;
     margin-left: 35%;
     background-color: #f0f0f0;
 }
 
 td{
     text-align: center;
     
 
 
 }
 
 caption {
     text-align: left;
     font-weight: bold;
 }
 
 .theader {
     background-color: #800000;
     color: white;
 
  /* Wrtie code for css values here */ 
 
 }
 
 .tr1{
    background-color: #ff0080;
 }
 .tr2{
     background-color: white;
     
 }
 
 #ex1, #vg1{
     background-color: #00ff00;
    
 }
 
 #go1{
     background-color: #ffff00;
     
  
 }
 
 #av1{
     background-color: #d3d3d3;
     color: #ffffff;
    
 }
 
  #ba1{
      background-color:#ff0000;
      color:#ffffff;
      
    /* Wrtie code for css values here */ 
      
  }