Styling the blockquote Element

Styling the `<blockquote>` Element

Unstyled <blockquote> elements are indented on the left and right sides. You can change this default behavior by resetting the margins. In this case, you will set the top and bottom margins to 1em and the left and right margins to 0. This can be achieved using a shorthand margin declarationmargin: 1em 0.

Next, you can apply a border to the <blockquote> to separate it from other content on the page. You can use a 1-pixel-wide border set to light gray, border: 1px solid #ddd.

The first background image will be applied directly to the <blockquote> element. The declaration will be background-image: url(lesson13.gif).

The image will be positioned in the top left corner of the <blockquote>. This is achieved by setting the x and y axis to 5px using a declaration of background-position: 5px 5px.

To stop the image from repeating across the entire <blockquote>, add background-repeat: no-repeat.

These three background declarations can be shortened into a single declaration using background: url(lesson13.gif) 5px 5px no-repeat. The background image is shown in Figure 13.1.

Figure 13.1. Background image applied to `<blockquote>`.

Now the image is in position, but the text is sitting over the top of it. This can be fixed by applying some padding to the top of the <blockquote>using padding-top: 30px as shown in Listing 13.3. The results can be seen in Figure 13.2.

Listing 13.3. CSS Code Styling the `<blockquote>`

blockquote {     margin: 1em 0;     border: 1px solid #ddd;     background: url(lesson13.gif) 5px 5px no-repeat;     padding-top: 30px; }