HTML - <style> tag

HTML <style> tag contains style information for an HTML document or part of a document. This includes CSS (Cascading Style Sheets), which is applied to the content of an HTML document containing a <style> tag.

The <style> tag is used to declare the style sheets within the head element for the HTML document. We can have multiple style elements in a single head element. Generally, CSS is of three types, and if we use the style element inside the head element, then this CSS is known as internal CSS.

Syntax

<style>.....</style>

Attribute

HTML style tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed below.

Attribute	Value	Description
media	media_query	Specifies what media/device the media resource is optimized for.
type	text/css	Specify the media type.

Examples of HTML style Tag

Bellow examples will illustrate the usage of style tag. Where, when and how to use style tag to style your html document.

Styling html document using style Tag

In the following program, we are using the HTML <style> tag to apply a simple stylesheet(CSS) to the HTML documents.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML style Tag</title>
   <style>
      h1 {
         color: green;
         font-size: 40px;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>Text within h1 tag</h1>
</body>
</html>

Adding multiple Style Tag

The following is another example of the HTML <style> tag. Here, we're including two <style> tags to the applied stylesheet on the HTML document, and see how conflicting declarations in the later style element override the earlier one, if they have the same specificity.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML style Tag</title>
   <style>
      p {
         color: rgb(17, 114, 217);
         font-size: 40px;
         font-style: italic;
         font-weight: bolder;
      }
   </style>
   <style>
      p {
         color: red;
         font-size: 35px;
         font-family: 'Franklin Gothic Medium', 
                      'Arial Narrow', Arial, sans-serif;
      }
   </style>
</head>
<body>
   <p>Text within p tag</p>
</body>
</html>

Meadia Query using style Tag

In this example, we are using the media(i.e. media query) attribute with the second "style" element. So it is only applied on the HTML document when the viewport(screen size) is less than 500px in width.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML style Tag</title>
   <style>
      h3 {
         color: red;
         font-size: 25px;
         font-style: italic;
      }
   </style>
   <style media="all and (max-width: 500px)">
      h3 {
         color: green;
         font-size: 30px;
         font-weight: bolder;
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 
                      'Trebuchet MS', sans-serif;
      }
   </style>
</head>
<body>
   <h3>This is the 'h3' HTML element.</h3>
</body>
</html>

Supported Browsers

Tag
style	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm