The style tag in HTML defines CSS inside a web page. Click to see how it works with syntax and examples.
Table of Content
What Is the <style> Tag in HTML?
The <style> tag lets you write CSS inside an HTML file. It applies custom design rules to elements in the same document.
Here is the basic tag:
<style>
/* CSS rules go here */
</style>Use this format when you write your code. Write all style rules between the open tag and the close tag.
The tag links visual design to HTML elements. It sets styles and layout. It keeps all style rules in the same file.
You can place the <style> tag in different parts of the HTML document.
This is the standard location. It helps the browser load styles before it shows content.
<head>
<style>
body { font-family: Arial; }
</style>
</head>This also works, but it can delay styles or create conflicts.
<body>
<style>
p { color: red; }
</style>
</body>You can write device-specific rules. This targets screen size changes.
<style>
@media screen and (max-width: 600px) {
body { background-color: lightgray; }
}
</style>Use the <style> tag if:
- You test quick changes
- You create small pages
- Don’t link extra files
- You add dynamic styles to server pages
The browser reads the <style> tag early. It loads all rules before the page appears. It applies each rule to match elements.
The <style> tag keeps CSS local. It does not scale to a large website and does not share rules across pages.
The Difference Between <style> Tag and Inline Styles
The <style> tag stores CSS in one place. It keeps content and design separate. Inline styles go inside each element. Each style stays with its HTML tag.
Here are the key differences:
- The <style> tag sits in the document head or body
- Inline styles go inside the element <style> tag
- The <style> tag groups all rules together
- Inline styles repeat CSS for every element
You use it in the following cases:
- Use the <style> tag for shared page rules
- Use inline styles for one-time changes
- Use the <style> tag for a readable structure
- Use inline styles in emails or templates
Examples
Set Page Font:
<head>
<style>
body {
font-family: Arial;
font-size: 16px;
}
</style>
</head>This sets a global font family and size. It controls all body text from one place.
Style a Navigation Bar:
<head>
<style>
nav {
background-color: #333;
color: white;
padding: 10px;
}
</style>
</head>This adds layout and color to the navigation bar. It defines basic styles.
Use Media Query for Mobile:
<head>
<style>
@media screen and (max-width: 600px) {
h1 {
font-size: 20px;
}
}
</style>
</head>This reduces title size for smaller screens. It shows how to target the screen width.
Color Tables:
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 5px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>This applies to consistent table styles. It adds borders, padding, and header background color.
Wrapping Up
In this article, you learned what the tag does and where to place it. You saw how it works with CSS. You also learned when to use it and what limits it has.
Here is a quick recap:
- Use it for local CSS
- Don’t place it in unless needed
- Use it for small pages or tests
- Write complete rules inside the <style> tag
- Do not use it for large websites
FAQs
What is the correct syntax for the <style> tag?
<style>
selector {
property: value;
}
</style>
Can I use the <style> tag inside the <body>?
<head> instead for better order and speed.
How is the <style> tag different from inline CSS?
<style> holds grouped CSS rules. Inline CSS puts styles inside every element tag.Does the <style> tag work in all browsers?
<style> and apply the CSS rules correctly.
Similar Reads
In this article, you will learn what HTML meta tags are and how they work. You also see how they…
The HTML textarea tag gives users space to enter longer messages. This element helps build forms that accept feedback, comments,…
The address tag in HTML shows contact details. The <address> tag helps show who owns the page or article. Understand…
In this article, you will learn how HTML legend works in the fieldset tag with examples. HTML fieldset and legend…
The audio tag adds sound to web pages without plugins. It gives you control to play, pause, loop, or mute…
You need images to show products or ideas on your site. The HTML img tag places those images on the…
The track tag in HTML adds text tracks like subtitles and captions to media. It improves video access and helps…
The <i> tag stands for "italic." It marks text that has a different voice or tone, such as a technical…
The HTML hidden attribute hides elements from users but keeps them in the code. You can use it when you…
The breadcrumb in HTML shows a path through a site and marks the place of a page inside it. It…
