HTML Style Tag
Last Updated :
15 Apr, 2024
The HTML <style> tag in HTML defines CSS for document styling. Within it, HTML elements’ rendering in browsers is specified. The <style> element is placed in the <head> section of the document.
Syntax:
<style>
/* CSS properties applied inside
this style tag */
</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:
- Global Attributes: The <style> tag also supports the Global Attributes in HTML.
- Event Attributes: The <style> tag also supports the Event Attributes in HTML.
Examples of HTML Style Tag
Example 1: In this example we sets styles using the <style> tag. Paragraphs are styled with red color and 18px font size, while h2 headings are styled with green color.
HTML
<!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>GeeksForGeeks</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.
HTML
<!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 GeeksforGeeks.</h1>
<h2>Hello GeeksforGeeks.</h2>
<p id="first">Hello GeeksforGeeks.</p>
<p class="second">Welcome Geeks</p>
</body>
</html>
Output:
Supported Browsers:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...