in

Introduction to HTML Style Sheet and How to Use Them

In this tutorial we will be learning about HTML style sheet and the different ways you can use them in an HTML document.

In our previous tutorial, we learn about HTML header and if you haven’t gone through that you can check them out using the link below.

Read previous tutorial on: Tutorial 24# Learn How To Install HTML Header the Easy Way

What is HTML Style sheet?

From the name style sheet you can easily predict it has to do with styling. Yes. HTML styling are methods used in customizing and beautifying HTML web documents. Style sheet or cascading style sheet helps us add customized styles to the HTML web document.

Ways of styling or using CSS in HTML

There are different ways of styling HTML documents and they include:

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

Internal styling

This is preferable when you only need to apply style sheet rules to a single web document. You can achieve this by using the <style> tag placed at the head section of the web document. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <style>
         .red{
            color: red;
         }
         .green{
            color: green;
         }
         .blue{
            color:blue;
         }
      </style>

      <title>illustration of internal styling </title>
   </head>
	
   <body>


      <p class="red">HELLO BUDDIE!</p >
      <p class="green" >HELLO BUDDIE!</p>
      <p class="blue" >HELLO BUDDIE!</p>
      
       
      


   </body>

</html>

Result

illustration of internal styling

HELLO BUDDIE!

HELLO BUDDIE!

HELLO BUDDIE!

Inline styling

This involves adding styles to the HTML document on the same line. This method is not the best method so its advisable now to make use of it. Example shown below

<!DOCTYPE html>
<html>

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

   </body>

</html>

Result

illustration of inline styling

HELLO BUDDIE!

HELLO BUDDIE!

HELLO BUDDIE!

External styling

The external styling involves designing and structuring the external style sheet in a different cascading style sheet (CSS) file and linking them to your HTML document using the <link> tags . Example shown below

we first define an external css structure shown below

.red{
            color: red;
         }
         .green{
            color: green;
         }
         .blue{
            color:blue;

Next we define the HTML document and link it with the css file using the <link> tag at the header

<!DOCTYPE html>
<html>

   <head>
      <link rel="stylesheet" type="text/css" href="develoferdstyles.css"  >
      <title>illustration of External styling </title>
   </head>
	
   <body>
      <p class="red">HELLO BUDDIE!</p >
      <p class="green" >HELLO BUDDIE!</p>
      <p class="blue" >HELLO BUDDIE!</p>
   

   </body>

</html>

Result

illustration of internal styling

HELLO BUDDIE!

HELLO BUDDIE!

HELLO BUDDIE!

Note: Please understand that for the external styling to work properly you must have the css document folder in the same folder with other web files.

Conclusion

Now you understand the HTML Styling using Style Sheet in web Documents and you are really doing great. Lets move on to the next tutorial on HTML JAVASCRIPT

What do you think?

html header

Simple Tutorial On How To Install HTML Header the Easy Way

html javascript

Introduction to HTML javascript and How to Use Them