Adding Styles to a Web Page: Embedded

The main use for CSS is to define style rules for an entire document (Web page). To do this, you can embed your style rules in the head of the document within a style element (Figure 2.5).

Figure 2.5. The general syntax of a CSS style placed in the head of an HTML document.

While the results of adding styles in this manner can look identical to adding the styles directly to an HTML tag (shown in the previous section), placing styles in a common location lets you easily change all the styles in a document (Figure 2.6). For example, you can define the style for H1 tags in the head of your document and it will apply to all h1 tags in that document.

Figure 2.6. Although this figure is a doppelganger of Figure 2.4, the CSS used to create it is located in the head of the document rather than in each individual tag.

To set the style for tags in an HTML document:


<style type="text/css" media="all">...</style>

Type the opening style tag in the head of your document (Code 2.2). Define the type attribute as "text/css", which defines the styles that follow as being not just any style, but CSS. Also define the media type, using a value of all, which will apply the style sheet to the page, regardless of the type of machine used to out put it. Then close the style tag.

Code 2.2. Although the result of this code (Figure 2.2) may look identical to the preceding example (Figure 2.1), the style rules are collected in the head of the document, where they affect all tags within the HTML document.

[View full width]

a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " /xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Adding CSS to a Web Page</title> <style type="text/css" media="all"> body {      font-size: 1em;      font-family: Georgia, 'Times New Roman', times, serif;      color: #000000;      margin: 8px;      background: white url(alice23.gif) no-repeat; } h1 { font: small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif; color: red; } h2 {      color:#999; } #content {      position: relative;      top: 190px;      left: 165px;      width: 480px; } #content #copy {      line-height: 1.5; } p.authorName {      margin: 8px 0px;      font: bold 1em Arial, Helvetica, sans-serif; } h2 .chapterName {      display: block;      margin-bottom: 8px;      font-size: smaller;      color:black; } p.dropCap:first-letter {      font: 300%/100% serif;      color: #999999;} </style> </head> <body> <div > <div>      <h1>Alice's Adventures in Wonderland</h1>      <p >Lewis Carroll</p>      <h2>Chapter I<br />         <span >Down the Rabbit-Hole</span></h2></div> <div >      <p >Alice was beginning to get very tired of sitting by her sister on  the bank...</p> </div></div> </body></html>


h1 {...}

In the style container from Step 1, start a new rule by typing the selector you want to add styles to, followed by opening and closing curly brackets ({}). The selector can be any of the following:

  • An HTML selector , such as h1 (see "(re)Defining an HTML Tag")

  • A class selector , such as .authorName (see "Defining Classes for Any Tag")

  • An ID selector , such as #content (see "Defining ID Selectors to Identify an Object")


font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif; color: red;

In the brackets of your rule, type the declaration(s) to be assigned to this ruleformatted as property: valueusing a semicolon (;) and separating individual declarations in the list. To make the rule more easily decipherable, you can also add one or more line breaks, spaces, or tabs after a declaration without interfering with the code.


Repeat Steps 2 and 3 for all the selectors you want to define. To make the selectors easier to decipher, you can also add one or more line breaks, spaces, or tabs between rules without interfering with the code.


  • If you're writing HTML, you don't have to include type="text/css", because the browser should be able to determine the type of style being used. I always put it there, however, to allow browsers that do not support a particular type of style sheet to avoid the code. It also clarifies the type being used. However, if you are using XHTML (which I recommend), the type attribute is required.

  • You do not have to define the media type, but browsers will default to the all value if left unassigned. See "Setting Styles for Print and Other Media" later in this chapter to learn how to specify different style sheets for different media types such as print and handheld.

  • You can hide your CSS from non-CSS capable browsers by placing the HTML comment tags <!--...--> around all rules within the style tags. Otherwise, these browsers may display the text, which is not very attractive.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: