Skip to main content

How to Add CSS to Your Website: A Step-by-Step Guide

There are several ways to add CSS to your HTML document.

Here are a few common methods:

Inline CSS​

You can add CSS directly to an HTML element using the style attribute.

As an example:

Editor

Loading...

Internal CSS​

You can include CSS styles within the <head> section of an HTML document using the <style> tag.

As an example:

Editor

Loading...

External CSS​

External CSS is a method of adding CSS styles to an HTML document by linking to an external CSS file. The CSS file contains all the CSS code for your website, and you can link to it from any HTML file in your website.

Here's an example of how to use external CSS:

  • Create a new file in your code editor and save it with a .css file extension (e.g. styles.css).

  • In the CSS file, add your CSS styles using the same syntax as you would for inline or internal CSS.

As an example:

style.css

/* styles.css */

body {
     background-color: #f2f2f2;
}

h1 {
     color: #007bff;
}

p {
     font-size: 16px;
}

  • Save the CSS file.

  • In your HTML document, add a <link> tag in the <head> section to link to the CSS file.

As an example:

index.html

<!DOCTYPE html>
<html>
     <head>
          <title>My Website</title>
          <link rel="stylesheet" type="text/css" href="styles.css" />
     </head>
     <body>
          <h1>Welcome to my website!</h1>
          <p>This is some text on my website.</p>
     </body>
</html>

In this example:

  • The <link> tag specifies the location of the styles.css file using the href attribute.
  • The type attribute specifies that the file is a CSS file.
use external css

Best practice is to use external CSS files instead of inline or internal CSS.

CSS Frameworks​

You can also use pre-built CSS frameworks like Bootstrap or Foundation to apply styles to your HTML elements. These frameworks provide a set of pre-defined CSS classes that you can use to style your HTML elements without having to write all the CSS from scratch.