Previously we have learned how to format a section of the HTML document using the Style attribute of the CSS. This is called inline style.
To make formatting of the HTML document using CSS easier, it is better to embed the entire style sheet into the document. This creates an embedded style sheet.
To embed a CSS inside an HTML document, we can define the styles in the <head> section of the document. The style sheet section always starts by defining the style’s types, or rather MIME type. For text document, we always start with
<style type=”text/css”>
The body of the style sheet goes within <style type=”text/css”> and </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 {font-size:16pt; color:red;background-color:yellow}
Here is a sample embedded style sheet:
<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″><title>New Page 1</title><style type=”text/css”>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>
Click the CSS Example 1 to see the output.
Blog this!- Bookmark on Delicious
- Digg this post
- Recommend on Facebook
- Share on FriendFeed
- Buzz it up
- Share on Linkedin
- Share via MySpace
- Share on Posterous
- Share with Stumblers
- Tumblr it
- Tweet about it
- Buzz it up
- Subscribe to the comments on this post
- Print for later
- Bookmark in Browser
- Tell a friend
