Skip to main content

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 an individual HTML element by adding a style attribute on the 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.

note

What Is an Internal CSS?​

Internal CSS styles an HTML page's content by adding an HTML <style> element in the <head> section of the HTML document.

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.

note

What Is an External CSS​

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

Buy sketchbook for web design, app development, software engineering
info

You can use any text editor, such as VSCode, to create an external CSS stylesheet by saving the file with a .css extension—for instance, my-styles.css.

Here's an example:

/* my-styles.css */

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. It also makes styles easy to reuse, read, and modify.

note
  • A <link> element links an HTML document to external resources like stylesheets and icons.
  • The <link> tag's rel (relationship) attribute defines the relationship between an HTML file and its linked document.
  • The href attribute specifies the linked document's URL.
  • It is best to end each inline style declaration with a semicolon (;).

Overview​

  • Inline CSS styles only the element on which you used it.

  • Internal CSS can style multiple HTML elements within the document you used it.

  • External CSS can style multiple HTML elements in one or more HTML documents.

Tags:
Last updated on by Oluwatobi Sofela
Rakuten Kobo US