Akhil Bhadwal | 10 Dec, 2022

Types of CSS


Cascading Style Sheets or CSS is a markup language that decides the manner in which web pages or websites appear to the visitors. It helps in manipulating the colours, fonts, and layouts of various website elements.

CSS also allows adding animations or effects to a website, such as animated backgrounds and click button effects. Without CSS, a website will be rendered as a plain HTML webpage, which is, obviously, not attractive.

3 Types of CSS Styles

There are some distinct ways of implementing the CSS code. These are known as CSS styles. Three types of CSS styles are available; inline CSS, external CSS, and internal CSS.

Types of CSS

Although each of the CSS styles serves the same goal i.e. styling HTML code, how it is done is different for each. We will explore each of the CSS styles in the following section:

1. Internal CSS

Also known as embedded CSS, internal CSS refers to the practice of adding the CSS code to the HTML document pertaining to the web page where we wish to add the CSS styling.

For adding internal CSS, one needs to add the <style> tag inside the <head> section of the HTML file. Internal CSS is extremely useful for styling a single web page.

How to Use Internal CSS

  • Step #01 - Open the HTML file and go to the <head> tag.
  • Step #02 - Add <style type="text/css"> here.
  • Step #03 - Now, add the CSS code starting from the following line.
  • Step #04 - Close the <style> tag using </style>.
  • Step #05 - Save the HTML file for the changes to take effect.

Pros

  • No need to upload multiple files as the CSS code is added to the same HTML file corresponding to the web page.
  • Class and ID selectors can be used.

Cons

  • Adding CSS code to the HTML file results in increasing the page size and therefore, reducing the loading speed.
  • Using it for multiple web pages is ineffective as it is required to add the same CSS rules for every web page.

Check out this comprehensive CSS cheat sheet!

2. External CSS

To qualify for the external CSS style, a web page is required to be linked to an external file containing the CSS code. External CSS is a super-effective CSS styling method when developing a big website.

One can create the external .css file using some text editor, such as Notepad and Rapid CSS Editor. Here, the CSS code resides in a document other than the one containing the HTML code for the concerned web page, hence the name.

All minor and major changes for a website leveraging external CSS can be made merely by editing the single external .css file.

How to Use External CSS

  • Step #01 - Open a text editor and create a new file. Add the CSS code here that you wish to apply to the HTML web page(s).
  • Step #02 - Save the file as .css file and exit.
  • Step #03 - Open the HTML document where you wish to apply the CSS code.
  • Step #04 - Navigate to the <head> section in the HTML file and insert a reference to the external CSS file just after the <title> tag.
  • Step #05 - Save the HTML file.

Pros

  • A single external CSS file can be used for styling several web pages.
  • HTML files leveraging external CSS have a cleaner structure and are smaller in size.

Cons

  • Linking to or uploading several external CSS files might decrease a website’s download speed and affect its performance.
  • Web pages requiring the external CSS file might not be rendered accurately until the same is fully loaded.

CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)

3. Inline CSS

Unlike internal and external CSS styles, the inline CSS style is used for styling a particular HTML element and not the entire HTML code. For implementing inline CSS, one needs to add the style attribute to every HTML tag that requires styling. Selectors aren’t used here.

Maintaining a website only by using inline CSS is impractical. This is so because following the inline CSS styling every HTML tag must be styled separately. Hence, using it isn’t recommended.

Inline CSS, however, is quite useful in some particular scenarios. For instance, situations in which:

  • The CSS style must be applied only to one element, or
  • When access to CSS files isn’t available.

This type of CSS styling is used mainly for previewing/testing changes as well as applying quick fixes to a web page/website.

How to Use Inline CSS

  • Step #01 - Open the HTML file where you need to add the inline CSS.
  • Step #02 - Now, navigate to the element(s) where you want to insert the inline CSS.
  • Step #03 - Add style="code" to the tag(s) you wish to use the inline CSS at. Here, code is the CSS code that you need to add. For example, if we wish to add inline CSS to <h1> tag, it will look something like this: 
    <h1 style="code">

Pros

  • Allows instantly inserting CSS code to any HTML file.
  • There is no need for creating and uploading a separate file for adding the CSS code.

Cons

  • Adding CSS code to each and every HTML element wastes time.
  • Styling several elements affects page size and download speed.
  • Too much inline CSS can result in a messy HTML structure.

What if I Use All the 3 CSS Styles in a Single Web Page?

It is possible to use each of the 3 CSS styles in one web page. What will result, however, is that the inline CSS style will override the other two CSS styles i.e. inline CSS code will take effect and not the other two. The priority for the 3 types of CSS styles follows this particular order:

inline CSS > internal CSS > external CSS

As you can use, when internal and external CSS styles are used for a web page, the internal CSS style will override the external CSS style.

Conclusion

By this point, you’ll be well acquainted with the 3 types of CSS, namely external, internal, and inline. Each one has its own advantages and disadvantages over the others.

So, be sure to do the research and choose that one CSS style approach that perfectly fits your website/web page requirements. Best of luck!

Want to step-up your CSS game? Check out these best CSS tutorials.

People are also reading:

By Akhil Bhadwal

A Computer Science graduate interested in mixing up imagination and knowledge into enticing words. Been in the big bad world of content writing since 2014. In his free time, Akhil likes to play cards, do guitar jam, and write weird fiction.

View all post by the author

Subscribe to our Newsletter for Articles, News, & Jobs.

I accept the Terms and Conditions.

Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

In this article

Learn More

Please login to leave comments