How to Insert CSS Styles in HTML

Last updated : 2023-10-25

There are three ways to add CSS to HTML, through an external CSS file, internally, or by writing CSS code directly within HTML tags.

We will now explain the three ways to add the CSS stylesheet to your web page.

1. Adding CSS to HTML with an External Style Sheet

With an external CSS file, you can change the appearance of an entire web page by simply adding a file with a .css extension.

In each HTML document on your site, the CSS file should be included within the head tag. This will apply all the rules defined in the stylesheet.

html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body></body>
</html>

This is the most common way to include CSS in web pages and is highly recommended.

2. CSS within HTML using the <style> tag

We can add the styles for an HTML page within the same document. We recommend this option when those styles are needed only in that specific HTML and not on the rest of the page. To add internal styles, you can do it within the <style> tag in the head of the document. Take a look at the following example where we change the color of the body within our HTML.

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: violet;
      }

      h1 {
        color: gray;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Logo</h1>
    <p>Content</p>
  </body>
</html>

3. Including CSS in HTML with Inline Styles

We can also include CSS code within the HTML tag code; these are known as inline styles for adding styles to a specific HTML tag.

To use inline styles, you add a style="" attribute to the tag you want to change the styles for. Take a look at the following example where we add styles directly within the <h1> and <p> tags.

html

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:red;text-align:center;">Logo</h1>
    <p style="color:green;">Content</p>
  </body>
</html>

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me