Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Uses of an embedded style sheet in CSS
CSS stands for the Cascading style sheet. HTML is used to create a web page, which adds text, images, videos, etc., to the web page. After that, we require to style the texts and images, which we can do using CSS only. Basically, we can add styles such as background, color, dimensions, direction, etc., to the HTML element using CSS.
There are three ways to add style to the web page. First is the inline style, which directly adds style to the HTML element. The second is an embedded style sheet that adds styles in the ‘html’ file inside the <style> tag. The external CSS file is the third way to add style to the web page.
Syntax
Users can follow the syntax below to add an embedded style sheet to the HTML web page.
<style> /* add CSS here */ </style>
Users can add CSS between the <style> tag in the above syntax.
Example 1
In the example below, we have a div element with the ‘container’ class. We have added two <p> elements inside the div element. Also, we have added the text content inside the <p> element.
In the <head> section, we have added the <style> tag. Inside the <style> tag, we have added the CSS for the container div element. Also, we have used the ‘nth-child()’ CSS function to style both <p> elements differently.
<html>
<head>
<style>
.container {
border: 2px solid black;
padding: 10px;
margin: 10px;
background-color: lightblue;
height: 100px;
width: 500px;
}
.container p:nth-child(1) {
color: red;
font-size: 20px;
}
.container p:nth-child(2) {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<h2> Embedding the <i> Styles to the HTML document </i> </h2>
<div class = "container">
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
</div>
</body>
</html>
Example 2
In the example below, we added the div element's hover effect.
First, we created the ‘container’ div element and added three div elements as a child of it. Also, we have given different background colors to every div element. When the user hovers over the div element, the color of every div element changes.
<html>
<head>
<style>
.container {
display: flex;
background-color: aqua;
height: 200px;
width: 400px;
justify-content: space-around;
align-items: center;
border-radius: 12px;
}
.div1,
.div2,
.div3 {
color: white;
font-size: 2rem;
border-radius: 12px;
height: 100px;
width: 100px;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
.div1:hover {
background-color: pink;
}
.div2:hover {
background-color: yellow;
}
.div3:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2> Embedding the <i> Style sheet to the HTML document </i> </h2>
<div class = "container">
<div class = "div1">
Div 1
</div>
<div class = "div2">
Div 2
</div>
<div class = "div3">
Div 3
</div>
</div>
</body>
</html>
Example 3
We have embedded the style sheet in the example below in the HTML file. We have created the circle using CSS. Also, we have added the animation to the circle.
We have created the ‘larger’ keyframes, which change the dimension of the circle by 50%, and the background color, which users can observe in the output.
<html>
<head>
<style>
.circle {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
animation: larger 2s linear infinite;
margin: 120px;
}
@keyframes larger {
0% {
transform: scale(1);
background-color: red;
}
50% {
transform: scale(1.5);
background-color: green;
}
100% {
transform: scale(1);
background-color: red;
}
}
</style>
</head>
<body>
<h2> Embedding the <i> Style sheet to the HTML document </i> </h2>
<div class = "circle">
</div>
</body>
</html>
Users learned to embed the style sheet in CSS. Users need to add CSS between the <style> tag to embed the CSS in the HTML file for a whole web page rather than using the external CSS files. However, using the embedded CSS in real-time development is not recommended as it makes code more complex.
252 Views
To Continue Learning Please Login