The 5 Ways to Add CSS to Your Website: A Complete Guide

Discover the five main methods to add CSS to your web pages: inline styles, internal stylesheets, external stylesheets, the @import rule, and dynamic styling with javascript. Learn when and how to use each approach effectively.

After you structure your project with html you'll want to switch over to adding css. There are 4 ways to add css to your project. Let's go over each one.

How to add inline styles to your html

To add inline styles you'll want to use the style attribute within an element.

<p style="color: red;">This is a paragraph</p>

How to add an internal stylesheet to your html

You also can add css styles to your html file with style tags in the head.

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>This is a paragraph</p>
</body>

How to add an external stylesheet to your html

Generally it is best practice to add your styles in a separate sheet and then link to it in the head of your html file.

<head>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <p>This is a paragraph</p>
</body>
    p { 
        color: red;
    }

How to use the @import rule in css

As you build out your project and your css rulesets grows you'll want to separate rulesets using imports which creates modularity in your project. You'll also could use the link tag to link to multiple css files which should have better performance, but if you do import with a preprocessor like Sass (combines all these files into one final CSS file during build) then use @import.

You noticed previously that the link tag was added to the html file. When using @import you'll want to apply it directly to your css file. Keep in mind that the css is read top down so be sure to add your reset.css first in the order for instance.

When using Sass you'll need to compile your files for production with a Sass compiler and then you can use PostCSS for even further improvement such as minification.

How to style dynamically with javascript

You can use javascript to dynamically style your page after it loads in the browser.

<body>
  <p>This is a paragraph</p>
  <script>
    document.body.children[0].style.color = "red";
  </script>
</body>

This can be helpful when looking to add interactivity to your website.

No fluff. Just real projects, real value, and the path from code to cash — one useful build at a time.

Social

Contact

© 2025 Matthew Seiwert