| The Style Sheet Tag |
Inline styling (through the Style attribute) is limited because you can't use selectors, you simply apply certain declarations on the current element (the element that declared the Style attribute). The Style tag, on the other hand, is unlimited because you can define almost anything you define in the .css external file. You place the Style tag (which we used to call the embedded style sheet) in the <head> section after the <title> element, as in the following HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Structure</title>
<style type='text/css'>
body
{
font-family: Arial;
font-size: 1.1em;
}
div
{
color: white;
background-color: black;
height: 30px;
}
</style>
</head>
<body>
<div>
This is a div element with an inline style
</div>
</body>
</html>
Older browsers don't support CSS, so when you browse a Web page that has an embedded style sheet (using the Style tag) it will cause problems. The solution to this problem is to surround the CSS rules inside the opening <style> and the closing</style> with an HTML comment. This makes sense because a comment text will be escaped. This rule applies to both older and modern browsers with only one trick. The CSS engine in the modern browsers understands that CSS rules may be surrounded by an HTML comment inside the Style tag, so it will apply the styles to the document. So if we surrounded the above CSS rules with an HTML comment it will look like the following code:
<style type='text/css'>
<!--
body
{
font-family: Arial;
font-size: 1.1em;
}
div
{
color: white;
background-color: black;
height: 30px;
}
-->
</style> |
| Return to Listing |