Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The block quote is a powerful HTML tag that can be used to highlight quotes or create pole content within your content. In the markup HTML tags and formatting post, there are two block quotes. You can see them right here, single line block quotes, and also a multi-line block quote that has a citation reference, wrapped in the site tag at the bottom. We styled this block quote previously when we styled all of the content with our typography styles, but I think block quotes are important enough that you can apply a whole set of styles just for block quotes.
And that's what we're going to do right now. We'll start out by just applying a general style to the block quote, and what I want to do here is separate the block quote out by adding a line at the top and another line at the bottom. And then, I'm going to make the text italicized. And then, in the emphasized text, will be set to regular. If you go to the code snippets, you can copy out the first two rules here. And, I'll paste those rules in and underneath the rest of my typography elements. And, these rules do exactly what I said. I add a border at the top, another border at the bottom.
And add some padding, so that they're spaced between the text and the borders. Then I add a margin on the bottom to bump down any other content, and finally I set the font style to italic. Now because I did that I also have to set the emphasized font style to normal so that if people emphasize content it will still be emphasized in the blog form. Now I can save my styles, and go back and check them out in the browser. And you'll see my block quotes already look more like Blockquotes. But you also see that they're shifted in a little bit and that's because we're currently inheriting an old-style from underscores.
So if you go and look at the block quote in your quote inspector, you'll see in addition to our new block quote style. There's also an old one on line 158 that adds a margin of 1.5 ams to left and right sides. So if I turn it off, my block wood spans the full wave, and that's actually what I want. So I have to go back to my style sheet and remove that old style. So I'll go up to line 158. Right here, and I'm simply going to highlight that and comment it out. And then I'm going to use the search to find my blog quote again.
Here's my blog quote section. Now, I need to focus on that site element because there is a citation in this blog quote, but right now it's just blended in with the rest of the text. I want the citation to appear below the content. Shifted to the right, and I also wanted to have a smaller font and used a lotto font family. If you go back to the cold snippets you'll see I have custom style just for that purpose, it's right here. And when I paste it in. You see here, I set the site within the block quotes to display as a block.
I give it a margin on the top. I also give it a margin on the left of 40% so that it never spans the full width of the block quotes. And then I reduce the size of the font, and set the font family to Lotto. And finally I align the text to the right hand side. And this will make a dramatic difference. So when I reload my block quote again here, you'll see now the citation is shifted to the right. And you can clearly see that this is a citation for the quote. So now we have a block quote that's styled really well within our content. And we could actually just stop here.
But I want to take. Things one step further. I want to give the site user the ability to shift the block quote to either the left, or the right, so that the text flows around it. We're going to do this using the standard align left and align right classes that are built into WordPress, but I also need to style them. The tricky part is, I can't really test it in this post, because this post doesn't have normal content. So here I'm going to move this block quote into another post, and then we can test the alignment. So I'll go to edit my post first.
Here I'll go to the text editor and find my block quote, so it's right here, the one with the sight. I'll copy it out and then I'll go to all posts. And here, I want to find the post that's called post format standard. So I'll go into Post Format: Standard. And here I'm simply going to paste in the block quote in two places. I'll go first here, and then I'll paste it in again below the next paragraph. And then I'll take the first block quote and set class equals align left.
And the second one, I'm going to set class equals align right. Now I can update this post, and view the post, and when I scroll down you'll see I have my blog post and currently they are aligned but there's only a small difference. So now I'm going to add two more rules here, these two. And these rules will allow me to line the blog posts to the left and the right. And set the width of those block quotes to only 50% and give lots of padding on the other side.
That way, the block quote will actually shift to the left or the right and the content will flow around it. So when I now go and reload this post again, you'll see something really cool. Now you see the block quote is floating to the left and the content flows around it. And scrolling down, you have another blog quote that floats to the right and the content flows around it. So taking some time to fully style the blog quotes makes a huge difference in how the content appears on your page. And what we've done now is just the tip of the iceberg. We're going to take this one step further, and give the user the ability to shift the block quotes out of the content altogether, and utilize more space on wider screens.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.