How to Style Blockquotes

So, what is a blockquote anyway? Let's look at a blockquote and learn about it.

By definition: A blockquote in HTML is used to represent a section of text that is a long, direct quotation from another source. It is semantically distinct from the main text and is typically styled by browsers with indentation or other visual cues to make it stand out.

So, when it comes to styling your blockquote, there are a ton of possibilities. As you can see, mine is quite fancy, but experiment with different colors, borders, etc. and see what you can come up with!

Copy The Code for Yourself

Copy Text

Break It Down

display: block
You don't need to mess with this part. It just makes the blockquote show up as... well... a block on the page.
background: #eee;
This is where you will put a color code in place of the 'eee'. Make sure to keep the # symbol.
margin: 0 auto 3px;
This adds space regarding everything AROUND the blockquote and the blockquote itself. So, think of it like the empty space between the box of this content section of my website you are using and my blockquote box. There's padding so everything isn't touching the outside box borders.
padding: 10px 15px 10px 40px;
This adds space between the content INSIDE the blockquote box and the edges of the blockquote box.

width: 360px;

  position: relative;

This defines how wide on the screen your blockquote will be. You can use multiple units of measurement, like pixels, percent, etc. The position parameter means: “Stay where you normally are, but now I can position things inside you relative to your box.”
ine-height: 1.2;
This defines the height of the text itself. This can also be changed in varying units of measurement.
color: #777;
This will change the color of the text in the blockquote.
text-align: justify;
This tells the text how to align itself within the blockquote. You can use left, right, justify, center, or none if you're feeling wild.