HTML <style> tag

The section of information that we want to style is contained in html style tag.

It includes CSS, which is used to design the text and images in the web page.

Syntax:

<head>
<title>…………. </title>
<style>
…………….
</style>
</head>

HTML:

<!DOCTYPE html>
<html>
<head>
<title> html style tag </title>
<style>
p {
color: #26b72b;
}
</style>
</head>
<body>
<p>This text will be green. Inline styles take precedence over CSS included externally.</p>
<p style="color: blue">The <code>style</code> attribute can override it, though.</p>
</body>
</html>

CSS:

p {
color: #f00;
}

Output:

The <head> section of a page must have the <style> tag. The general rule is that it is preferable to save your styles in outer style sheets and implement them using <link> tags.

Similar to <link> tags, <style> tags can have media properties that include media queries. This tag allows the users to deploy internal style sheets on a web page only when they are based on media characteristics like viewport and width.

We use <style > element in the head of the document but using style tag in the external stylesheet is more appropriate. Use link tag to apply styles in the stylesheet.

Attributes

media

This characteristic tells us where to deploy the design. If the property is missing, a media query with all valuesare used as the field's value.

Nonce

In order to allow inline styles, a style-src content-security-policy uses a cryptographic nonce which is a one-time use integer. The server must produce a unique nonce value for each transmission of a policy.

type

If this property is specified, the only valid values are macthed for text/css or the empty string.

Examples

A simple stylesheet

The page in the example below is styled using a very basic style sheet:

<!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p> here we are gonna learn about html tag.</p>
</body>
</html>

Output:

Multiple style elements

The following example shows the use of multiple style element:-

<!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p> here we are learning about the html style tag.</p>
</body>
</html>

Output:

Including a media query

In this example, we are initially including a media attribute on the second <style> element:

<!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="all and (max-width: 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>in this example we are going to tell you about few more examples.</p>
</body>
</html>

Browser support:

List of browsers that support html style tag are given here:

Chrome: Yes, version 1 needed.

Microsoft Edge: Yes, version 12 needed.

Firefox: Yes, version 1 needed.

Safari: Yes, version 1 needed.

Opera: Yes, version 3.5 needed.