Types of CSS

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

To create a webpage, know Types of CSS is important to write neat and effective code. Whether you’re a novice user or a pro, understanding which Types of CSS to use (inline, internal, or external) is going make all the difference in how easy it’ll be for you to maintain your website’s design as time goes on.

1. Inline CSS

Inline CSS is used when you want to apply a unique style on a specific HTML element. The style attribute is inserted directly into the HTML tag that surrounds it.

Syntax: <tagname style=”property: value;”>

Example: HTML <h1 style=”color: blue; text-align: center;”>This is a Blue Heading</h1>

Pros: Handy for a quick fix or testing one thing.

Cons: Extremely difficult to maintain. This causes “code clutter” and is the most specific which is difficult for it to be overridden later.

When to use: Practically never in professional production, unless you’re doing dynamic styles with JS.

2. Internal (Embedded) CSS

Internal CSS It is placed on the <style> element in the <head> section of an individual HTML document.

Syntax: html<head><style>body { background-color: linen; }p { color: maroon; }</style> … </head>

Pros: A plus for one-page websites where you don’t want to handle many files.

Cons: The styles will only apply to that one page. If you have 10 pages, 10 times you must copy-paste the code.

When to use: Small one-page landing pages or email templates.

3.External CSS

This is the industry standard. You put your CSS into another file (with a . css extension) and connect it to your HTML document with a <link> tag.

Syntax: HTML<head> <link rel=”stylesheet” href=”style. css”> </head>

Pros:
Efficiency: One CSS file can change the appearance of thousands of pages.

Performance: The CSS file gets cached by browsers as the result, and all other subsequents visits can be done much faster.

Organisation: Keeps HTML structure and CSS styling completely independent.

Cons: Extra HTTP request to download the file (but this is nothing with today’s internet).

When to use: 99% of the time. That’s Bootstrap: you link to the external Bootstrap.css file and style every page on your site.

Browser default (Lowest priority)

Feature	Inline CSS	Internal CSS	External CSS
Priority	Highest (1st)	Medium (2nd)	Lowest (3rd)
Maintenance	Very Hard	Hard	Easy
Reusability	None	One Page Only	Entire Website
Best For	Quick Testing	Single Pages	Professional Projects

The “Cascading” Order

It’s called Cascading Style Sheets for a reason: it’s hierarchical. However, if you apply styles from all these three ways to the same element, the browser dates this hierarchy of importance: