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
The abbr tag refers to an abbreviation in HTML. It helps you save space and improve accessibility. The screen readers…
Use the <base> tag in HTML to set a single base URL or target for all relative links and resources…
The form autocomplete attribute in HTML helps users fill out forms faster because it shows them saved input for common…
HTML tags that no longer work stay in the deprecated list. This article explains them and shows the modern replacements.…
The HTML <pre> tag keeps the original format of your text. It shows spaces and line breaks exactly as you…
HTML has three main list tags: <ul>, <ol>, and <dl>. Each one shows a different kind of group. In this…
The DOCTYPE ensures that your HTML is readable by browsers and ensures that pages follow modern standards. Understand the DOCTYPE…
This article shows you how to open a link in a new tab. Read the code and follow the examples…
HTML attributes add extra detail to elements so the browser knows how to handle them. Here you will see examples…
HTML select tag and option tags let users pick values in a form. You use them to create dropdowns. The…
