Tag <style> In HTML
In this article, we’ll talk about Tag style with examples. Wishing it would satisfy the requirements for learning.
The <style> tag is an HTML element used to define styles for a web page. It is typically used in conjunction with cascading style sheets (CSS) to apply visual styling to HTML elements.
The <style> tag is utilized to specify a document’s style details (CSS). The <style> tag can be utilized to indicate what HTML elements should display in browsers.
Simple HTML document with the <style> tag:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: maroon;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Mr examples</h1>
<p>This is an example of using the tag style to define global CSS styles for a document.</p>
</body>
</html>
Creating a hover effect on a button:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
button:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>Welcome to Mr examples</h1>
<button>Hover over me</button>
</body>
</html>
Another example is to create a media query to change the layout of a webpage based on the screen size:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
@media only screen and (max-width: 600px) {
body {
font-size: 12px;
}
#sidebar {
display: none;
}
}
</style>
</head>
<body>
<h1>Welcome to Mr examples</h1>
</body>
</html>
Using the <style> tag in HTML to create a unique element on a webpage is to create a CSS animation:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animated {
animation-name: example;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>Welcome to Mr examples</h1>
<div class="animated">This div has an animation</div>
</body>
</html>
Table Of Content-
Tag <Style> Uses
Here are some common uses of the <style> tag:
- The <style> tag is commonly used to define CSS rules that apply to specific HTML elements. For example, you could use the <style> tag to change the font color and size of all the headings in your document.
- The <style> tag can also be used to define an internal stylesheet. This is a way to include CSS rules directly within the HTML document, instead of linking to an external stylesheet.
- The <style> tag can also be used to define inline styles. This means that the style rules are applied directly to the HTML elements within the document.
- The <style> tag can be used to define media queries, which are CSS rules that only apply under certain conditions (such as screen size or orientation).
IMPORTANT: In HTML, a browser formats a document according to the specifications in the style sheet. In cases where some properties are declared in different style sheets for the same selector (element), they will be taken from the last style sheet.
Advice:
- Links to external style sheets are created with the <link> tag.
- Our upcoming CSS tutorial will help you learn all about style sheets.
If you want to make a user attractive animation follow the example below:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Tag Usage</title>
<style>
img {
--s: 15px; /* size of the frame */
--b: 2px; /* border thickness */
--w: 200px; /* width of the image */
--c: #7B3B3B;
width: var(--w);
aspect-ratio: 1;
object-fit: cover;
padding: calc(2*var(--s));
--_g: var(--c) var(--b),#0000 0 calc(100% -- var(--b)),var(--c) 0;
background:
linear-gradient( var(--_g)) 50%/100% var(--_i,100%) no-repeat,
linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
outline: calc(var(--w)/2) solid #0009;
outline-offset: calc(var(--w)/-2 -- 2*var(--s));
transition: .4s;
cursor: pointer;
}
img:hover {
outline: var(--b) solid var(--c);
outline-offset: calc(var(--s)/-2);
--_i: calc(100% -- 2*var(--s));
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
align-items: center;
grid-auto-flow: column;
gap: 20px;
background: #e8e8e8;
}
</style>
</head>
<body>
<img src="https://picsum.photos/id/111/300/300" alt="an old car">
<img src="https://picsum.photos/id/183/300/300" style="--c: #668284;--b:1px;--s: 18px" alt="an old car">
</body>
</html>
Attributes
Global
Tag <style> work with HTML’s Global Attributes too.
Event
The style tag <style> handles the HTML Event Attributes.
Attributes List
| Attribute | Value | Overview |
|---|---|---|
| media | media_query | Indicates the media/device for which the media resource is adapted |
| type | text/css | Sets the media type for the <style> tag |
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
Predefined CSS
The <style> element will be presented in majority of the browsers with these default values:
style {
display: none;
}HTML Styles Tag Advantages
The <style> tag in HTML provides several advantages, including:
- The <style> tag allows you to define styles for your web page in a centralized location, rather than repeating the same styles for each individual HTML element. This can help simplify your code and make it easier to maintain over time. Additionally, by using CSS to define your styles, you can create more advanced and dynamic styling effects than you can with HTML alone.
- By using the <style> tag to define your styles in a separate file or section of your HTML document, you can reduce the amount of code that needs to be loaded by the browser. This can improve site performance and make your pages load faster.
- By using CSS to define your styles, you can separate the visual presentation of your content from the underlying HTML structure. This can help improve the accessibility of your site, as assistive technologies like screen readers can more easily parse the content and convey it to users with disabilities.
- By using the <style> tag to define your styles in a centralized location, you can ensure that all of your HTML elements are styled consistently across your site. This can help create a cohesive and professional-looking website that is easy for users to navigate and understand.
Do leave your reaction below in order to appreciate our efforts or to provides us with some suggestions for the betterment of this site.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
