Adding Styles to an HTML Tag: Inline


Although CSS means never having to set the appearance of each tag individually, you still have the freedom to set styles within individual tags, referred to as an inline style (Figure 2.3). This is especially useful if you've set styles for the page in the head or in an external style sheet, and you need to override them on a case-by-case basis.

Figure 2.3. The general syntax for defining styles directly in an HTML tag.


In this example (Figure 2.4), the styles have been added directly to several HTML tags, including the H1 tag used for the book title.

Figure 2.4. The styles have been placed directly into the tags.


To set the style properties of individual HTML tags:

1.

<h1 style=


Type style= in the HTML tag you want to apply styles to (Code 2.1).

Code 2.1. Each tag receives instructions on how the content within it should behave, by means of the style attribute.

[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 | Adding CSS to an HTML Tag</title> </head> <body style="font-size: 1em; font-family: Georgia, 'Times New Roman', Times, serif; color:  #000000;margin: 8px; background: white url(alice23.gif) no-repeat;"> <div style="position: relative; top:190px; left:165px; width:480px;"> <div> <h1 style="font:small-caps bold italic 2.5em Georgia, 'Times New Roman', Times, serif;  color: red;">Alice's Adventures in Wonderland</h1>      <p style="margin: 8px 0px; font: bold 1em Arial, Helvetica, sans-serif;"> Lewis  Carroll</p>      <h2 style="color:#999;">Chapter I<br />         <span style="display: block; margin-bottom: 8px; font-size: smaller; color :black;">Down the Rabbit-Hole</span></h2> </div> <div style="line-height: 1.5">      <p><span style="font: 300%/100% serif; color: #999999;">A</span>lice was beginning to  get very tired of sitting by her sister on the bank...'</p> </div></div> </body></html>

2.

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


In quotes, type your style declaration(s) as property: value, using a semicolon (;) and separating individual declarations. Make sure to close the declaration list with quotation marks.

3.

> Alice's Adventures in Wonderland' </h1>


After closing the tag, add the content to be styled. Then close the tag pair with the corresponding end tag.

Tips

  • If you are adding styles to a non-closing tag, such as an image tag, and you're using XHTML, you will need to make the tag self closing. So, rather than:

    <img src="/books/3/292/1/html/2/myImage.png">

    You would use:

    <img src="/books/3/292/1/html/2/myImage.png" />


  • Although you do not gain the benefit of the universal style changes, using CSS in individual HTML tags is nevertheless very useful when you want to override universally defined styles. (See "Determining the Cascade Order" later in this chapter.)

  • I've also shown how you can define the <body> tag in this example, but be carefulthis can lead to more problems than it's worth (see "Inheriting Properties from a Parent" later in this chapter). In addition, many earlier browsers, including Microsoft Internet Explorer 5.5, balk at some properties being added to the <body> tag, especially the positioning properties discussed in Chapter 7.

  • So as not to confuse the browser, it is best to use double quotation marks ("…") around the declaration list, and single quotation marks ('...') around any values in the declaration list, such as font names with spaces.

  • Make sure that if you are copying and pasting code from an application such as Microsoft Word into a Web editing application such as Adobe Dreamweaver that you convert all smart quotes ("…") to straight quotes ("…").

  • One common mistake is to confuse the equal sign (=) with the colon (:). Remember that although the style attribute in the tag uses an equal sign, CSS declarations always use a colon.

  • You can also apply common styles to an entire Web page (see the following section) or to multiple Web pages (see "Adding Styles to a Web Site" later in this chapter).

  • Font names made up of more than two words are placed in single quotes ('Font Name') when used with a style.




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