``3 Types of CSS with Examples

Inline CSS

Inline CSS is generally used to style a specific HTML element only. We can write inline CSS simply by adding the style attribute to each HTML element.

For Example:
<h1 style="background-color:yellow;"> This is a heading </h1>
<p style="color:red"> This is some paragraph </p>

This CSS type is not recommended, as each HTML tag needs to be styled individually. Managing a website may be difficult if we use only inline CSS.

Advantages

• You can easily and quickly write inline CSS to an HTML page. It is useful for testing or previewing the changes, and performing quick fixes to your website.
• You don’t need to create or link a separate document as required in the external CSS.

Disadvantages

• Generally, Inline CSS needs to be written in each HTML tag individually. So managing a website may be difficult if we use only inline CSS.
• Adding CSS property to every HTML tag is time-consuming. Styling multiple elements can affect your page’s size and download time.

Internal CSS

Internal CSS is also known as embedded CSS. It is generally used to style a single page. We can write internal CSS inside a style tag within the HTML pages.

This CSS type is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS style on every page of your website.

External CSS

With an external CSS, you can change the look of an entire website by changing just one file. We can write external CSS in a separate .css file. Each HTML page must include a reference to the external CSS file inside the tag, inside the

Which is Commonly used in CSS?

All three methods of applying CSS styles—inline, external, and internal—are commonly used, depending on the requirements of the website or web application. However, external CSS is the most popular as it separates content and presentation, facilitating easier maintenance and updates across multiple pages.

Inline CSS is typically reserved for small, specific changes to individual elements, but excessive use can clutter HTML and hinder readability.

Internal CSS is employed for styles specific to a page or section, offering tailored design without affecting the entire site.

The choice among these methods depends on project needs: Inline CSS is quick but cumbersome to manage, external CSS is widely favored for consistency and control, while internal CSS suits cases requiring unique styles for particular elements or pages.

Learn more with Examples here: Types of CSS: Differences & Priority Explained