HTML Style Tag & Attributes

1.HTML style tag

The content within the <style> element is used to define style information for an element. with the help of <Style> element, you specify how HTML elements should look in a  web browser. And we also call the style element as the mini CSS of the HTML document. because this element lets you define the embedded CSS of a webpage.

For Example:-

  1. <html>
  2.   <head>
  3.       <style>
  4.           h1 {color:red; font-size:22px }
  5.           p {color:blue; font-size:18px; }
  6.       </style>
  7.     </head>
  8.  
  9.     <body>
  10.        <h1>A heading</h1>
  11.        <p>A paragraph.</p>
  12.       </body>
  13. </html>

 

When a web browser reads a <style> element and a style attribute, the web browser will format the HTML element according to the information between the <style> tag and the style attribute. If some style properties and their value are defined for the same element in a different <style> element, then the last read style properties will be used. Unless the CSS properties  ! important to used.

Example:

<style>

   h1{color: Lightblue !Important;}

</style>

If we use id selector, class selector, and element selector on the same element with the same properties and their values then the browser will give priority to the id selector first. We will learn more about style sheets in CSS tutorials.

Attributes for HTML style tag:-

There are two attributes for the style element:

AttributesValueDescription
Mediamedia_queryThe media attribute in the style element specifies what media/device the linked document is optimized for.
Typetext/CSSthe type attribute specifies the media type of the <style> element

The HTML <style> tag also supports the Global Attributes and Event Attributes.

 


2.HTML style Attribute:-

Style attribute: Inline CSS:-

The style attribute is used in the opening tag of an HTML element that specifies an inline style (CSS) for an HTML element. The style attribute of an HTML element will override any style set that specified in the <style> element or in an external style sheet (CSS). This attribute lets you define the inline CSS of a webpage.

For Example:-

<h1 style=“color:red; text-align:center; background-color:grey;”>This is a heading level 1 example</h1>
<p style=“color:green; font-size:1.8px;”>This is a paragraph example.</p>

The Style attribute can apply to all HTML elements because this attribute is a part of a global attribute. And it is supported by the following web browsers: Google Chrome, Firefox, Opera, Safari, and Edge.