HTML <style> style tag
The <style> tag in HTML is used to define internal CSS rules that apply to the content of the HTML document. It allows you to include CSS directly within the HTML file, rather than linking to an external stylesheet. This can be useful for applying styles to a document without creating separate CSS files, or for testing and debugging styles quickly.
Key Features:
- Internal CSS: Allows you to include CSS rules directly within the HTML document, affecting only that document.
- Scoped Styling: Styles defined in the
<style>tag are scoped to the HTML document in which they are included, meaning they do not affect other documents or pages. - Convenience: Useful for small projects, quick styling, or when you want to test CSS without creating an external stylesheet.
Basic Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Tag Example</title>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #007BFF;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
In this example:
- The
<style>tag is placed inside the<head>section of the HTML document. - CSS rules within the
<style>tag are applied to the<body>,<h1>, and<p>elements, setting their font, color, and margin.
Attributes:
The <style> tag itself does not have any attributes, but the CSS rules inside it can target various HTML elements, classes, and IDs.
Use Cases:
- Internal Styling: Applying styles directly within an HTML document, useful for simple pages or prototypes.
- Testing: Quickly testing CSS rules without creating or modifying external stylesheets.
- Small Projects: Suitable for small or single-page projects where external stylesheets are not necessary.
Best Practices:
- Separation of Concerns: For larger projects, it's generally better to use external stylesheets to keep HTML and CSS separate. This improves maintainability and organization.
- Minimize Use: Use the
<style>tag sparingly and prefer external stylesheets for more complex or multiple-page projects.
Key Points:
- Purpose: The
<style>tag is used to define internal CSS styles within an HTML document. - Usage: Ideal for small projects, testing, or when quick, document-specific styling is needed.
- Best Practices: For larger projects, use external stylesheets to keep CSS separate from HTML.
In summary, the <style> tag in HTML is a convenient way to include internal CSS rules within a document. It allows you to apply styles directly in the HTML file, which can be useful for quick changes or small projects. However, for larger and more maintainable projects, external stylesheets are generally preferred.