HTML - <style> tag

The 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

Following is the syntax of the <style> tag −

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

Example

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>

When we run the above code, it will generate an output consisting of the text applied with the CSS displayed on the webpage.

Example

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>

On running the above code, the output window will pop up, consisting of the CSS properties applied to the text displayed on the webpage.

Example

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>

When we run the above code, it will generate an output displaying the text with CSS applied when the user tries to change the viewport width, i.e., greater than 500 pixels, the text changes the CSS property.

html_tags_reference.htm
Advertisements