Learn to apply CSS to an HTML document


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++.

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

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

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

    2. 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.

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

    4. After writing the code your window will look as shown below :

    5. 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

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

    7. 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.

    8. Now run your index.html and you will have the following output:

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

    10. Now when you refresh your page i.e index.html it will give the following result.
  4. Thus we have successfully applied CSS to an HTML document.


Please enter your comment!
Please enter your name here