Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <style> tag in HTML is important for styling the appearance of web pages. It lets you add CSS (Cascading Style Sheets) directly into your HTML files. With the <style> tag, you can manage the layout, colors, fonts, and overall design of your website.
In this article, you'll learn about the syntax, attributes, examples, and browser support of the <style> tag.
Syntax
The syntax for the <style> tag is straightforward. It is placed within the <head> section of an HTML document. Here’s how it looks:
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
/* CSS rules go here */
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Output
Explanation
The <style> tag starts with <style> and ends with </style>.
Inside the <style> tags, you can write your CSS code. This code controls how elements on your webpage will look.
Attributes
The <style> tag has a few important attributes that you can use:
type: This specifies the type of stylesheet. By default, it is "text/css". Example: <style type="text/css">
media: This defines the media type for which the styles are intended (like screen or print). Example: <style media="screen">
scoped: This is an optional attribute that limits the style rules to the containing element. However, it is not widely supported and is not recommended for use in modern web development.
Example of Attributes
<style type="text/css" media="screen">
body {
background-color: lightblue;
}
</style>
Explanation
In this example, the background color of the webpage will be light blue when viewed on a screen.
Code
Let’s create a simple HTML document using the <style> tag to style different elements. Here’s a complete example:
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>Styled Web Page</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
color: darkslategray;
font-size: 16px;
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Web Page</h1>
<p>This is a simple paragraph demonstrating the use of the HTML style tag.</p>
</body>
</html>
Output
Explanation of Code
The <body> has a light gray background color and uses the Arial font.
The <h1> heading is navy-colored and centered on the page.
The paragraph <p> is dark slate gray with a font size of 16 pixels and a margin of 20 pixels around it.
Supported Browsers
The <style> tag is widely supported across all major browsers, including:
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Opera
Compatibility
Since the <style> tag is part of the HTML standard, it works well across various platforms. Always ensure that your styles are tested in different browsers to guarantee consistent appearance.
Frequently Asked Questions
What is the purpose of the <style> tag in HTML?
The <style> tag is used to define CSS rules directly within an HTML document, helping you control the look and feel of the webpage, including its layout, fonts, and colors.
Can I use the <style> tag for external CSS?
No, the <style> tag is for internal CSS only. To use external CSS, you need to use the <link> tag to reference an external stylesheet.
Is the scoped attribute recommended for use?
The scoped attribute is not widely supported, and it's not recommended for modern web development. Instead, use classes or IDs for targeted styling.
Conclusion
In this article, we explored the HTML Style Tag. You learned about its syntax, attributes, and how to use it effectively to style your web pages. The examples provided help illustrate how CSS can change the look and feel of your content.
519+ registered 
