- Trending Categories
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
Embedded or internal Style Sheets in CSS
CSS files can be embedded internally by declaring them in <style> tag. This decreases the load time of the webpage. Although embedded CSS declarations allow dynamic styles, it should be downloaded at every page request as internal CSS can’t be cached. Internal CSS are declared in <style>tag inside <head> tag.
Syntax
The syntax for embedding CSS files is as follows −
<style> /*declarations*/ </style>
The following examples illustrate how CSS files are embedded −
Internal Style Sheet for Styling a div
We have used the <style> to set the internal style sheet and styled our div −
div {
float: left;
margin-left: 20px;
width: 30px;
height: 30px;
background-color: lightgreen;
box-shadow: 8px 5px 0 2px lightcoral;
}
Example
Let us see an exampleb −
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
margin-left: 20px;
width: 30px;
height: 30px;
background-color: lightgreen;
box-shadow: 8px 5px 0 2px lightcoral;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div></div>
</body>
</html>
Internal Style Sheet for Styling div
We have used the <style> to set the internal style sheet and styled multiple div at once −
div {
float: left;
margin-left: 20px;
width: 60px;
height: 30px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: lightgreen;
box-shadow: inset 5px 0 lightcoral;
}
div + div {
background-color: lightblue;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
margin-left: 20px;
width: 60px;
height: 30px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: lightgreen;
box-shadow: inset 5px 0 lightcoral;
}
div + div {
background-color: lightblue;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div></div>
<div></div>
</body>
</html>
Internal Style Sheet for Styling Elements for Visibility
In this example, we have set styles for the visibility of elements using the visibility property. We have displayed an element using the visible value −
h1 {
visibility: visible;
}
We have hidden an element using the hidden value −
p {
visibility: hidden;
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
visibility: visible;
}
p {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is set hidden</p>
</body>
</html>
1K+ Views
