HTML TUTORIAL

How to Insert Stylesheet On Web Documents Using HTML

HTML STYLESHEET
Written by ikenna

In this article we will be explaining how to add style sheet to html web document using different techniques. In our previous tutorial, we looked at the different methods of embedding colors to HTML web document which included the traditional color names, the use of hex codes and the use of RGB codes. If you haven’t gone through the tutorial, you can do so using the link below

READ PREVIOUS: How To Embed Colors on Web Documents Using HTML

Definition of HTML Style sheet

As the word implies, html style sheet are sheet containing different customization and formatting to be added to the a web document. Style sheet also known as cascading style sheet helps developers add customized styling to the HTML web page.

Styling Methods in HTML

There are three traditional ways of adding style to the web document and they include:

  • The Internal styling method – this method uses the <style> tags to add style sheet rules in the head section of the HTML web document.
  • The Inline styling method – This method uses the style attributes to define styling rules in the HTML web document.
  • The External styling method – This method involves designing and defining the external style sheet in a separate file and linking them to your HTML web document using the <link> tags

The internal styling Method – This method uses the opening and closing style tags to add styles to a single html web document. This method can only be applied on a single web page. Example shown below

<!DOCTYPE html>
<html>
   <head>
      <style>
         .red{
            color: red;
         }
         .black{
            color: black;
         }
         .blue{
            color:blue;
         }
      </style>

      <title>illustration of internal styling </title>
   </head>
	
   <body>
      <p class="red">HELLO themustfeed!</p >
      <p class="black" >HELLO themustfeed!</p>
      <p class="blue" >HELLO themustfeed!</p>
 
   </body>

</html>

RESULT ON WEB BROWSER

illustration of internal styling

HELLO themustfeed!

HELLO themustfeed!

HELLO themustfeed!

The inline styling method

The inline styling methods is used to add styles to a specific line or section of a web document. This method is simply not the best and advisable method used in the modern day web development. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of inline styling </title>
   </head>
	
   <body>
      <p style="color: black;" >HELLO themustfeed!</p >
      <p style="color: red;" >HELLO themustfeed!</p >
      <p style="color: blue;" >HELLO themustfeed!</p >

   </body>

</html>

Result on web browser

illustration of inline styling

HELLO themustfeed!

HELLO themustfeed!

HELLO themustfeed!

External Styling Method

The external styling method is quite different from other styling methods. In this method, all the styles are structured on an external document called the stylesheet document and then this document is then linked to the html document. Linking this document to the html document will enable all the styles and formatting present in the external document to be applied on the HTML document.

Conclusion

In this above article, we explained fully how to structure the stylesheet inside the HTML web document. if you have any question regarding this article, kindly let us know using the comment section below

NEXT TUTORIAL: INSERTING JAVASCRIPT TO HTML

About the author

ikenna

Leave a Comment