The 3 Types of CSS: External, Internal & Inline

In this article, we'll cover the three different ways of including CSS in your HTML pages while keeping your code organized and clean. Each option has its own benefits, but one really shines above the others, allowing for a much cleaner code set, easier reusability, and more scalability.

Let's dive into each of the options!

External CSS

This, by far, is the best option when utilizing CSS on your website, especially in production environments. It helps keep your HTML and CSS code separate from each other, providing a much cleaner code set and better organization of your code overall.

To include an external CSS file in your HTML page, use the link tag like we'll use in this example:

<link type="text/css"
	href="/style.css"
	rel="stylesheet"
	media="all" />

Make sure to include this between your opening and closing head tags. Doing so will ensure that the styling methods you define are loaded before your HTML elements which will help prevent layout shifting after page load.

Including external CSS files after your page contents will cause a page layout shift and negatively affect your CLS (Cumulative Layout Shift) score for Google's Core Web Vitals algorithm. So it's best to include your CSS files in the head block of your code to prevent these layout shifts from happening.

The link tag has a few attributes that are worth discussing, so let's get into each of them:

type: Make sure to specify text/css as the type so your browser knows how to compile the CSS code in the file location you provide. Specifying any other value may provide unwanted results on your web page.
href: This is the location relative to the root of your website or web application. Setting the href value to "/style.css" assumes that this file exists in the root folder of your website.
rel: Like the type attribute, the rel attribute also needs to be set to "stylesheet" so the browser knows how to compile the code. Specifying any other value may provide unwanted results on your web page.
media: This attribute is optional and is set to screen by default if omitted from the link tag. screen means the defined CSS rules will only be visible on monitors, print means the defined CSS rules will only be visible when using a printer or printing to a format like PDF, and all means any device type will adopt the specified CSS rules.

Again, this is the best option, in my opinion, especially when working in production environments where you definitely want to keep your code as minimal and as clean as possible.

Note that in production environments it's best to minify your CSS code when imported as an external source. Toptal provides an excellent resource and can be found by following the previous link.

Internal, or Embedded, CSS

Including CSS internally is when you're defining your CSS directly in your HTML file using the style tag. This is still performed in your head code block and can be a good solution in cases where you have only a few rules to define that are specific to the current page.

Internal CSS can be defined in your HTML file like this:

<style>
	body {
		width: 100%;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #333;
		text-align: left;
		padding: 0px;
		margin: 0px;
	}
</style>

Inline CSS

Inline CSS is when you apply the style attribute to any given tag. Here's a quick example:

<body style="width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333; text-align: left; padding: 0px; margin: 0px;">
	...
</body>

This is my least favorite option as it limits you from using the applied CSS rules to similar tags, prevents code reusability and scalability, and also bloats your code beyond belief when you have a lot of rules to define.

Conclusion

In conclusion, the best option to use in my opinion is the external CSS option by importing the CSS file with the link tag. However, there are use cases where the other two options can be beneficial, like when they're page or tag-specific rules that are being defined.

Created: January 17, 2022