CSS and It's Type

In this tutorial, we study CSS and go in-depth comparing the three types of CSS styles: Internal, External and Inline.

What is CSS?

CSS stands for Cascading Style sheet. It is a markup language responsible for how your web pages will look like. It controls the colors, fonts, and layouts of your website elements.

There are three ways you can use to implement CSS into your HTML: internal, external, and inline styles.

Internal CSS

Internal or embedded CSS requires you to add a <style> tag in the <head> section of your HTML document.

Here’s how you can use internal CSS:

Open your HTML page and locate the <head> opening tag.
Put the code right after the <head> tag
Add CSS rules on a new line.
Type the closing tag:

External CSS

With external CSS, you’ll link your web pages to an external .css file, which can be created by any text editor on your device (e.g., VScode).

Follow these steps to use external CSS:

Create a new .css file with the text editor, and add the style rules.
In the <head> section of your HTML sheet, add a reference to your external .css file right after the <title> tag:

Inline CSS

Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors.

This CSS type is not recommended, as each HTML tag needs to be styled individually. Managing your website may become too hard if you only use inline CSS.

However, inline CSS in HTML can be useful in some situations. For example, in cases where you don’t have access to CSS files or need to apply styles for a single element only.

Conclusion

In this tutorial, you’ve learned the difference between the three types of CSS: internal, external, and inline. Here’s the recap:

Internal or embedded ⁠— add <style> tag in the <head> section of the HTML document
External ⁠— link the HTML sheet to a separate .css file
Inline ⁠— apply CSS rules for specific elements.

CSS & It's Type

Table of contents