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.

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.

Applying Styles Locally

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

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.

Applying Styles Locally

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

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.

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

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.