HTML CSS Stylesheet | HTML Tutorial

CSS (HTML CSS Stylesheet) is the tool to decorate an HTML document. When a browser loads an HTML document it follow the information given is the style sheet.

You already know what CSS is. In this tutorial, we will learn how to add CSS inside a HTML document.


HTML CSS Stylesheet

A Stylesheet is a command or a collection of commands that control the appearance and layout of various elements on webpages.

Using stylesheets you can set the color, font, font size, background, and much more. Not only that, you can make your webpage user friendly for all devices.

There are three ways to insert CSS stylesheet in a HTML document.

  • Inline CSS – Defines stylesheet by using style attribute in HTML elements.
  • Internal CSS – Defines stylesheet by using a <style> tag in the <head> section.
  • External CSS – Defines stylesheet by using a separate .css file and then add that file in your HTML document using HTML <link> tag.

Most common and convenient way of using CSS is to use external .css file.

Because it is much easier to maintain and update styles later on.


Inline CSS

An inline CSS is a unique style for a single HTML element.

You can apply inline rules directly in an element and these rules will work for that specific element only.

To use inline CSS, you need to use style attribute in the opening tag of an element.

You can also add more than one CSS property by separating them with semicolon (;).

<p style = "color:red; font-size:18px;">
   This is an example of inline CSS.
</p>

The output shows in a web browser:

This is an example of inline CSS.

You will read more about CSS properties in our tutorial – HTML Style Guide


Internal CSS

An internal CSS defines a unique style for a single HTML page.

These internal rules are only applicable for a specific web page.

To use internal CSS, you have to use <style> element inside the <head> section.

All the CSS properties will go between <style>…</style>

<head>
  <style>
    p{
      color:red;
      font-size:20px;
    }
  </style>
</head>
<body>

  <p>This is an example of internal CSS.</p>

</body>

The output shows in a web browser:

This is an example of internal CSS.

You can also use HTML id and class attribute to select elements in internal CSS.

Then you will select and style those elements according to id or class name.

OUTPUT

In the above example, paragraph 1 is using id attribute. To select an id, you have to add hash (#) at the beginning of an id name.

Note: You can not give same id name more than one element.

Other paragraphs contains class attribute. To select a class, you have to add dot (.) at the beginning of a class name.

You can give same class name to more than one elements. All the elements with the same class name will have same style.

Paragraph 3 and 4 has same class name “blue”. Therefore, they have the same style too.


External CSS

An external CSS defines style for many HTML page.

External CSS use separate file with .css extension.

You have to create a file with .css extension. You can give any name you want.

To integrate that file with your HTML document, you have to use <link> tag inside the <head> section.

The HTML tag contains 3 other attributes i.e. rel attribute with the value “stylesheet”, type attribute with the value “text/css”, and href attribute with the file path.

You will have separate tutorial about file path. This is very important topic.E

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Page title</title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>

  <p id="green">This is paragraph 1.</p>
  <p class="red thick">This is paragraph 2.</p>
  <p class="blue">This is paragraph 3.</p>
  <p class="blue thick">This is paragraph 4.</p>

</body>
</html>

The output shows in a web browser:

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

In the above example, we are using a file style.css as our stylesheet.

This is a separate file for our CSS properties. We have added this file to our HTML document using <link> tag.

As you see, there are different id and class names for elements. We will give style according to those names.

You can add more than one class name in one element by separating them with space.

That element will have all the styles those classes contain.

In addition, our style.css file contains these CSS properties:

#green{
   color: green;
}
.red{
   color: red;
}
.blue{
   color: blue;
}
.thick{
   font-size: 20px;
}

Multiple Stylesheets

It is possible to add multiple CSS stylesheets within a single document.

You can use external file, internal and inline CSS combined.

However, this is not good practice. You should use external stylesheet most of the time. In special case, use inline CSS.


Power of stylesheets

You already know there are three ways of adding stylesheet in a HTML document. It is very important to know how they work together.

Browser always follow an order in order to read CSS properties. Browser goes from top to bottom.

Suppose an external stylesheet has the following style for the <p> element:

p{
   color: blue;
}

Then, suppose an internal stylesheet also has the following style for the <p> element:

p{
   color: red;
}

If the internal style is defined after the external stylesheet, the <p> elements will be “red“.

Because, browser will read internal style after the external style. The last style for an element will have most priority.

However, if <p> has any internal style like color:green; then browser will follow the inline style over other styles.

Inline style has the highest priority. This will override all other stylesheet.

  1. Inline CSS style (inside an HTML element)
  2. External and internal stylesheets (in the head section)
  3. Browser default value.

CSS Border Property

The CSS border property specifies a border around an HTML element.

The values of this property has 3 sections. First section defines the width of the border. Specially we use px as unit.

Second section defines the style of the border. The style can be solid, dotted, dashed, double etc.

Third section defines the color of the border. You can use any color name or color code.

<p style="border: 1px solid red;">
   This is a paragraph with red border
</p>

The output shows in a web browser:

This is a paragraph with red border


CSS Margin Property

The CSS margin property defines space around elements, outside of any defined borders.

In simple word, margin creates free space outside an element. You can use any unit for its value i.e. px, percent (%), em etc.E

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Page title</title>
  <style>
    p{
      border: 2px solid red;
      margin: 20px;
    }
  </style>
</head>
<body>

     <p>This paragraph has a margin of 20px.</p>

</body>
</html>

The output shows in a web browser:

This paragraph has a margin of 20px.


CSS Padding Property

The CSS padding property defines space around an element, inside of any defined borders.

Padding almost works like margin property but the main difference is padding creates free space inside the border.

Margin creates free space outside the border.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Page title</title>
  <style>
    p{
      border: 2px solid red;
      margin: 20px;
      padding: 10px;
    }
  </style>
</head>
<body>

     <p>This paragraph has a margin of 20px and padding 10px.</p>

</body>
</html>

The output shows in a web browser:

This paragraph has a margin of 20px and padding 10px.


Time to practice

OUTPUT