Embedded Style Sheets

Unlike external style sheets, embedded style sheets are not separate documents, rather, they are styles that are created inside the HTML documents. In other words, an embedded style sheet is a set of styles that is created as a part of an HYML document. These style sheets are useful when you want to apply similar styles to all the elements present on a Web page. Embedded style sheets are created using the <style> element, which is added inside the <head> element of the HTML document.

Below given table lists all the attributes of the <style> element.

Attribute	Description
Dir	Sets the direction of the text defined in an HTML element. You can set this attribute to ‘ltr’ for left to right text direction or ‘rtl’ for right to left text direction.
Disabled	Specifies that the styles should not be applied initially
Lang	Sets the language for the element
Media	Sets the media for style sheet definitions (multiple destinations are specified by separating each pair of destinations by a comma). You can set this attribute to screen (default value for the attribute), tty, tv, handheld, aural, print, projection, Braille, screen, and all.
Title	Allows the browser to build a menu of alternative style sheets. You can set this attribute to an alphanumeric value.
Type	An essential attribute, which indicates the MIME type of the <style> element content. You can set this attribute to either “text/css” or “text/javascript”.

Let’s do the following steps to create an embedded style sheet.


<!DOCTYPE html>
<html>
<head>
    <title> Embedded Style Sheets</title>
<style type=”text/css” media=”screen”>
<--
body {background-color:lightyellow; font-family:Times New Roman}
p {font-family: Georgia, serif; font-size: medium; color:#ff9470}
a:link {color:#808080}
a:visited{color:#ffff00}
a:hover {color:#00ff00}
a:active {color:#ff0000}
-->
</style>
</head>
<body>
    <h1>Embedded Style Sheet Example</h1>
    <p>This is an example of Embedded Style Sheets. Here, we 
    Have defined two links – Page 1 and page 2. These are given below:</p>
    <a href=”page1.html target=”_blank”> <h2>Page 1</h2></a>
    <a href=”page2.html target=”_blank”><h2>Page 2</h2></a>
</body>
</html>

Save the document with the name EmbeddedStyleSheets.html and open on browser.

PRV MENU NEXT

Embedded Style Sheets

Latest Post