Skip to main content

Inline, Internal, and External CSS

There are three methods for implementing CSS in your web projects: inline, internal, and external. Each method has its advantages and disadvantages. In this tutorial, you will learn about these three types of CSS, along with sample code and simple explanations to help you understand when and how to use each method effectively.

Inline CSS​

Inline CSS applies styles directly to an HTML element using the style attribute. While this method may be useful for quick testing, it is not recommended for most projects due to its poor maintainability and scalability.

Example:

HTML
<p style="color: red;">This text is red.</p>

Advantages:

  • Easy to implement for small, one-time changes

Disadvantages:

  • Not maintainable for larger projects
  • Increases HTML file size
  • Does not promote separation of concerns

Internal CSS​

Internal CSS places styles within a <style> tag in the <head> section of an HTML document. This method can be useful for small projects or single-page websites but may become difficult to maintain in larger projects.

Example:

HTML
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This text is blue.</p>
  </body>
</html>

Advantages:

  • Better maintainability than inline CSS
  • Useful for small projects or single-page websites

Disadvantages:

  • Can become difficult to maintain in larger projects
  • Does not fully promote separation of concerns

External CSS​

External CSS creates a separate .css file and links it to the HTML document using the <link> tag. This method is recommended for most projects, as it promotes maintainability, separation of concerns, and faster loading times.

Example:

HTML
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>This text is green.</p>
  </body>
</html>
styles.css
p {
  color: green;
}

Advantages:

  • Highly maintainable
  • Promotes separation of concerns
  • Faster loading times due to smaller HTML files

Disadvantages:

  • Requires an additional HTTP request to load the CSS file (mitigated by modern browsers and HTTP/2)

Conclusion​

In this tutorial, you learned about the differences between inline, internal, and external CSS, along with their use cases, advantages, and disadvantages. With this knowledge, you can decide which method to use for your web projects and ensure that your CSS implementation is efficient and maintainable.