totn HTML

HTML: <style> tag

This HTML tutorial explains how to use the HTML element called the <style> tag with syntax and examples.

Description

The HTML <style> tag is used to embed CSS into the HTML document. It can be placed within the <body> tag or within the <head> tag. This tag is also commonly referred to as the <style> element.

Syntax

In HTML, the syntax for the <style> tag is:

<style>
  h1 { color: blue; }
</style>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <style> tag:

Attribute Description HTML Compatibility
type MIME type of the included resource. If no type is specified, the value of the type attribute will default to text/css. HTML 4.01, HTML5
media Media that the included resource applies to. The value of this attribute is a media query. If no media is provided, the value of the media attribute will default to all. HTML 4.01, HTML5
title Indicates the title of an alternative stylesheet set HTML 4.01, HTML5
nonce Used to whitelist inline styles in a style-src Content-Security-Policy. The nonce (number used once) should be a unique value that is changed every time the policy is updated. HTML 4.01, HTML5
scoped Indicates that the style only applies to its parent and children elements. (This attribute has been deprecated.) HTML 4.01, HTML5

Note

  • The HTML <style> element is found within the <head> tag or <body> tag.
  • The <style> tag is used to embed stylesheet information in the HTML document.

Browser Compatibility

The <style> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <style> tag below, exploring examples of how to use the <style> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <style> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
<style>
   h1 { color: blue; }
</style>
</head>

<body>
   <h1>HTML5 Example</h1>
</body>

</html>

In this HTML5 Document example, we have included CSS within the <style> element to change the color of the <h1> text to blue.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <style> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
<style>
   h1 { color: green; }
</style>
</head>

<body>
   <h1>HTML 4.01 Transitional Example</h1>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have included CSS within the <style> element to change the color of the <h1> text to green.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <style> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
<style>
   h1 { color: red; }
</style>
</head>

<body>
   <h1>XHMTL 1.0 Transitional Example</h1>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have included CSS within the <style> element to change the color of the <h1> text to red.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <style> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
<style>
   h1 { color: blue; }
</style>
</head>

<body>
   <h1>XHTML 1.0 Strict Example</h1>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have included CSS within the <style> element to change the color of the <h1> text to blue.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <style> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
<style>
   h1 { color: green; }
</style>
</head>

<body>
   <h1>XHTML 1.1 Example</h1>
</body>

</html>

In this XHTML 1.1 Document example, we have included CSS within the <style> element to change the color of the <h1> text to green.

Share on: