The <style> attribute is primarily used within the <head> section of an HTML document to define styles for specific HTML elements. However, it can also be used inline within an element to style that particular element.
Internal style
<head>
<style>
/* CSS rules here */
</style>
</head>
Example
<head>
<style>
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a red, bold paragraph.</p>
</body>
Key Points
- Specificity: Inline styles have the highest specificity, followed by internal styles, and then external stylesheets. This means that if you have conflicting styles, the inline style will override the internal style, which will override the external style.
- Readability: While inline styles can be convenient for quick styling, they can clutter your HTML code. For more complex styles, it’s better to use internal or external stylesheets.
- Maintainability: External stylesheets are generally the most maintainable way to style your HTML, as they allow you to separate your styles from your content.