CSS Programming/Embedded
From Wikibooks, the open-content textbooks collection
[edit] Introduction
This section relates to the use of CSS in (X)HTML. See Applying CSS to XML for details of using CSS with XML.
The technique in this section does not have the maintenance benefit of using linked stylesheets. It should only be used during testing or for writing self-contained, single page examples. Production quality webpages and examples with more than one page should use linked stylesheets. Dynamically generated webpages may need to use embedded CSS but this should be kept to a minimum. Even in dynamic pages any CSS that is common to multiple pages should generally be moved to a linked stylesheet.
[edit] Embedded CSS
Embedded CSS is CSS that is located in the header of the HTML document that requires styling. For example we would like the text in this HTML document to appear bold.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Example Web Page</title>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
The CSS must be placed in the document's header section:
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
}
</style>
</head>
The CSS is contained in a style element. Setting the element's type attribute to text/css tells the browser that the enclosed sheetstyle is written in CSS and should be used to format the page. If the attribute type is missing or set to an unrecognized value the CSS will not be applied to the page.
The little bit of CSS in this example tells the browser to make all the text found in any paragraph (p) elements bold. The text on the page would look like this:
Text that will be formatted.
Here is the complete document including the CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
}
</style>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
Remember, you should use linked stylesheets in preference to embedded stylesheets whenever possible.
