html tutorial - <style> Tag in HTML - html5 - html code - html form



style tag in html

Learn html - html tutorial - style tag in html - html examples - html programs

  • The <style> tag is holds style information for a HTML document or part of a document.
  • In HTML, each document can contain multiple <style> tags.
  • The <style> tag supports Global Attributes and Event Attributes.
  • <style> element belongs to Metadata content, and if the scoped attribute is present flow content.
learn html -  html tutorial -  html development tutorial -  html examples -  html  -  html script -  html program -  html download -  html samples  -  html scripts

Syntax for <style> tag:

<style>content </style>

Difference between HTML 4.01 and HTML 5 for <style> tag:

HTML 4.0.1

  • HTML 4 is does not support “scoped” attributes of <style> tag.

HTML 5

  • HTML 5 is support “scoped” attribute of <style> tag.

Sample Coding for <style> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy style tag</title>
        <style>
            h1 { color: blue; }
            p { font-size:38pt;color: red; }
        </style>
    </head>
    <body>
        <h1>Welcome to Wikitechy</h1>
        <p>This is a paragraph with style.</p> 
    </body>
</html>

Code Explanation for <style> tag:

<style> Tag Code Explanation

  1. <style> tag is used to set color for a <h1> tag and set the font-size and color for a <p> tag.

Output for <style> tag:

<style> Tag Output

  1. The <h1> tag “Welcome to Wikitechy” content will be displayed in blue color, which is specified in <style> tag.
  2. The <p> tag “This is a paragraph with style.” content will be displayed in red color and font-size as 38pt, which is specified in <style> tag.

Attributes of <style> tag:

Attribute Value HTML4 HTML5 Description
media media_query Yes Yes The attribute define which media the CSS style should apply to.
scoped scoped No Yes This attribute is used to define the style only to this element’s parent element and that element’s child element.
type text/css Yes No This attribute is used to define the media type of the <style> tag.

Browser Support for <style> tag in HTML:

Yes Yes Yes Yes Yes

Tips and Notes

  • Use the <link> tag to link an external style sheet.
  • Each <style> tag must be located in the head section, if the “scoped” attribute is not used.

Related Searches to style tag in html