Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- [Chris] Hi, this is Chris Converse. And in this episode, we'll use CSS to style a blockquote within our webpage. We'll use CSS pseudo-elements to add large quote marks along with positioning and text properties in order to bring more attention and style to a quote. If you'd like to follow along with me, download the exercise files, and let's begin by opening the index.html file in a text editor. And so, once you have the index file opened in a text editor, you'll see we have a really basic webpage in place with a blockquote down here. Now to preview this, you can open the index.html file up in a web browser.
So this is the default styling we have in place. We have our quotes which are actually in the HTML here, and we have our citation. So the first thing we're going to do is come in here and get rid of the beginning and ending quotes. So delete the left side double quote. Then come over here and delete the right side double quote. And so, the citation has an em dash added through a CSS pseudo-element, and we're going to do something very similar with the beginning and ending quotes. And I want to do this with CSS because I want as little content in the HTML as possible. So once you've made that change, save your HTML.
Let's go back to the exercise files, and let's open up style.css in our text editor. And now inside of the CSS file, let's scroll down and find the blockquote selector which is right here. So the first thing we'll do after the color is let's add a font size. So let's set the font size to 1.6 ems just to make that a little bit larger. Let's hit a Return. And then on the next line, let's set a position value of relative. Now we need to do this because we're going to be absolute positioning the pseudo-elements inside of the blockquote, and we want to make sure that those position properties will position in relation to the blockquote instead of going all the way up to the body tag.
So now with that in place, let's hit a few returns after blockquote and let's add our first pseudo-element. So I'll type in blockquote, then two semicolons, then the word before, put in our brackets, and then let's start by defining the content. So content: , two tick marks for a string, then a semicolon. And inside here, we need to specify the unicode character for the beginning quote. So that'll start with a backslash and then 201, then the letter c.
And now in the browser, we can see our beginning quote showing up at the beginning of the blockquote. Let's come back to our CSS. Next property, let's come in here and set font size. We're going to set this to 4.2 ems, so four times the base font size, then a Return. Next we'll set a position property. We're going to set this to absolute. And now that this item is being positioned, we'll set left and top properties. So we'll start with left, so left: . We're going to set this to -46 pixels.
Next line, we're going to set a top property, and we're going to set this to 15 pixels. And then finally, we'll set the font color. So we'll use rgba for this, put in our parentheses. We're going to set this to a semi-transparent white, so we'll put 255 for red, 255 for green, 255 for blue, and then we'll set the alpha to .4 making it 60% transparent. So now with our beginning quotes being added, let's copy all of this. Let's paste it down below, and let's reset the properties to create our ending quotes.
So the first thing we'll do is set this pseudo-element to be after. For the content, we're going to set this to 201d. We're going to leave font size at 4.2 ems. We're going to keep position absolute. We're going to come in here and remove the left property. And then we'll change the top property to bottom, and we'll set this to -36 pixels. And we'll leave the color as is. So now if you preview this in a browser, since we haven't set a left or right property, the default value is going to be wherever this element shows up after the content.
So here it's showing up after the citation. So now what we need to do is set the ending quote to show up after the quotation and not after the citation. So to do that, we need to set some positioning properties on the citation so that the quotes will not pay attention to it. So to do that, let's scroll down in our CSS. Let's find our blockquote cite for the citation. After the color, let's hit a return. And the first thing we'll do is set a display type of block so that the citation will always show up on its own line.
So I'll type display: , set this to block, put in semicolon. And now in our browser, we can see that the citation is now on its own line. Next we'll set a font size. We want the citation to be a little bit smaller. So we're going to set this to .7 ems which will be 30% smaller than the blockquote size. Next we'll set a position value to this as well. And we'll set this to absolute. And then finally, we'll set a bottom property of -2.5 ems which will position the citation a little further away from the quote.
And all of these rules together will give us a much more pleasing and interesting pull quote for our webpage. So if you'd like to explore more options for styling a blockquote, check out chapter two of our course on Creating a Responsive Web Design here in the library. Or to dive deeper into more options for styling a blockquote, check out our course entitled Creating a Pull Quote with CSS. And so with that, I'll conclude this brief look at styling a pull quote with CSS. And as always, thanks for watching.