HomeContact UsPortfolio

CSS INCLUSION

How To Add CSS

There are three ways to insert CSS in HTML documents.

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1) Inline CSS :

Inline CSS is used to apply style on a single line or element.

Example :

file name - index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  
  <body>
    <h1 style="color:red;text-align:center;">This is a heading</h1>
    <p style="color:blue;">This is a paragraph.</p>
  </body>
</html>

This will produce the following result −

inline css

2) Internal CSS :

Internal CSS is used to apply CSS on a single document or page.

It is written inside the <style> tag within head section of html. Rules defined using this syntax will be applied to all the elements available in the document.

Example :

file name - index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS</title>
    <style>
      body {
          background-color: linen;
           }
      h1 {
         color: maroon;
         margin-left: 40px;
        }
      p {
         font-family: 'Courier New', Courier, monospace;
         font-size: 18px;
        }
  </style>
 </head>
  
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

This will produce the following result −

internal css

3) External CSS :

External CSS is used to apply CSS on multiple pages or all pages.

We write all the CSS code in a separate CSS file. Its extension must be .css for example style.css

This CSS file should be linked to html pages using <link>tag in <head>section.

Example :

file name- index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS</title>
    <link rel="stylesheet" href="./style.css">
 </head>
  
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

file name - style.css

body {
    background-color: rgba(150, 223, 186, 0.726);
  }
  
h1 {
    color: rgb(202, 0, 0);
    border: 2px solid blue;
    display: inline-block;
    margin-top: 20px;
    padding: 6px;
   }


p {
   margin-left: 20px;
   font-weight: bold;
  }

This will produce the following result −

external css