Ways CSS Can Be Added to HTML

Cascading Style Sheets (CSS) can be added to HTML in three main ways. These methods allow developers to style web pages and control the appearance of HTML elements. The methods are:

1. Inline CSS

Inline CSS is used to apply style directly to a specific HTML element using the style attribute.

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

Pros: Quick and easy for single elements.
Cons: Not reusable and makes code harder to maintain.

2. Internal CSS

Internal CSS is defined within a <style> block inside the <head> section of the HTML document.


      <style>

        p { color: blue; }

      </style>

Pros: Useful for single HTML files.
Cons: Styles are not shared between pages.

3. External CSS

External CSS is written in a separate file (e.g., style.css) and linked to the HTML file using the <link> tag.


      <link rel="stylesheet" href="style.css">

Pros: Best for large websites, allows reusability and separation of content from style.
Cons: Requires an additional file.

Conclusion

Choosing the right method depends on the size and purpose of the project. For large and professional websites, external CSS is recommended for maintainability and cleaner code.