05_images_in_text.html

The University of Portsmouth Crest () has been through several iterations and exists alongside the logo for use in more formal circumstances.

The crest appears several times in this page, in two different sizes. An ID selector (#crest) is used to set the size and layout of the first crest. Subsequent crests are styled using a class selector (.unicrest).

The crest colour can event be changed by use of a filter, all using the same image, for example:

NB: Styling img directly would affect all images including the crest at the top of the page, so in this case we have avoided that. Often, styling all img elements is not a useful approach.

Adjust the .unicrest class selector so that the height of the image is 2em. Observe that the images are now a similar size to the content they are embedded in. The line-height for paragraphs is also 2em.

The .unicrest class selector has two other commented-out properties. border is useful to help you see what's happening. vertical-align can be experimented with.

What do you expect to happen if another six crest images are added to this paragraph?

Finally notice that there are two rules that include a transform statement. Experiment with these to see why happens. If both rules are uncommented does the double transform cancel itself out? Why do you think this happens?