Understanding the Three Ways to Implement CSS in HTML
When I first learned HTML and CSS, I would always get confused about how to implement CSS in my project. Now that I have understood it after years of practice, I want to share my understanding with you. In this article, we will discuss three ways of implementing CSS in HTML in this article, along with when each should be used.
1.Inline CSS
You include your style directly within an HTML element that you want to use style. You will use the style attribute.
<h2 style="color: blue;">Hello, Codu Readers!</h2>
Inline CSS is useful for quickly applying small styling changes to only one or a few specific elements. However, if you want to change the styling for multiple elements, it can be difficult to maintain consistency and readability.
2.Internal CSS
In this one, you include CSS styling within the head section of an HTML document. You will use the style tag. For example:
<head>
<style>
h2 {
color: blue;
}
</style>
</head>
<body>
<h2>Hello, Codu Readers!</h2>
</body>
If you need to apply styles to many elements within the same HTML document, internal CSS is an excellent choice. This will allow you to keep all your styling code in one place, and in the HTML document, which can make it easier to maintain and update. However, if you have multiple HTML documents that require the same styling, you may need to duplicate the CSS code in each document, which can be tedious, time-consuming, and error-prone.
3.External CSS
In this one, you would include your CSS styling in a separate file with the ".css" as the filename extension, which will be linked to the HTML document. It's common to name your CSS file as styles.css.
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h2>Hello, Codu Readers!</h2> </body>
The external CSS option is the most flexible and maintainable, as it lets you place all of your styling code in a separate file that can be linked to different HTML documents. This makes it easier to apply consistent styling across your entire website and to update your styling code in one place if needed.
To add up, given its flexibility and maintainability, external CSS is frequently the best choice for larger or more complicated projects. However, for smaller projects or simple styling changes, inline or internal CSS may be more appropriate.
