HTML style Tag – A Complete Guide for Beginners
Introduction
When you first start learning web development, you’ll quickly come across two core technologies: HTML and CSS. HTML is used to create the structure of a webpage, while CSS is used to style and design it.
Think of HTML as the skeleton of a website and CSS as the clothing and design that makes it look attractive. Without CSS, a webpage looks plain and unappealing.
There are different ways to apply CSS in HTML, and one of the most important methods is using the HTML <style> tag. This tag allows you to write CSS directly inside your HTML file.
If you’re just starting out, understanding the <style> tag is a perfect first step before moving to advanced styling techniques.
Learn HTML basics here: /html-basics
Learn CSS fundamentals here: /css-basics
What is style Tag?
<head> section and allows developers to control the design, layout, colors, and fonts of HTML elements without using external stylesheets.
The <style> tag is one of the most commonly used HTML tags when working with internal CSS in HTML. It allows developers to write CSS rules directly inside the HTML document instead of using a separate file.
This is especially useful for:
- Small projects
- Quick testing
- Single-page designs
Basic Syntax of <style>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>Line-by-Line Explanation
<head>→ This section contains metadata and styles for the webpage<style>→ This is where CSS code is writtenbody {}→ This is a CSS selector targeting the entire pagebackground-color: lightblue;→ Changes the background color</style>→ Ends the style block
This simple style tag example shows how easy it is to apply design to a webpage.
Where to Use <style> Tag
The <style> tag is used inside the <head> section of an HTML document to apply internal CSS styles. It allows developers to define the design, layout, and appearance of webpage elements directly within the same HTML file.
The <style> tag is mainly used in the following situations:
1. Inside <head> Section
This is the recommended and most common placement.
2. Internal CSS Usage
Used when styling a single HTML page
3. Small Projects or Testing
Perfect for beginners and quick experiments
Internal CSS vs Inline vs External CSS
Understanding the difference is very important for beginners.
| Type | Location | Use Case |
|---|---|---|
| Inline | Inside element | Small changes |
| Internal | <style> tag | Single page |
| External | CSS file | Large projects |
Explanation
- Inline CSS → Directly applied to an element
- Internal CSS → Written inside
<style>tag - External CSS → Stored in separate
.cssfile
For large websites, always prefer external CSS.
Real-World Examples
Example 1: Styling Text
<style>
h1 {
color: blue;
}
</style>Explanation
This code changes all <h1> headings to blue. It’s simple and effective for beginners.
Example 2: Styling Multiple Elements
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: darkblue;
}
p {
font-size: 18px;
color: #333;
}
</style>Explanation
body→ controls backgroundh1→ styles headingsp→ styles paragraphs
This shows how internal CSS in HTML can style multiple elements at once.
CSS Selectors in <style>
Selectors help you target elements in HTML.
Learn more: /css-selectors
Element Selector
p {
color: red;
}Targets all <p> elements.
Class Selector
.box {
background: yellow;
}Used with:
<div class="box"></div>ID Selector
#header {
font-size: 24px;
}Used with:
<div id="header"></div>Common CSS Properties Used in HTML Styling
| Property | Description | Example |
|---|---|---|
color | Changes text color | color: blue; |
background-color | Sets background color | background-color: yellow; |
font-size | Adjusts text size | font-size: 20px; |
font-family | Sets font type | font-family: Arial, sans-serif; |
text-align | Aligns text (left, center, right) | text-align: center; |
border | Adds a border | border: 1px solid black; |
margin | Sets space outside an element | margin: 10px; |
padding | Sets space inside an element | padding: 10px; |
Styling Text in HTML
<p style="color: purple; font-size: 24px; font-weight: bold;">Styled Text Example</p>
Explanation:
color: purple;→ Sets text color.font-size: 24px;→ Increases text size.font-weight: bold;→ Makes text bold.
Styling Backgrounds
Change background colors or add images.
Example (Background Color):
<body style="background-color: lightgray;">
Example (Background Image):
body {
background-image: url('background.jpg');
background-size: cover;
}
CSS Selectors in HTML Styling
| Selector | Description | Example |
|---|---|---|
* | Selects all elements | * { margin: 0; padding: 0; } |
p | Selects all <p> elements | p { color: red; } |
.classname | Selects elements with a class | .highlight { color: blue; } |
#idname | Selects an element with a specific ID | #header { text-align: center; } |
element, element | Selects multiple elements | h1, h2 { font-size: 20px; } |
Best Practices for HTML Styling
✔️ Use external CSS for better organization.
✔️ Avoid inline styles unless necessary.
✔️ Use classes and IDs instead of styling individual elements.
✔️ Optimize styles for mobile responsiveness.
Common Mistakes
Avoid these beginner errors:
Placing <style> outside <head>
This can break structure
Mixing inline and internal CSS
Leads to confusion
Overwriting styles unintentionally
CSS follows priority rules
SEO Benefits of Using <style> Tag
Even though CSS is mostly about design, it also impacts SEO indirectly.
Better Page Structure
Clean code improves readability
Faster Styling for Small Pages
No need to load external files
Improved User Experience
Good design keeps users engaged
FAQs Section
What is the style tag in HTML?
The style tag is used to add internal CSS styles inside an HTML document.
Where should the <style> tag be placed?
It should be placed inside the <head> section.
Can I use multiple <style> tags?
Yes, but it’s better to keep styles in one place.
Is internal CSS good for large websites?
No, external CSS is better for large projects.
What is the difference between style and link tag?
<style> is for internal CSS, while <link> is used for external CSS file