Dofactory.com
Dofactory.com

HTML <style> Tag

The <style> tag defines CSS styles for a page.

These styles can be applied to elements on the same page.

The <style> element should be located in the <head> section.

Example

#

A <style> element with a CSS class that is applied to a <div> element.

Purchase completed!
<style>
  .success {background:#e5fff2;padding:20px; font-style:italic;}
</style>

<div class="success">
  Purchase completed!
</div>

Using <style>

The <style> tag should be located in the <head> section.

However, browsers do allow <style> elements anywhere in the page <body>.

A page can have multiple <style> elements.

More Examples

A <style> element that defines styling for a discount coupon.

COUPON
25% OFF!
<style>
   .coupon { 
       background: floralwhite;
       border: 4px dashed #345;
       padding:25px;
       font-size:30px;
       font-weight:bold;
       text-align:center;
       width:300px;
   }
</style>

<div class="coupon">
  COUPON<br />
  25% OFF!
</div>

Attributes for <style>

This table lists the <style> tag attributes.

Attribute Value Description
media media-query Media or device the styling information is optimized for
type text/css Media type
id   identifier Defines a unique identifier for the style element.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attribute listed below.  It is not valid on the style tag in HTML5.

Attribute Description Alternative
scoped Specifies that the styles only apply to the elements of its parent(s) and children.
n/a

Did you know?

Did you know?

HTML supports a <style> element and a style attribute

Indeed, they both help with styling web pages and their elements.

A <style> element defines styles for the entire page.

And a style attribute only styles the element it is placed on.

The style attribute has some limitations: it does not support pseudo elements or pseudo classes like :before or :hover, and it offers no support for media queries.


Page Tags

The <style> tag is part of a group of tags that define the structure and style of a web page. This group is referred to as the Page tag group. Together, they allow you to create solid, well-structured web pages.

Here is the complete list.

Element Description
<!DOCTYPE> Must appear on the first line of a page. Specifies the HTML version
<html> Defines the root container for an HTML document
<head> Creates a head container that holds page-level metadata elements
<meta> Provides metadata about a web page
<link> Defines a link to an external source, such as a style sheet
<base> Sets the base URL for all relative URLs on a page
<script> Adds JavaScript to a page. Either client- or server-side
<style> Adds CSS style elements to a page
<title> Specifies the page title that displays in the browser's tab
<body> Specifies a container for the content of the page, with text, links, images, etc.

Browser support

Here is when <style> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like


Last updated on Sep 30, 2023




Guides