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! 👋</h1>
<p style="color:lightgreen;">I am CodeSweetly.</p>
</body>
</html>
The snippet above used inline CSS to style three HTML elements.
- Use inline CSS sparingly because it deviates from the "Separation of Concerns" coding practice.
- It is best to end each inline style declaration with a semicolon (
;
).
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! 👋</h1>
<p>I am CodeSweetly.</p>
</body>
</html>
The snippet above used an internal <style>
element in the HTML document's <head>
section to style the page's content.
- Use internal CSS sparingly because it deviates from the "Separation of Concerns" coding practice.
- It is best to end each inline style declaration with a semicolon (
;
).
What Is an External CSS
External CSS styles one or more HTML pages' content by linking the HTML document to an external stylesheet.
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! 👋</h1>
<p>I am CodeSweetly.</p>
</body>
</html>
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.
- A
<link>
element links an HTML document to external resources like stylesheets and icons. - The
<link>
tag'srel
(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.