HTML Style Tag
The HTML <style> tag in HTML defines CSS for document styling. The <style> element is placed in the <head> section of the document.
Syntax:
<style>
/* CSS properties applied inside this style tag */
.divtag{
color: blue
}
</style>
Attributes:
Attributes | Description |
|---|---|
media | It takes the media query as value and specifies for what media/device the media resource is optimized. |
type | It specifies the media type of the <style> tag |
Note: The <style> tag supports both Global Attributes and Event Attributes in HTML.
Example 1: In this example we sets styles using the <style> tag. Paragraphs and h2 headings are styled with red and green color respectively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>HTML style Tag</title>
<style>
p {
color: red;
font-size: 18px;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>w3wiki</h2>
<p>Computer Science Portal.</p>
</body>
</html>
Output:
HTML Style Tag Example Output
Example 2: In this example we demonstrates CSS styling using inline and internal styles. Different elements are styled with varied font families, colors, and alignments for a visually appealing layout.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<!--CSS properties applied inside
this style tag-->
<style>
body {
background-color: #616a6b;
}
h1 {
font-family: commanders;
background-color: yellow;
}
h2 {
font-family: algerian;
background-color: cyan;
}
#first {
font-family: Castellar;
background-color: green;
color: blue;
}
.second {
text-align: right;
background-color: white;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<h1>Hello w3wiki.</h1>
<h2>Hello w3wiki.</h2>
<p id="first">Hello w3wiki.</p>
<p class="second">Welcome Beginner</p>
</body>
</html>
Output:
Supported Browsers
- Google Chrome: 1
- Edge: 12
- Firefox: 1
- Opera: 3.5
- Safari: 1
Contact Us