How to add CSS in HTML? Three ways to insert CSS in HTML

Today I am going to show you how to link your CSS style sheet to HTML page. So Let’s Start our today’s lesson and learn more about CSS links.

There are Three Ways to insert CSS in HTML

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

When you will add an external style sheet in your HTML document it will change the entire look of your website by adding only one line in your HTML head tag. So how? Then listen it’s very easy. Firstly add a link tag in your HTML head tag. Then add href attribute and give it a value which is your CSS file name with extension .css as shown below:

how to insert external style sheet

Then, press ctrl+S to save your HTML document. Congratulations, you have linked your external style sheet to your HTML file. So what are the benefits of external CSS:

It will allow you to work fast and easily. You will save your time by adding external css.

Internal CSS in HTML

So, the internal CSS that we will add is very easy. Simply add a pair of <style> tags in the HTML head tag and type your all CSS code in it. As shown below:

    <title> my webpage </title>
      body {
        margin: 100px;
      	background-color: yellow;
    <h1> This is a New Webpage </h1>

Inline CSS in HTML

At last, how to insert inline styles in your HTML source file or document. So this is very time-consuming work. But I will show you then as you wish, Now the inline styles will be added to each HTML tag with the style attribute. as you can see below:

how to insert inline style sheet

As you can see in the above image styles are added to each tag.

So today you learned how to insert CSS in HTML and three ways of inserting styles in HTML. I hope you understood that very well. Search on Google and learn more. In our next lesson, we will learn what are CSS selectors. What are their types?

If you’re new to CSS, then start with an introduction to CSS.

Leave a comment below if you have any questions.