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 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.
<p style="color: red;">This text is red.</p>
- Easy to implement for small, one-time changes
- Not maintainable for larger projects
- Increases HTML file size
- Does not promote separation of concerns
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.
<p>This text is blue.</p>
- Better maintainability than inline CSS
- Useful for small projects or single-page websites
- Can become difficult to maintain in larger projects
- Does not fully promote separation of concerns
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.
<link rel="stylesheet" href="styles.css" />
<p>This text is green.</p>
- Highly maintainable
- Promotes separation of concerns
- Faster loading times due to smaller HTML files
- Requires an additional HTTP request to load the CSS file (mitigated by modern browsers and HTTP/2)
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.