HTML <style> Tag
The <style> tag in HTML is used to embed Cascading Style Sheets (CSS) directly into an HTML document. This method allows you to define the visual appearance of your web page elements within the HTML file itself, without the need for a separate CSS file. The styles you define inside the <style> tag will apply to the elements within the HTML document where the <style> tag is present.
Syntax
<style type="text/css" media="screen | print | speech | all">
/* CSS rules go here */
selector {
property: value;
}
</style>
Attributes
| Attribute | Value | Description |
|---|---|---|
type |
text/css |
Specifies the MIME type of the style information. The default value is text/css. |
media |
screen print speech all |
Specifies which media or device the style should be applied to. Multiple values can be used, separated by commas. The default value is all. |
nonce |
string |
A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given style will be allowed to be applied |
title |
string |
Specifies an alternate style sheet. |
disabled |
disabled |
Makes the style sheet non-effective |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Style Tag Example</title>
<style type="text/css">
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to my Website</h1>
<p>This is a paragraph styled with the <style> tag. All the content is inside the body tag.</p>
</body>
</html>
More Examples
Example 1: Applying different styles for different media
This example shows how to apply different styles when printing the page.
<!DOCTYPE html>
<html>
<head>
<title>Media Specific Styles</title>
<style type="text/css" media="screen">
body {
background-color: lightblue;
}
h1 {
color: darkgreen;
}
</style>
<style type="text/css" media="print">
body {
background-color: white;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>This heading will change colors based on screen vs print</h1>
<p>The background and the heading will appear differently when printing</p>
</body>
</html>
In the example above, the screen will display with a light blue background with a dark green heading, while the print version will display with a white background with a black heading.
Example 2: Using a title for alternate stylesheets
This example illustrates how you can create alternate style sheets that the user can switch between.
<!DOCTYPE html>
<html>
<head>
<title>Alternate Stylesheets</title>
<link rel="alternate stylesheet" type="text/css" href="alternate-style.css" title="Alternative Style">
<style type="text/css" title="default">
body {
background-color: lightgray;
}
h1 {
color: darkred;
}
</style>
</head>
<body>
<h1>The main style is light gray and red</h1>
<p> This is an example of alternate stylesheets.</p>
<p>To activate the alternate stylesheet you will need a browser that supports it. For example Chrome needs to have an extension for it.</p>
</body>
</html>
In this case we have the default style defined inside the style tag, and another alternate style sheet defined in a linked file. The user can then enable the alternate style sheet if their browser allows it.
Example 3: Using nonce for enhanced security
<!DOCTYPE html>
<html>
<head>
<title>Style with Nonce</title>
<meta http-equiv="Content-Security-Policy" content="style-src 'nonce-myrandomstring'">
<style type="text/css" nonce="myrandomstring">
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is a heading styled with nonce</h1>
<p> This style will only be applied if the nonce attribute in the meta tag matches this nonce string. Without this match it will not apply.</p>
</body>
</html>
In this case we are specifying a unique nonce string that is also present in the meta tag's content security policy. This enables better security.
Browser Support
The <style> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
-
Placement: It's best practice to include the
<style>tag within the<head>section of your HTML document. This helps ensure that the styles are loaded before the content is rendered, providing a better user experience. -
Specificity: Styles defined within the
<style>tag have a high level of specificity. Inline styles (styleattribute on elements) have even higher specificity and override styles defined using the<style>tag, and external stylesheets (<link>) have the least specificity. -
Maintainability: While embedding CSS is useful for small, simple websites or quick tests, it’s generally better to use external style sheets for larger projects. It improves the organization, maintainability, and reusability of styles across multiple HTML files.
-
Media Queries: You can use media queries within the
<style>tag to create responsive designs that adapt to different screen sizes and devices. -
Alternate Style Sheets: You can use the title tag within the style tag to denote and differentiate between different styles, so the user can have an alternative view of the page.
-
Security: When using nonce with Content Security Policy (CSP) make sure the value of nonce is a cryptographic string that is random, and changes for every request. This will prevent injection attacks.
