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>

Updated on: 01-Nov-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements