Sometimes when you are writing a post, you may want to have some texts to stand out from the rest. To do this, you would need a blockquote. A blockquote is a block of text that is a few spaces indented from the left margin and is usually having the appearance of a textbox.
Adding a blockquote
To add a blockquote to your page/post, simply add the <blockquote> tags to the text that you want to include inside the blockquote. For example:
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
Styling the blockquote
To style a blockquote, you will need to add CSS codes to it. I will be using my own blockquote CSS codes as an example.
blockquote {
background: #fff;
margin-left: 35px;
font-size: 12px;
color: #951919;
font-family: Arial, Verdana, sans-serif;
padding: 5px 5px;
}
Now that we have styled our blockquote, so when you add the <blockquote> tags to your text, it should look like this:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Add border
To add a border, just add to the blockquote CSS code:
border: 1px solid #000;
(where 1px is the thickness of the border, solid refers to the type of border and #000 refers to the colour of the border)
Add background image
To add background image, put in this code:
background-image: url('URLofimage');
Example:
background-image: url('http://nekonette.com/img/blq.png');