Adding CSS to HTML

Adding CSS to HTML

CSS can be added to HTML in three ways: inline CSS, internal CSS, and external CSS. Each method applies styles to HTML, but the CSS is placed in a different location.

Three Ways to Add CSS

There are three common ways to apply CSS to HTML:

• Inline CSS — CSS is written directly in an HTML element using the style attribute.
• Internal CSS — CSS rules are placed inside a <style> element in the HTML document.
• External CSS — CSS rules are stored in a separate .css file and connected to the HTML document with a <link> element.

All three methods can style HTML. The main difference is where the CSS is written and how easily those styles can be reused.

Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

<p style="color: blue;">This paragraph is blue.</p>

Inline CSS affects only the element where the style attribute is used. It can be useful for simple examples or an individual style, but it becomes difficult to maintain when the same styling is repeated throughout a website.

You will learn more on the next page, Inline CSS.

Internal CSS

Internal CSS is written inside a <style> element, which is normally placed inside the <head> of the HTML document.

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

The CSS rule can then style matching elements on that page:

<p>This paragraph is blue.</p>

Internal CSS is useful when styles apply to a single page and a separate stylesheet is not needed.

See Internal CSS for a closer look at this method.

External CSS

External CSS is stored in a separate file with a .css file extension. The stylesheet is connected to the HTML document using a <link> element inside the <head>.

<link rel="stylesheet" href="styles.css">

The separate styles.css file can contain CSS rules such as:

p {
  color: blue;
}

An external stylesheet can be linked to many HTML pages, allowing the same styles to be reused throughout a website. Changes made to the stylesheet can therefore affect every page that uses it.

See External CSS for more information.

Which Method Should You Use?

For most websites, external CSS is the preferred method because it keeps the HTML and presentation separate and allows styles to be reused across multiple pages.

Internal CSS can be useful when styles are needed only on one page. Inline CSS can be useful for an individual style or a simple example, but repeating inline styles throughout HTML makes the markup harder to maintain.

As you work through these tutorials, you will see all three methods so you can recognize them when reading and working with HTML.

Summary

CSS can be added to HTML as inline CSS with the style attribute, internal CSS with the <style> element, or external CSS with a separate stylesheet connected by the <link> element.

The next three tutorials look at each method individually, beginning with inline CSS.