3 Best Ways to Add CSS to HTML
Mastering Style: 3 Best Ways to Add CSS to Your HTML Documents
There are several ways to add CSS (Cascading Style Sheets) to HTML documents.
Here are three commonly used methods:
-
Inline CSS:
-
Inline CSS is applied directly within the HTML tags using the style attribute.
-
Example:
html<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p> -
While this method is quick and easy, it's generally not recommended for large-scale styling due to maintenance issues.
-
-
Internal (or Embedded) CSS:
-
Internal CSS is placed within the <style> element in the head section of the HTML document.
-
Example:
html<!DOCTYPE html> <html> <head> <style> p { color: green; font-size: 18px; } </style> </head> <body> <p>This is a paragraph with internal CSS.</p> </body> </html> -
Internal CSS allows you to define styles for multiple elements in one place, improving maintainability.
-
-
External CSS:
-
External CSS involves creating a separate CSS file and linking it to the HTML document using the <link> element.
-
Example:
styles.css:
css/* styles.css */ p { color: red; font-size: 20px; }index.html:
html<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with external CSS.</p> </body> </html> -
External CSS promotes a clean separation of HTML structure and CSS styles, making it easier to maintain and update styles across multiple pages.
-