how - adding css to html

how insert css in html?

there are three ways you can apply css to an html documnet.

  • inline style
  • internal style
  • external style sheet

inline style (the attribute style)

one way to apply css to html is by using the html attribute style.

the style attribute can contain number of css property-value pair.

the example shows how to change the background-color or color and font of a paragraph.

                    
      <body>
                    
  <p style="background-color:#9f4b9c;color:#adfb9c;font-size:20px;font-weight:
  
     bold; border:10px outset gold;padding:20px;"> this is inline method  use it apply 
  
                                                          with paragraph  </p>
  
  <p style="background-color:#3a5b9c;color:#ffffff;font-size:19px;font-weight:100;

				border:10px outset gold;padding:20px;">
  
    inline method is  loses  many of advantages of style sheets by mixing content 
  
      with presentation</p>  
  
      </body>

internal style sheet.

the internal style sheet define in head section of an html page ,by using <style>element with type attribute

add css code to html file example

             <html>
                           <head>
                           
                           
                               <style  type="text/css"  >
                               
                                body{ background-color:#9a4b7c;
                                
                               background-image:url("\\project\\image\\images.jpg") }
                                 
                           div{  background-color:#3a4b9c; }
                            
                           h5{  border:10px outset gold;
                           
                               color:yellow; 
                               
                               font-size:15px; 
                               
                               font-weight:bold; 
                               
                               margin:10px 10px; padding:10px 10px;
                            }
                            
                         </style>
                         
                   </head>
                   
                <body>
                
                        <div>
                        
                            <h5>this is internal style sheet effect, you like this  </h5>
                             
                            <h5>this is second heading parts.  </h5>
                            
                      </div>
                      
                 </body>
                 
             </html>

external style sheet

  • external style sheet is simply a text file with the extension css_file_name.css.
  • you can place the style sheet on your web server or hard disk.
  • html pages must link to the style sheet using the <link> element.
  • html <link> element place inside the head section.

link external css file with html file example

                            
                            external_css_file.css
                                                        
  h5{  background-color:#525754;
  
            color:#ffffff;
            
            font-size:22px;font-weight:bold;
            
            margin:10px 10px;
            
            padding:10px 10px;
            
            border:10px outset gold;
          }
          
    .class_selector{ border:14px inset  #3a4b9c;     background-color:#3a4b9c;
    
                        padding:20px 20px;   color:#ffffff;   font-size:24px;  }
             
    #id_selector{ border:4px dotted #969253;   background-color:red;
                     
                        padding:20px 20px;    
                        
                        color:yellow;   font-size:25px;   margin:5px 5px;
         }
         
      ul{  background-color:#efeffe; }   
         
      ul li{ color:#ffffff;
      
             border:2px inset #eee;
             
             background-color:#3a4b9c;
             
             font-size:15px;
             
             padding:5px 2px;margin:2px 2px;}

html page must link to the external style sheet using <link>tag.

      <html>
                  
          <head>
          
   <link  rel="stylesheet"  media="screen"  href=".\External_css_file.css"  >
   
       </head>
       
     <body>
     
             <h5>this is five level heading</h5>
      
     <div class="class_selector">this is class selector</div>
      
     <div id="id_selector">this is id selector</div>
      
     <ul>
     
       <li>www.w3webtutorial.com</li>
       
       <li>w3webtutorial</li>
       
       <li>www com</li>
       
       <li>google</li>       
       
       </ul>
            
   </body>

 </html>