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
You use the <aside> tag to mark extra content in HTML. It does not replace the main text and shows…
The <details> tag hides content and shows it when needed. It helps organize long pages. The tag shows extra info…
The track tag in HTML adds text tracks like subtitles and captions to media. It improves video access and helps…
The iframe tag embeds another HTML page inside the current page. It loads content from a separate source. Understand the…
The abbr tag refers to an abbreviation in HTML. It helps you save space and improve accessibility. The screen readers…
Comments in HTML help you explain your code. You can add notes without showing anything in the browser. Understand How…
The <svg> tag in HTML helps you draw graphics that scale cleanly at any size. You can animate shapes and…
The title tag in HTML shows the page name in the browser tab and helps search engines know the topic.…
The HTML textarea tag gives users space to enter longer messages. This element helps build forms that accept feedback, comments,…
Paragraphs help group-related text. They build clear, readable pages. You use them to split ideas or topics. The HTML p…
