DEV Community

Cover image for Types of CSS: Inline, Embedded, and External
Sharique Siddiqui
Sharique Siddiqui

Posted on

Types of CSS: Inline, Embedded, and External

#css #beginners #webdev #frontend

When building a website, CSS (Cascading Style Sheets) is the key to making your pages visually appealing and user-friendly. But did you know that CSS can be applied to HTML in different ways? Understanding the three main types—inline, embedded, and external CSS—is essential for writing clean, maintainable code.

In this post, we’ll explore each type, their syntax, advantages, disadvantages, and when to use them.

1.Inline CSS

Inline CSS means writing styles directly within an HTML element using the style attribute.

Example:

xml
<p style="color: blue; font-size: 18px;">
  This is a paragraph with inline style.
</p>
Enter fullscreen mode Exit fullscreen mode

Advantages:

  • Quick and easy to apply.
  • Perfect for testing small changes.
  • Styles affect only the specific element.

Disadvantages:

  • Code becomes cluttered in large projects.
  • Poor maintainability and reusability.
  • Difficult to apply consistent styling across multiple elements.
  • Best use case: Quick fixes or applying a unique style to a single element.

2.Embedded (Internal) CSS

Embedded CSS means writing styles inside an HTML document, but in a separate <style> block within the <head> section.

Example:

xml
<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>This paragraph has embedded styling.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Advantages:

  • Keeps styling separate from content (unlike inline).
  • Easier to manage than inline when styling multiple elements.
  • Useful for single-page websites.

Disadvantages:

  • Styles are limited to one HTML file.
  • Not efficient for large sites with multiple pages.
  • Best use case: Small projects or single-page sites where reusing CSS globally isn’t necessary.

3.External CSS

External CSS means storing all the styles in a separate .css file and linking it to your HTML document with a <link> tag.

Example:

xml
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This paragraph uses external CSS.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

And in styles.css:

css
p {
  color: red;
  font-size: 22px;
}
Enter fullscreen mode Exit fullscreen mode

Advantages:

  • Best for maintaining consistency across multiple pages.
  • Cleaner HTML, since all styles are kept separate.
  • Easier collaboration (designers and developers can work on HTML and CSS files independently).
  • Faster maintenance and updating (change once, apply everywhere).

Disadvantages:

  • Requires an additional HTTP request (but can be optimized with caching).
  • Without internet access to the CSS file, pages might look unstyled.

Best use case: Medium to large projects, or any website requiring a consistent design across multiple pages.

Quick Comparison Table

Type Location Best For Maintainability Reusability
Inline Inside HTML element Single-use, quick fixes Poor None
Embedded <style> in Small projects, one-page sites Moderate Limited
External Separate .css file Larger websites, global styling Excellent High

Final Thoughts

Choosing the right type of CSS depends on the size and scope of your project.

  • Use inline CSS for quick, one-off changes.
  • Use embedded CSS for single-page designs.
  • Use external CSS for scalable, professional web projects.

At the end of the day, external CSS is the most powerful and maintainable option, but knowing all three gives you flexibility and control when styling your websites.

Check out the YouTube Playlist for great CSS content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud

Top comments (0)