w3docs logo
How can you add CSS?
Start Quiz - "CSS Basics"

The 4 Methods for Adding CSS to HTML

Cascading Style Sheets, or CSS, is a critical element in web design and development. It's responsible for controlling the layout and aesthetics of a webpage. There are four methods of implementing CSS into HTML: inline styling, internal style sheets, external style sheets, and imported style sheets. Let's explore each of these methods.

Inline Styles

Inline styles allow authors to attach styling information directly to an HTML element. This is done by placing the CSS declarations within the style attribute of the HTML elements like so:

<p style="color: red;">This is an example of inline styling.</p>

Although this method is quick and easy, it is not recommended due to poor scalability and maintenance difficulty.

Internal Stylesheets

Internal stylesheets are used by adding a <style> tag in the <head> section of the HTML document. Inside this tag, you can write CSS rules that apply to elements in the page:

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

This is useful when styling needs to be applied on a single page only. But if you have multiple webpages that require the same style, using an internal stylesheet isn't ideal.

External Stylesheets

External stylesheets are .css files linked to your HTML document. They are modular and can be applied to multiple webpages, which makes maintenance easier. To link an external stylesheet, use the <link> tag in the HTML document's <head> section:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Imported Stylesheets

Imported stylesheets are a way of including one CSS file in another. This can be done through the @import rule and it's useful when you need to divide a big CSS file into smaller, more manageable parts:

@import url('styles.css');

However, it may impact page load times negatively if used excessively due to extra HTTP request needs.

Each method of adding CSS to your website has its use case, but in general, the preferred method of adding CSS is through external stylesheets. They provide the most flexibility and are the easiest to maintain on larger sites.

Remember, understanding how to effectively add CSS to HTML is key to efficient web design and development.

Related Questions

Do you find this helpful?