The <style> tag in HTML is used to define internal CSS styles for a webpage. It allows you to apply styling rules directly within the HTML document, usually inside the <head> section.
- Used to add CSS inside the HTML file.
- Usually placed in the <head> section.
- Applies styles to multiple elements at once.
Syntax
<style>
selector {
property: value;
}
</style>
Attribute
- media: Specifies the media query (device/screen type) for which the styles are applied
- type: Specifies the MIME type of the style content (usually text/css)
Note: The <style> tag supports both Global Attributes and Event Attributes in HTML.
Example 1: 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>GeeksForGeeks</h2>
<p>Computer Science Portal.</p>
</body>
</html>
Example 2: 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 GeeksforGeeks.</h1>
<h2>Hello GeeksforGeeks.</h2>
<p id="first">Hello GeeksforGeeks.</p>
<p class="second">Welcome Geeks</p>
</body>
</html>