HTML Style

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

An H1 element styled with CSS from the style tag

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

Elements styled with CSS from multiple style tag

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

Conflicting HTML Style tags

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

Paragraph styled inline using style attribute

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.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges