Inline vs Internal vs External CSS – Learn the Difference

The three (3) main ways to style HTML elements are:

Inline CSS
Internal CSS
External CSS

Let’s discuss the three styling techniques below.

What Is an Inline CSS?

Inline CSS styles only the element on which it is used. You can implement inline styling by adding a style attribute to an element’s opening tag.

Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS Example – CodeSweetly</title>
  </head>
  <body style="background-color:black;">
    <h1 style="color:orange;">Hello there! &#128075;</h1>
    <p style="color:lightgreen;">I am CodeSweetly.</p>
  </body>
</html>

Try it on CodeSandbox

The snippet above used inline CSS to style three HTML elements.

What Is an Internal CSS?

An internal CSS styles multiple HTML elements within the document you used it. You can implement internal CSS styling by adding an HTML <style> element in your HTML document’s <head> section.

Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS Example – CodeSweetly</title>
    <style>
      body {
        background-color: black;
      }
      h1 {
        color: orange;
      }
      p {
        color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h1>Hello there! &#128075;</h1>
    <p>I am CodeSweetly.</p>
  </body>
</html>

Try it on CodeSandbox

The snippet above used an internal <style> element in the HTML document’s <head> section to style the page’s content.

What Is an External CSS

External CSS styles one or more HTML pages’ content by linking the HTML document to an external stylesheet.

Here’s an example:

body {
  background-color: black;
}
h1 {
  color: orange;
}
p {
  color: lightgreen;
}

Once you’ve created your external .css file, link it to your HTML document using a <link> element inside the page’s <head> section.

Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>External CSS Example – CodeSweetly</title>
    <link rel="stylesheet" href="my-styles.css" />
  </head>
  <body>
    <h1>Hello there! &#128075;</h1>
    <p>I am CodeSweetly.</p>
  </body>
</html>

Try it on CodeSandbox

Most developers prefer using external CSS to style HTML documents because it aligns with the “separation of concerns” coding practice and makes styles easy to reuse, read, and modify.

Support CodeSweetly