CSS Getting Started

In this CSS tutorial, you will learn how to add CSS styles in your HTML document.

There are three different ways to add CSS in your HTML documents:

  1. Inline CSS – Directly inserting a <style> attribute in the starting of the HTML tag.
  2. Internal CSS – Adding <style> tag in the head section of the document.
  3. External CSS – Using the <link> tag to include externally defined styles in the document.

Let’s discuss each method in detail:

1. Inline CSS

Inline CSS is mostly used when we want to apply a unique style on a single HTML element only.

To add inline CSS, we have to insert a style attribute in the starting of the HTML tag. This style attribute can take any number of CSS property: value; pairs, where each property: value; pair must be separated by a semicolon(;). Refer to the example below:

Example:

<!DOCTYPE html>
<html>
<body>
    
    <h1 style="color: red; background-color: yellow;">This is the main heading</h1>
    <h2 style="color: blue; background-color: gold;">This is a sub heading</h2>
    <p style="border: 5px solid cyan;padding: 10px">This is a paragraph.</p>

</body>
</html>

2. Internal CSS

Internal CSS is used when we want to apply some unique styles to a single page or document only. Such styles only affect the page or document where they are embedded in.

The internal CSS is written inside the <style> tag, within the <head> section of the document. You can define any number of styles within the <style> tag. Refer to the example below:

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
          background-color: gold;
        }
        h1 {
          color: red;
          text-decoration: underline;
        }
        p{
          border: 5px solid green;
          padding: 10px;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

3. External CSS

External CSS is used when we want to apply some common styles to multiple pages or sections of a website. One common example is footer of the website, which looks exactly the same across all pages of the website.

To create external CSS, you have to first create a CSS file with a .css extension. Write all your styles inside this CSS file. After writing all CSS styles, include this CSS file in the <head> section of the document using a <link> tag. Refer to the example below:

Example:

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

</body>
</html>

Below is how the ‘demo.css’ file looks:

‘demo.css’

body {
  background-color: gold;
}
h1 {
  color: red;
  text-decoration: underline;
}
p{
  border: 5px solid green;
  padding: 10px;
}