(Re)Defining HTML Tags

All HTML tags have styles associated with them. Take the italics tag, for example: Its inherent style declaration is font-style: italic.

Figure 2.12 shows the general syntax for adding a complete CSS rule using an HTML selector.

Figure 2.12. The general syntax used to define the styles for an HTML tag.

By adding new declarations to i, the HTML selector, you can change its appearance to be anything you want. For example, you could have all italicized text be bold, or even set font-style: none, preventing the italics tag from italicizing text.

In this example (Figure 2.13), I've set the style of several different HTML selectors, including the italics tag, paragraph tag, image tag, and even the body. Notice though, that I do not have to add any additional code in the HTML in order for these styles to work.

Figure 2.13. Several HTML tags have been styled, including the <p> tag, which makes the text in paragraphs red; the <i> tag, which makes italics bold; and the <img> tag, which adds a red border around all images.

To define an HTML selector:


i {...}

Start with the HTML selector whose properties you want to define. Add a curly bracket ({) to open your rule (Code 2.8). Make sure you always close your declaration list with a curly bracket (}). If you forget this, it will ruin your day!

Code 2.8. HTML tags can be directly styled, allowing you to directly manipulate any tag on the screen without ever adding anything directly to the HTML in the <body> tag.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | (re)Defining HTML Tags</title> <style type="text/css" media="all"> body {      font: 1.2em Georgia, 'Times New Roman', times, serif;      color: #000000; background-color: #fff;      margin: 8px; } p {      font-size: 1em;      color: #f00;      line-height: 150%; } i {      font-weight: bold } img {      padding: 6px;      border: 3px solid #f00;      margin: 0px 0px 8px 8px;      float: right; } </style> </head> <body> <div > <div >      <h1>Alice's Adventures in Wonderland</h1>      <p >Lewis Carroll</p>      <h2>Chapter II<br />         <span >The Pool         of Tears</span>      </h2> </div> <div > <img src="/books/3/292/1/html/2/alice07a.gif" height="236" width="200" alt="Alice" /> <p><i>'Curiouser and curiouser!'</i> cried Alice...</p> </div></div> </body></html>

CSS rules can be defined within the style tags in the head of your document (see "Adding Styles to a Web Page" earlier in this chapter) or in an external CSS file that is then imported or linked to the HTML document (see "Adding Styles to a Web Site" earlier in this chapter).


font-weight: bold;

Within the brackets, type the style declaration(s) to be assigned to this HTML tagformatted as property: valueusing a semicolon (;) and separating individual declarations in the list. You can also add one or more line breaks, spaces, or tabs after a declaration without interfering with the code to make it more readable.

Add as many declarations as you want, but the properties have to work with the HTML tag in question. For example, you cannot use the text-indent property (which only works on block elements) to define the bold tag (which is an inline element). Refer to this book's Web site (webbedenvironments.com/css_dhtml_ajax) for a listing of which properties can be used with which kind of tag types.


  • The syntax is slightly different for redefining an individual HTML tag inline within a document (see "Adding Styles to an HTML Tag" earlier in this chapter).

  • Redefining a tag does not override that tag's preexisting properties. Thus, the bold tag (b) still makes text bold no matter what other styles are added to it, unless you override it using that property's CSS equivalents; for example, set font-weight:normal for the bold tag (see "Inheriting Properties from a Parent" later in this chapter).

  • Although the body tag can also be redefined, it acts like a block-level tag (see "Kinds of Tags" in Chapter 1). Internet Explorer for Windows does not accept positioning controls in the body tag.

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

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net