Embedded style sheets in CSS

There are three ways to apply style information to an HTML document –

  1. Inline styles
  2. Embedded style sheets
  3. External style sheets

In this post, We will know about embedded style sheets.

What is embedded style sheet in CSS?

An embedded style sheet is a way to apply style information to an HTML document using the style element. When we use an embedded style sheet, its rules apply only to that document.

Now let’s see an example of embedded style sheet.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Embedded style sheet example</title>

        <style>
            h1{
                text-align: center;
                font-family: sans-serif;
                color: brown;
            }
            p{
                margin-left: 20%;
                margin-right: 20%;
                padding-left: 5%;
                padding-right: 5%;
                background-color: lavender;
            }
        </style>


    </head>
    <body>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           Quisque viverra iaculis placerat. Aliquam urna diam,
           mollis sit amet elit et, posuere mattis ipsum. Curabitur 
           quis quam gravida, dapibus lacus at, dapibus elit.
           Nam non finibus velit. Vestibulum ante ipsum primis 
           in faucibus orci luctus et ultrices posuere cubilia
           curae; Vivamus convallis dolor id neque ultrices bibendum. 
           Suspendisse potenti. In blandit, lorem a feugiat condimentum, 
           elit orci vestibulum felis, a lobortis est sem ullamcorper 
           ipsum. Morbi tincidunt mauris orci, id varius est lacinia vitae.
           Phasellus viverra tempor mi eu semper.
        </p>
    </body>
</html>

Output :

You can see in the above code that I have embedded style sheets to apply styles on the <h1> and <p> tags. You must put the style at the head of the document.

The browser doesn’t need to load additional external files because the style information is already present in the HTML document. This enhances the download speed and performance of the site.

One drawback I want to highlight here is that if you use the same styles on all the pages of a website and later decide to change some CSS properties, you will then need to change the properties on every HTML document associated with the site. This would be very time-consuming. But external style sheets are a better option if you want to apply the same styles across all the pages. If you want to learn about external stylesheets, then here’s the link – https://developerxon.com/2022/07/10/how-to-use-css-external-style-sheets-in-html/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: