The <style> tag in HTML is used to embed CSS directly within an HTML document. This method is known as internal or embedded CSS. The <style> tag allows you to define styles that apply to the document within which the tag is contained. While it is often recommended to use external stylesheets for better maintainability and separation of concerns, the <style> tag can be useful for small projects, prototyping, or when you need to apply specific styles to a single page.
Syntax of the <style> Tag
The <style> tag is placed inside the <head> section of the HTML document. It contains CSS code that defines the styles for the HTML elements on the page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of Style Tag</title>
<style>
/* CSS rules go here */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
color: #666;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with some <span class=”highlight”>highlighted text</span>.</p>
</body>
</html>
Explanation of the Example
- HTML Structure:
- The document begins with the <!DOCTYPE html> declaration, followed by the <html> element with a lang attribute specifying the language as English (en).
- The <head> section includes metadata and the title of the document.
- The <style> Tag:
- The <style> tag is placed inside the <head> section.
- It contains several CSS rules that style different elements of the page.
- CSS Rules:
- body: Sets a light grey background color and a sans-serif font family for the entire document.
- h1: Styles all <h1> elements with a dark grey color and centers the text.
- p: Styles all <p> elements with a font size of 16 pixels and a medium grey color.
- .highlight: Defines a class selector that styles elements with the class highlight to have red color and bold font weight.
Benefits of Using the <style> Tag
- Simplicity: Easy to include and manage for small-scale projects or quick prototypes.
- Scoping: Styles defined within a <style> tag only affect the current document, avoiding potential conflicts with other pages.
- Overrides: Useful for overriding external stylesheets for specific pages without modifying the entire stylesheet.
Limitations of the <style> Tag
- Maintainability: Harder to maintain as the project grows. Using external stylesheets is preferred for larger projects.
- Reusability: Styles defined within a <style> tag are not reusable across multiple pages.
- Performance: External stylesheets can be cached by the browser, improving load times. Internal styles within <style> tags do not benefit from this.
Practical Use Case
Example: Highlighting Specific Page Elements
Suppose you have an article page where you want to highlight certain sections without affecting the overall website’s styles. You can use the <style> tag for this purpose.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Article Page</title>
<style>
.important {
background-color: yellow;
padding: 10px;
border-left: 5px solid red;
}
</style>
</head>
<body>
<h1>Understanding CSS</h1>
<p>CSS is a powerful tool for web development. It allows you to control the look and feel of your web pages.</p>
<div class=”important”>
<p>This is an important note that is highlighted specifically for this article.</p>
</div>
<p>Learning CSS can significantly improve your ability to create attractive and user-friendly websites.</p>
</body>
</html>
In this example:
- The <style> tag defines a class .important that applies a yellow background, padding, and a red left border to any element with this class.
- The specific <div> element with the class important is styled accordingly, making it stand out from the rest of the content.
Conclusion
The <style> tag is a useful tool in CSS for embedding styles directly within an HTML document. While it is ideal for quick and small-scale styling, external stylesheets are generally preferred for larger and more complex projects due to better maintainability, reusability, and performance. Understanding when and how to use the <style> tag effectively is essential for efficient web development.