HTML <style> Tag – Internal CSS
📌 Introduction
The <style> tag is used to write CSS (Cascading Style Sheets) directly inside your HTML file.
It allows you to style your webpage without using an external CSS file.
The <style> tag is placed inside the <head> section.
🧱 Basic Syntax
<style>
selector {
property: value;
}
</style>
💡 Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
color: white;
}
h1 {
color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is styled using the style tag.</p>
</body>
</html>
🖥️ Output Explanation
- The background becomes black
- Text becomes white
- The heading
<h1>appears in light blue
🎯 How It Works
Inside <style>, you write CSS rules:
selector {
property: value;
}
Example:
body→ selects the whole pagecolor→ changes text color
⚖️ <style> vs <link>
| Method | Description | Use Case |
|---|---|---|
<style> |
Internal CSS inside HTML | Small projects / testing |
<link> |
External CSS file | Real projects (recommended) |
⚠️ Tips & Best Practices
- Place
<style>inside<head> - Use it for small projects or quick testing
- For large projects, use external CSS (
<link>) - Keep your CSS organized and readable
🚫 Common Mistakes
- Writing CSS outside
<style>❌ - Mixing too much CSS inside HTML (hard to maintain) ❌
- Forgetting proper CSS syntax ❌
🧪 Mini Exercise
Create a page and:
- Add a
<style>tag - Change:
- Background color
- Text color
- Heading color
Try different colors and see the result.