Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Embedded or internal Style Sheets in CSS
CSS files can be embedded internally by declaring them in the <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 the <style> tag inside the <head> tag.
Syntax
The syntax for embedding CSS files is as follows −
<style>
selector {
property: value;
}
</style>
Example 1: Internal Style Sheet for Styling a div
The following example uses the <style> tag to set internal styles for a div element −
<!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>
A page displays with "Demo Heading" and a small lightgreen square box with a coral-colored shadow positioned to the right.
Example 2: Styling Multiple div Elements
This example demonstrates styling multiple div elements using internal CSS with adjacent selectors −
<!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>
The page shows "Demo Heading" followed by two rounded rectangular shapes - the first is lightgreen with right-side rounded corners, and the second is lightblue with left-side rounded corners, creating a pill-like appearance.
Example 3: Controlling Element Visibility
This example uses internal CSS to control the visibility of elements using the visibility property −
<!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>
The page displays only "Demo Heading" as the paragraph text is hidden but still takes up space in the layout.
Conclusion
Internal stylesheets are useful for single-page styling and allow you to keep CSS code organized within the HTML document. While convenient for small projects, external stylesheets are generally preferred for larger websites due to caching benefits.
2K+ Views
