Applying Classes to Tags in Code View

In Hour 11, you learned to apply special styles to certain content with the use of classes. In one example, you used classes to change the position of the image in the myCameras.html page. This example provides a good basis for learning how Expression Web 4 applies classes to tags in Code view. If you open myCameras.html in Split view and click the image, the relevant code highlights in Code view (see Figure 12.6).

Figure 12.6 The img tag for the image highlights in Code view when you click the image in Design view.

<img alt="Most of my cameras together" height="355" src="Images/camerasSmall.jpg"
width="600" class="alignCenter" usemap="#FPMap0" />

Inspecting the tag code, you see a new attribute toward the end: class="alignCenter". This is how Expression Web 4 applies classes to tags, whether they are selectors, spans, or divs. To change the class, all you need to do is edit the class name in Code view. In Hour 11, you learned how to create two more alignment classes. To apply one of these instead, simply change the class name to either alignLeft or alignRight and you’ll immediately see the changes in Design view. Adding a class to an existing tag is just as easy: Simply type the word class before the end bracket of the beginning tag, and IntelliSense gives you a drop-down list of all available classes.