Today in this tutorial we will learn how to apply css to an html document.
- We can apply css in two ways :
- Internally
- Externally
- So to apply css in two different ways as mentioned above follow the steps given below :
- 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 :
- Now save your file as an html document and run/open it, you will get the following output :
- To apply css externally follow the steps given below :
- Create a new folder and name it for example EDUONIX.
- 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.
- 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>
- After writing the code your window will look as shown below :
- 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
- Now open style.css and write the following CSS code in it.
body{ background-color : violet; font-family:arial; font-size:14px; }
- 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.
- Now run your index.html and you will have the following output:
- 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; }
- Now when you refresh your page i.e index.html it will give the following result.
- Thus we have successfully applied CSS to an HTML document.