CSS id selector

how create css code with css id selector

  • the id selector uses the id attribute of the html element
  • the id selector defines with "#" sign . syntax #idselectorname{css declaration}
    <style  type="text/css"  >
                   
         body{ background-color:#9a4b7c;
                            
                       color:#000000; 
                            
                       background-image:url("/image/images.jpg")}
                            
         #div{ background-color:gold;
                            
                    color:#000000; 
                            
                    font-size:15px;   }
                    
         #h2{ background-color:#30c;
                            
                               color:#ffffff; 
                               
                               font-size:15px; 
                               
                               font-weight:bold; 
                      }
         
         </style>

Css class selector

define the css code with class selector

to increase the granularity of control over elements ,a new attribute has been added to html 'class'.

all elements inside the body element can be classed and the class can be addressed in the style sheet.

the class selector uses the html class attribute and is defined with a "."  .

    <style  type="text/css"  >
              
           .h1{ background-color:pink;
                            
                     color:#000000; 
               }
               
           .div{ background-color:#9a4b7c;
                            
                       color:#ffffff; 
                                
                       font-size:15px; 
                                
                        }
                        
           .h2{ background-color:yellow;
                            
                      color:#000000; 
                                       
                      font-size:15px; 
                                       
                      font-weight:bold; 
             }
                          
            </style>