Embedded or internal Style Sheets in CSS

CSSWeb DevelopmentFront End Technology

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>

Example

The following examples illustrate how CSS files are embedded −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
article {
   font-size: 1.3em;
   font-family: cursive;
}
div {
   float: left;
   margin-left: 20px;
   width: 30px;
   height: 30px;
   background-color: lightgreen;
   box-shadow: 8px 5px 0 2px lightcoral;
}
</style>
</head>
<body>
<article>Demo text</article>
<div></div>
<div></div>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!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>
<div></div>
<div></div>
</body>
</html>

Output

This gives the following output −

raja
Published on 08-Jan-2020 07:57:08
Advertisements