Adding CSS to an HTML document

There are basically 4 ways of adding CSS to an HTML document though the most commonly used are Inline CSS and External CSS. In this tutorial we are going to be talking about the common methods.

Embedded CSS

You can embed your CSS rules into an HTML document by writing the CSS in the <style> element that is placed inside <head> element. Rules defined in this way are limited only to the document within which they are embedded.

For example:

<!DOCTYPE html>

<html>

   <head>
   
      <style type = "text/css">

         body {
            padding:20px;
            background-color:black;
         }

         h1 {
         	color:olive;
            margin:40px;
            padding:20px;
            font-weight:bold;
            text-align:center;
            }
          p {
          color:teal;
          text-indent:5%;
          }
          
          code {
          color:red;
          }

      </style>

   </head>  

   <body>

      <h1>Welcome to my website</h1>

      <p>You can embed your CSS rules into an HTML document by writing 
      the CSS in the <code>&lt;style&gt;</code> element that is placed 
      inside <code>&lt;head&gt;</code> element. Rules defined in this 
      way are limited only to the document within which they are 
      embedded.</p>

   </body>

</html>

Output

Css output

Inline CSS

You can style an HTML element using its style attribute. However in this case, the applied CSS rules will style that element only.

The syntax is:

<element style = "style1; style2; etc">

For example:

<!DOCTYPE html>

<html>

   <head>
   

   </head>  

   <body style = "padding:20px; background-color:black;">

      <h1 style="color:blue; text-align: center">Welcome to my website</h1>

      <p style ="color:teal; text-indent:5%;"> You can embed your CSS rules into an HTML document by writing 
      the CSS in the <code style="color:red">&lt;style&gt;</code> element that is placed 
      inside <code style ="color:red">&lt;head&gt;</code> element. Rules defined in this 
      way are limited only to the document within which they are 
      embedded.</p>

   </body>

</html>

Output

Inline css example

External CSS

To separate content from presentation you can include external CSS style sheets using the <link> element. This also has the advantage of making your CSS rules global. You can include the style sheet in as many documents as you like.

A CSS style sheet is just a text file with a .css extension. This sheet includes all the defined style rules which you can then include in any HTML document through the <link> element.

The general syntax for including external CSS is:

<head>
   <link rel="stylesheet" type = "text/css" href = "path/to/stylesheet.css"/>
</head>

Here is an example of using an external style sheet in which the the HTML file and the CSS file are in the same folder:

index.html

<!DOCTYPE html>

<html>

   <head>
   
   <link rel="stylesheet" type="text/css" href= "myStyle.css">
   </head>  

   <body>

      <h1>Welcome to my website</h1>

      <p> You can embed your CSS rules into an HTML document by writing 
      the CSS in the <code>&lt;style&gt;</code> element that is placed 
      inside <code>&lt;head&gt;</code> element. Rules defined in this 
      way are limited only to the document within which they are 
      embedded.</p>

   </body>

</html>

myStyle.css

body {
            padding:20px;
            background-color:black;
         }

         h1 {
         	color:olive;
            margin:40px;
            padding:20px;
            font-weight:bold;
            text-align:center;
            }
          p {
          color:teal;
          text-indent:5%;
          }
          
          code {
          color:red;
          }

Output

Css output

CSS Comments

Comments are a great way of explaining your code or of temporarily disabling parts of your code. CSS comments are generally the same as in C based programming languages.

Single line comments are created starting with //. For example to comment out a single line:

body {
      padding:20px;
    // background-color:black;
         }

Multi line comments are created by starting with /* and ending with */.

body {
            padding:20px;
            background-color:black;
         }

       /* THIS WHOLE BLOCK HAS BEEN COMMENTED OUT...
       h1 {
         	color:olive;
            margin:40px;
            padding:20px;
            font-weight:bold;
            text-align:center;
            }
          p {
          color:teal;
          text-indent:5%;
          }
      ... UP TO THIS POINT  */
          
          code {
          color:red;
          }

Adding CSS to an HTML document