An in-line style is a style applied to a particular tag on a Web page. You can apply an in-line style to any tag on a page by using the STYLE attribute. Like other attributes, STYLE affects only the tag that contains it, just as setting the WIDTH attribute for an image affects only that image. Therefore, in-line styles are most useful for precise control of a single element, rather than for large-scale changes to an entire page or site.
Let's look at a simple HTML document without styles, shown in Code Listing 11-1. You can see the document created by this code in Figure 11-1.
This listing uses the <SPAN> tag, which is especially handy when working with styles because it acts as a container for text without applying any formatting of its own. Thus, in the Web page created by Code Listing 11-1, the text between the opening <SPAN> tag and the closing </SPAN> tag will display like normal text, but it can be treated as one text chunk.
Code Listing 11-1.
<HTML> <HEAD> <TITLE>Listing 11-1</TITLE> </HEAD> <BODY> <SPAN>This text is in a SPAN.</SPAN><BR> This text is not in a SPAN. </BODY> </HTML>
Figure 11-1. A simple HTML document without styles.
This code allows us to add an in-line style that changes the text in the SPAN element to boldface by using the font-weight attribute, as shown in Code Listing 11-2. You can see this change in Figure 11-2.
Code Listing 11-2.
<HTML> <HEAD> <TITLE>Listing 11-2</TITLE> </HEAD> <BODY> <SPAN STYLE="font-weight: bold"> This text is in a SPAN.</SPAN><BR> This text is not in a SPAN. </BODY> </HTML>
Figure 11-2. An example of applying an in-line style.
Notice that the <SPAN> tag in Code Listing 11-2 now includes a STYLE attribute, which causes any text contained in the SPAN element to have the formatting specified by this attribute. Also notice the syntax of the STYLE attribute. STYLE is assigned a value enclosed in quotation marks. This value contains the style declaration. Here the name of a particular attribute (such as font-weight) is followed by a colon and the value assigned to that attribute. (The syntax used for style sheets differs slightly from the in-line style syntax described here, as you will see later in this chapter.)
You can have more than one style declaration in a STYLE attribute. For example, in Code Listing 11-3, we added the font-style attribute (set to italic) to our boldface font-weight attribute. Notice that both style declarations are in the same set of quotation marks and are separated by a semicolon. Figure 11-3 illustrates the use of these two styles.
If you are familiar with HTML, you will notice that the results of Code Listings 11-2 and 11-3 could have been achieved by using traditional HTML without dynamic styles. Although HTML does allow basic formatting such as the use of boldface and italics, dynamic styles offers finer control over a greater number of formatting and layout options, from fonts and exact page position to multimedia filters.
Code Listing 11-3.
<HTML> <HEAD> <TITLE>Listing 11-3</TITLE> </HEAD> <BODY> <SPAN STYLE="font-weight: bold; font-style: italic"> This text is in a SPAN.</SPAN><BR> This text is not in a SPAN. </BODY> </HTML>
Figure 11-3. An example of using multiple in-line styles in the same tag.
So far, we have used styles to format individual elements. CSS also lets you control the formatting of a whole Web page or Web site when you use style sheets, as you'll see in the next section.