| | |
An embedded style sheet is style information placed within a STYLE tag in the HEAD of a single HTML page.
Tag: STYLE (always closes)
Attribute: TYPE
Value: text/css
Example (abbreviated):
<style type="text/css"> /* style information here */ </style>
Example (abbreviated):
<style type="text/css">
p { font-size:14pt; color:#000000; }
b { font-weight:bold; }
</style>
For browsers which don't understand CSS, we need to hide the style information using HTML comments within the STYLE tag; otherwise, these non-CSS browsers will display the style information as BODY text on the HTML page (not desirable).
Just AFTER the opening STYLE tag, we'll place an opening HTML comment tag. Just BEFORE the closing STYLE tag, we'll place a closing HTML comment tag, preceeded by the slash-slash (//) single line CSS comment marker; this single line CSS comment before the closing HTML comment is REQUIRED!
Example (abbreviated):
<style type="text/css">
<!--
p { font-size:14pt; }
//-->
</style>
An embedded style sheet on an HTML page, then, will be at least FIVE (5) lines tall: one line for the opening STYLE tag, one line for the opening HTML comment tag, at least one line for style information, one line for the slash-slash and closing HTML comment tag, and one line for the closing STYLE tag. Some books mistakenly put one or more of these lines on the same line of code; DO NOT combine these lines if you want your embedded style sheet to operate correctly under all conditions.
Example (wrong):
<style type="text/css"><!-- p { font-size:14pt; } //--></style>
The above example will NOT work at all!
Example (corrected, in context):
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
<!--
h2 { font-family:"Arial", "Helvetica", sans-serif; color:#000000; font-size:24pt; }
p { font-family:"Times New Roman", "Times", serif; color:#330000; font-size:14pt; }
//-->
</style>
</head>
<body>
<h2>Content Goes Here</h2>
<p>This would be content, if there were any content.</p>
</body>
</html>
Here is the above example displayed.
Again, you may place any style information or declarations into an embedded style sheet that you would place into a linked external style sheet. The style information in an embedded style sheet, however, ONLY applies to that one HTML page.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.