Skip to main content

Inline, Internal and External CSS

CSS, or Cascading Style Sheets, is a style sheet language used for describing the look and formatting of a document written in HTML. There are three ways to insert CSS into your HTML files: Inline, Internal or External. Each method has its uses and is more appropriate in certain circumstances. Let's dive in and understand each of them.

Inline CSS​

Inline CSS involves adding CSS directly to HTML elements using the style attribute. This approach is straightforward and easy to understand, making it a great starting point for beginners. Here's an example:

<p style="color:red;">This is a paragraph with inline CSS.</p>

In this example, we have used inline CSS to change the color of the paragraph text to red.

However, inline CSS is not recommended for larger projects because it lacks the reusability and scalability offered by internal or external CSS. It also increases the complexity of your HTML document, making it harder to read and maintain.

Internal CSS​

Internal CSS involves adding styles in the <head> section of the HTML document using the <style> tag. This method allows you to define styles for the entire HTML document in one place. Here's an example:

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with internal CSS.</p>
</body>

In this example, we have used internal CSS to change the color of the paragraph text to red. Note that this styling will apply to all <p> tags in the document.

Internal CSS is a step up from inline CSS in terms of reusability and maintainability. However, it still lacks the scalability and modularity of external CSS.

External CSS​

External CSS involves linking to an external .css file from your HTML document. This method allows you to define styles that can be reused across multiple pages. Here's an example:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is a paragraph with external CSS.</p>
</body>

And in the styles.css file:

p {
  color: red;
}

In this example, we have used external CSS to change the color of the paragraph text to red. This styling will apply to all <p> tags across any HTML document that links to the styles.css file.

External CSS is the most powerful and flexible way to use CSS. It provides maximum reusability and maintainability, making it the preferred method for larger projects.

Conclusion​

Each method of inserting CSS has its pros and cons. For quick and simple styling, inline CSS can be useful. For styling a single page, internal CSS can be a good choice. For larger, multi-page projects, external CSS is the way to go. Understanding these methods and when to use them is a crucial part of mastering CSS. So keep practicing and happy coding!