Open In App

Uses of an embedded style sheet in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

CSS stylesheets are used to describe the presentation of a document written in HTML. It provides color, layout, background, font, and border properties while also allowing better content accessibility, enhanced flexibility, and control, as well as the specification of the characteristics of presentation. CSS stylesheets can be applied to an HTML document in 3 ways – inline styles, embedded stylesheet, and external stylesheet.

Embedded Stylesheet: It allows you to define styles for a particular HTML document as a whole in one place. This is done by embedding the <style></style> tags containing the CSS properties in the head of your document. Embedded style sheets are particularly useful for HTML documents that have unique style requirements from the rest of the documents in your project. However, if the styles need to be applied across multiple documents, you should link to an external style sheet instead of using individual embedded style sheets. Using embedded stylesheets holds a distinct advantage over inline styles which only allow you to address one HTML element at a time. 

Syntax: The CSS syntax for embedded style sheets is exactly the same as other CSS code, apart from the fact that it is now wrapped within the <style></style> tags. The <style> tag takes the ‘type’ attribute that defines the type of style sheet being used (ie. text/CSS). 

Example 1: Below is an HTML document with the CSS styling for the entire web page enclosed within the <style></style> tags. These properties would be applied to all corresponding elements in the HTML document. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
      
    <!-- Embedded stylesheet -->
    <style>
        h2 {
            font-size: 1.5rem;
            color: #2f8d46;
            text-align: center;
        }
  
        p {
            font-variant: italic;
        }
    </style>
</head>
  
<body>
    <h2>Welcome To GFG</h2>
    <p>This document is using an embedded stylesheet!</p>
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
</body>
  
</html>


Output:

All of the <p> elements have been styled using the styling provided in the embedded CSS.

Example 2: When the list of CSS rule sets is inserted in the style element, it will apply the associated properties to all elements on the web page. In case you want to be more selective and distinctly style an element or a group of elements, use classes and IDs, as shown below.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
  
    <!-- Embedded stylesheet -->
    <style>
        h2 {
            font-size: 1.5rem;
            color: #2f8d46;
            text-align: center;
        }
  
        .p-content {
            font-variant: italic;
        }
    </style>
</head>
  
<body>
    <h2>Welcome To Geeks for Geeks</h2>
    <p class="p-content">
        This document is using an 
        embedded stylesheet!
    </p>
  
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
</body>
  
</html>


Output:

Specific <p> elements have been styled using the class attribute.



Last Updated : 19 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads