New Check out the curated list of the finest design resources I've gathered for you! Take a look →

What is the Difference Between Inline CSS, Internal CSS, and External CSS?

This guide will walk you through the distinctions and benefits of each CSS type.

Inline CSS

Inline CSS is used to apply styling directly within a specific HTML tag or element. It is typically added using the “style” attribute. This type of CSS is beneficial for making quick and specific styling changes to individual elements. An example of inline CSS code would be:

<p style="color: blue; font-weight: bold;">This text is styled using inline CSS.</p>

Internal CSS

Internal CSS, also known as embedded CSS, is placed within the head section of an HTML document using the “<style>” tag. This allows multiple HTML elements to be styled using the same CSS rules. Internal CSS is useful for applying consistent styles across multiple pages of a website. Here is a sample code for internal CSS:

<style>
  h1 {
    color: red;
    font-size: 24px;
  }
  p {
    color: green;
  }
</style>

External CSS

External CSS involves linking an external stylesheet file to an HTML document using the “<link>” tag within the head section. This allows styling to be separated from the HTML code, making it easily reusable and maintainable. By using external CSS, you can apply consistent styles to multiple web pages effortlessly. Example code for external CSS:

<link rel="stylesheet" type="text/css" href="styles.css">

Conclusion

In conclusion, the main difference between inline CSS, internal CSS, and external CSS lies in their usage and scope. Inline CSS is used to style individual elements, internal CSS is ideal for multiple pages within a website, and external CSS allows for global styles across multiple web pages. By understanding and utilizing these different CSS types, you can effectively style and design your webpages.

Check out my other posts for more web development tips and tricks!

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment