How to Style a Blockquote with CSS

Create a blockquote like this with CSS.

Make your web page blockquotes stand out and be distinct. Style them with CSS to make them impressively different.

Things You'll Need

• Basic HTML knowledge
• Basic CSS knowledge
• A web page with blockquotes in need of some style
• HTML editor

Instructions

Use a Background-Image, a Little Padding, and a Border

1. Type a blockquote on your web page as you normally would, using blockquote tags to format it.

2. 

   A background image is not essential, but there is one in this example. It is large enough to create a background for a blockquote that is longer than the one in the example at the opening of the article. Note that a very long blockquote would require a different image to look good.

3. Start by adding the background-image to the blockquote selector in your CSS. Here's an example:

   blockquote {
   background-image: url(tack.jpg);
   background-repeat: no-repeat;
   background-position: left center;
   }

   Some images would look all right repeated, but this one will work better with no-repeat as the value for the repeat property. By positioning the tack at the left horizontally and the center vertically, you keep the tack on the left and allow some room for vertical expansion at the top and bottom for a somewhat longer blockquote.

4. Give the blockquote a width if you want. Blockquotes are indented on the left and right by default: You may consider that enough containment, or you may want a smaller width.

5. With this particular image, some padding is needed to move the text of the blockquote away from the left side so it doesn't sit on top of the tack. Finally add a border to some or all of the sides.

   The example rule is now:

   blockquote {
   background-image: url(tack.jpg);
   background-repeat: no-repeat;
   background-position: left center;
   width: 400px;
   padding-left: 110px;
   padding-right: 5px;
   border: 2px dashed #FC8A42;
   }

   You can change this example rule in many ways depending on the image, the padding or the border you use to customize a blockquote. Create a customized blockquote that will work well on your web page.

Tips & Warnings

• You may use margin and background-color rules to style blockquotes.

• You may change the font-size or line-height to make a blockquote stand out from the other text on the page.

• You may use the float property to move a blockquote to the left or right margin and allow the other text to flow around it.

Resources

• CSS Blokquote