Lesson 3: Embedded Style Sheet

❮ Previous Lesson Next Lesson ❯

In the previous lesson, we have learned how to create an inline style for a section of an HTML document using the Style attribute of the CSS. In this lesson, we shall learn how to create a style for an HTML document using the embedded style sheet. Embedded Style Sheet means we embed an entire style sheet into an HTML document's head section.

The style sheet section always starts by defining the style's types, or rather MIME type. For text document, we always start with

<style>

The body of the style sheet goes within

<style>

</style>

The body of the style sheet declares rules for the HTML elements. For example,

p {font-size:16pt} declares that the font size of the p element in the entire HTML document. This means that when we use the p element in our HTML document , the font size of the text enclosed within the <p> tag will be 16.

You can add other attributes(or properties) to the p element, such as

p {color:green; line-height:14px; text-decoration: underline;}

This means that within the <p> tags, the text color is green, line spacing is 14 pixel and text is underlined. Here is a sample embedded style sheet:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Embeded Style Sheet</title>
<style>
body{background-color:yellow}
h1{font-size:20;color:blue}
p {font-size:14pt; color:red}
</style>
</head>
<body>
<h1>Embedded Style Sheet Example 1</h1>
<p>The entire HTML document can be formatted using embedded Cascading Style Sheet, it makes formatting a web page much easier</p>
</body>

The Output

Embedded Style Sheet Example 1

The entire HTML document can be formatted using embedded Cascading Style Sheet, it makes formatting a web page much easier

❮ Previous Lesson Next Lesson ❯