The <style> tag in HTML is used to embed or define style information, usually in the form of CSS (Cascading Style Sheets), within an HTML document. It allows you to specify how HTML elements should be presented or formatted in a web browser.
Basic Syntax
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS rules go here */
</style>
</head>
<body>
<!-- Content of the HTML document -->
</body>
</html>
Example 1: Applying Styles to HTML Elements
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>A heading with red color</h1>
<p>A paragraph with blue color.</p>
</body>
</html>
In this example, the styles defined within the <style> tag change the color of the <h1> heading to red and the color of the <p> paragraph to blue.
Example 2: Multiple Styles for the Same Elements
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
<style>
h1 {
color: green;
}
p {
color: pink;
}
</style>
</head>
<body>
<h1>This is a heading with green color</h1>
<p>This is a paragraph with pink color.</p>
</body>
</html>
Here, two <style> tags are used, and the styles defined in the second set override those in the first set for the same HTML elements.
Example 3: Media Query in Style Tag
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="all and (max-width: 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph with responsive styles.</p>
</body>
</html>
In this example, a media query is used to apply styles to the <p> element only when the viewport width is less than 500px.
Key Points
- The
<style>tag is placed within the<head>section of the HTML document. - It is used to embed CSS styles directly into the HTML file.
- Multiple
<style>tags can be used, and styles are applied in the order they appear. - Media queries can be incorporated to apply styles based on the characteristics of the device or viewport.
These examples demonstrate how the <style> tag is employed to enhance the presentation and styling of HTML elements in a web document.
Conclusion
The <style> tag in HTML plays a crucial role in defining the presentation and styling of HTML elements. By embedding CSS rules directly into the HTML file, developers can control the appearance of their webpages. Whether it’s applying styles to specific elements, using media queries for responsiveness, or organizing styles in multiple <style> tags, understanding how to use the <style> tag is fundamental to creating visually appealing and well-designed web content.
Frequently Asked Questions
Ans: The <style> tag in HTML is used to embed or define style information, typically in the form of CSS (Cascading Style Sheets), within an HTML document. It allows developers to specify how HTML elements should be presented or formatted in a web browser.
Q2. Where should the <style> tag be placed in an HTML document?
Ans: The <style> tag is typically placed within the <head> section of the HTML document. It is used to include CSS rules that will be applied to the HTML elements in the body of the document.
Q3. Can I use multiple
<style> tags in the same HTML document? Ans: Yes, multiple <style> tags can be used in the same HTML document. Styles defined in these tags are applied in the order they appear. However, it’s important to note that styles in later <style> tags can override styles from earlier ones.
Q4. How can media queries be used within the
Ans: Media queries can be included within the <style> tag to apply styles based on the characteristics of the device or viewport. For example, you can have styles that are only applied when the viewport width is below a certain threshold, providing a responsive design.
<style> tag? Ans: Yes, styles can be applied to specific HTML elements by defining CSS rules within the <style> tag. For example:
<style>
h1 {
color: red;
}
p {
font-size: 16px;
}
</style>
In this example, the styles apply to <h1> elements with red color and <p> elements with a font size of 16 pixels.
