There are three ways to add CSS to an HTML document:
Inline CSS
Apply styles directly to HTML elements using the style attribute. Best for quick, element-specific styling.
<p style="color: blue; font-size: 16px;">
This text is blue and 16px
</p>
This text is blue and 16px
</p>
Internal CSS
Place CSS rules inside a <style> tag within the HTML document's <head> section. Good for single-page styling.
<style>
p {
color: blue;
font-size: 16px;
}
</style>
p {
color: blue;
font-size: 16px;
}
</style>
External CSS
Link to an external .css file using the <link> tag in the HTML head. Best practice for maintaining styles across multiple pages.
<link rel="stylesheet" href="styles.css">
/* In styles.css */
p {
color: blue;
font-size: 16px;
}
/* In styles.css */
p {
color: blue;
font-size: 16px;
}