The HTML <style> tag defines style rules for an HTML document. It defines how HTML elements are rendered in a browser. We write CSS code inside the <style> tag. For example,
<style>
h1 {
color: red;
}
</style>
<h1>Heading</h1>
Browser Output
Here, the styling for the <h1> tag is coming from the h1 selector inside the <style> tag.
The HTML <style> tag is one of the specific tags that are placed inside the <head> of the document.
Multiple Style tags
We can have multiple <style> tags in a document. For example,
<style>
h1 {
color: red;
}
</style>
<style>
h2 {
color: blue;
}
</style>
<h1>Heading</h1>
<h2>Sub Heading</h2>
Browser Output
Here, we have specified color red for <h1> tags and blue for <h2> using different <style> tags.
Conflicting Styles
When there are two <style> tags for the same element or elements it is called conflicting styles. In this case, the value from the latter style one will be applied to the HTML element. For example,
<head>
<style>
h1 {
color: red;
}
</style>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>This is a Header</h1>
</body>
Browser Output
Here, we have two style tags that define a style for <h1> elements. The value from the second <style> is applied to the <h1> tag. Hence, the text color of <h1> is blue.
style attribute
We can also use the style attribute to style HTML elements. For example,
<p style="color: red; font-weight: bold;">This is styled using the style attribute.</p>
Browser Output
Here, you can see that we have used the style attribute inside the <p> tag to change its color and font-weight.
The style attribute is a global attribute, i.e. it can be applied to all HTML elements.