Applying Styles Locally

If you are new to style sheets and would like to experiment a bit before taking the plunge, applying styles locally is an easy, small-scale, and rather safe way to begin. Although it doesn't centralize all your formatting information for easy editing and global updating, it does open the door to the additional formatting that is impossible to create with conventional (X)HTML tags.

Figure 8.19. Rules applied locally affect only a single element, in this case, the left img tag.

To apply styles locally:

1.	Within the (X)HTML tag that you want to format, type style=".
2.	Create a style rule without curly brackets or a selector. The selector isn't necessary since you're placing it directly inside the desired element.
3.	To create additional style definitions, type a semicolon ; and repeat step 2.
4.	Type the final quote mark ".

Figure 8.20. Only the left image has a border. To repeat the effect shown in the rest of this chapter, you'd have to add style="border: 4px solid red" to every single img tag individually.

Tips

• Be careful not to confuse the equals signs with the colon. Since they both assign values it's easy to interchange them without thinking.

• Don't forget to separate multiple property definitions with a semicolon.

• Don't forget to enclose your style definitions in straight quote marks.

• Styles applied locally take precedence over all other styles (see page 135).

• If you specify the font family in a local style declaration, you'll have to enclose multi-word font names with single quotes in order to avoid conflict with the style element's double quotes. Actually, the reverse is also fine. You just can't use the same type of quotes in both places.