Using embedded style sheets in CSS
Using Embedded Style Sheets in CSS
CSS stands for Cascading Style Sheets. HTML is used to create web pages and add text, https://coder-cafe.com/wp-content/uploads/2025/09/images, videos, and more. Later, when we need to style these text and https://coder-cafe.com/wp-content/uploads/2025/09/images, we can only do so using CSS. Basically, we can use CSS to add styles to HTML elements, such as background, color, size, and orientation.
There are three ways to add styling effects to a web page. The first is inline styling, which involves adding styles directly to HTML elements. The second method is to use an embedded style sheet, adding styles within the <style> tags within the html file. The third method is to use an external CSS file to add styles to the web page.
Syntax
Users can use the following syntax to add an embedded style sheet to an HTML page.
<style>
/* Add CSS here */
</style>
Users can add CSS between the <style> tags in the above syntax.
Example 1
In the following example, we have a div element with a class of “container.” We’ve added two <p> elements inside this div element. We’ve also added text content inside these <p> elements.
In the <head> section, we’ve added a <style> tag. Inside the <style> tag, we’ve added the CSS for the “container” div element. We also use the `nth-child()` CSS function to style the two
` 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> Embed <i> styles into 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 following example, we add a hover effect to a div element.
First, we create a “container” div element and add three div elements as its children. We also give each div element a different background color. When the user hovers over a div element, the color of each 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> Embed <i> stylesheet into 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
In the following example, we’ve embedded a stylesheet into an HTML file. We’ve created a circle using CSS and added animation to the circle.
We’ve created keyframes for “larger” to define the circle’s size change by 50% and the background color change, which the user 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 a Style Sheet in an HTML Document</i></h2>
<div class = "circle">
</div>
</body>
</html>
You have learned how to embed a style sheet in CSS. You can embed the CSS for an entire web page by simply adding CSS between the <style> tags in the HTML file without using an external CSS file. However, using embedded CSS in live development is not recommended because it makes the code more complex.