Uses of an embedded style sheet in CSS
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.
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.