Styling the <a> Element

Styling the <a> Element

The bottom-right image is applied to the <a> element.

In order for the image to display correctly, the <a> element must first be converted to block level using display: block.

The next step is to add padding using padding: 0 20px 20px 0;. This will apply padding to the right and bottom of the element.

The content of the <a> element can be aligned to the right by using text-align: right.

Finally, the background image is applied using background: url (lesson17d.gif) no-repeat 100% 100%; as shown in Listing 17.7. This will apply the image to the bottom-right edge of the <a> element. The results can be seen in Figure 17.9.

Listing 17.7. CSS Code for Styling the <a> Element

div#pullquote
{
    margin: 2em;
    background: #09f url(lesson17a.gif) no-repeat;
}

div#pullquote h2
{
    margin: 0;
    padding: 20px 20px 0 20px;
    background: url(lesson17b.gif) no-repeat 100% 0;
}

div#pullquote p
{
    padding: 0 20px;
}

div#pullquote p.furtherinfo
{
    padding: 0 0 0 20px;
    background: url(lesson17c.gif) no-repeat 0 100%;
}

div#pullquote p.furtherinfo a
{
    display: block;
    padding: 0 20px 20px 0;
    text-align: right;
    background: url(lesson17d.gif) no-repeat 100% 100%;
}

Figure 17.9. Screenshot of styled <a> element.