Learn to apply CSS to an HTML document

0
2031

Today in this tutorial we will learn how to apply css to an html document.

  • We can apply css in two ways :
    1. Internally
    2. Externally
  • So to apply css in two different ways as mentioned above follow the steps given below :

  1. To apply css internally write down the following code in Notepad++.

    <html>
     	<head> <b>Program1</b></head>
    		<title>THIS IS second  PROGRAM in the TEST
    		</title>
       <style>
           body{
    	   background-color:green;
    	   font-family:arial;
    	   
    	   }
    
       </style>
    	</head>
    
    	 <body >
                       
    
    	<h1>THIS IS THE FIRST HEADING</h1>
    	<h2>THIS IS THE SECOND HEADING</h2>
    	<h3>THIS IS THE THRID HEADING</h3>
    	<h4>THIS IS THE THRID HEADING</h4>
    	<h5>THIS IS THE THRID HEADING</h5>
    	<h6>THIS IS THE THRID HEADING</h6>
    	<a href="E:viveksimplecss.html">This is the first link.</a>
    	<br>
    	<a href="E:vivekv1.html">This is the second link.</a><br />
            <a href="http://www.google.com">Welcome to google.</a><br />
    	<p bgcolor="red">This is the paragraph tag.</p>
    	<div>
                <img src="C:UserspasswordDesktopPenguins.jpg" alt=Sample Image />
    	</div>		  
            
            </body>
    
    </html>
    

    So now after writing the code your screen will look like as shown below :

  2. v1

  3. Now save your file as an html document and run/open it, you will get the following output :
  4. v2

  5. To apply css externally follow the steps given below :
    1. Create a new folder and name it for example EDUONIX.
    2. v3

    3. Now copy the index.html file or the file you have created which you have saved with .html extension as explained above into this EDUONIX folder.
    4. v5

    5. Now open it with Notepad++ and write the following code in it:

      <html>
       	<head> <b>Program1</b></head>
      		<title>THIS IS second  PROGRAM in the TEST
      		</title>
         <link rel="stylesheet" href="css/style.css" type="text/css" />
      	</head>
      	
      	 
      	 <body >
      	  <div  id="container">  
      	  <h1 class="redClass">WELCOME TO EDUONIX LEARNING SOLUTION</h1>
          
      
      	<h1>THIS IS THE FIRST HEADING</h1>
      	<h2>THIS IS THE SECOND HEADING</h2>
      	<h3>THIS IS THE THRID HEADING</h3>
      	<h4>THIS IS THE THRID HEADING</h4>
      	<h5>THIS IS THE THRID HEADING</h5>
      	<h6>THIS IS THE THRID HEADING</h6>
      	<a href="E:viveksimplecss.html">This is the first link.</a>
      	<br>
      	<a href="E:vivekv1.html">This is the second link.</a><br />
           <a href="http://www.google.com">Welcome to google.</a><br />
      	<p bgcolor="red">This is the paragraph tag.</p>
      	<div>
          <img src="C:UserspasswordDesktopchao1s4imagesPenguins.jpg"           alt=Sample Image width="400" height="200" />
      	</div>		  
      	</div>
              	</body>
      
      </html>
      
    6. After writing the code your window will look as shown below :
    7. v7

    8. Now in Eduonix folder create another folder and name it for example CSS and in CSS folder create an text document and name it style.css
    9. scree

    10. Now open style.css and write the following CSS code in it.

      body{
      
      background-color : violet;
      
      font-family:arial;
      font-size:14px;
      
      }
    11. v10

    12. Now if you want images in your html document then create an images folder in your EDUONIX folder and paste your image resources into it,thus now your EDUONIX folder contains the following contents.
    13. v11

    14. Now run your index.html and you will have the following output:
    15. v12

    16. Now just make the changes in style.css file, replace the existing code with the following CSS code and save it:

      body{
      
      background-color:violet;
      
      font-family:arial;
      font-size:14px;
      
      }
      
      h1.redClass{
      
      color:red;
      }
      
      #container{
      
      width:460px;
      margin:auto;
      border:1px  solid  #cccccc;
      padding:0px 20px 20px 20px;
      border-radius:10px
      text-align:center;
      backgroung:#ffffff
      
      }
      
      img{
      border:#666  2px solid;
      padding:20px;
      }
    17. Now when you refresh your page i.e index.html it will give the following result.
    18. v13

  6. Thus we have successfully applied CSS to an HTML document.

LEAVE A REPLY

Please enter your comment!
Please enter your name here