Join Chris Converse for an in-depth discussion in this video Styling the base blockquote element, part of Design the Web: Creating a Pull Quote with CSS.
- So to begin our project, let's go to the exercise files. Let's select the index.html and design.css, and let's open both of these up in a text editor. So in the html file here, I have simple layout. We have our beginning html, the heading area and the body. In the heading area, we have a link over to our design.css file. And in the body area, we have a header with an h1 and an article element. Now inside the article area, I have a series of paragraph elements with some placeholder content.
And here we can see our blockquote. This is the element that we're going to be styling with CSS. So if we go over to our design.css file, we can see here that I've imported a Google font at the top. These rules up here create the layout, targeting the body, the header, the h1, and the article. And I also have a media query down here, which targets screen sizes under 550 pixels and I've made two adjustments. One for the header and one for the h1 inside the header. We're going to adding our rules for the main screen size here under article.
And then later on in the course, we will add a few rules inside of the media query here so that we can style this for small screens as well. Now at this point, if you'd like to preview the file that we're going to working with, you can go back to the exercise files and open the index.html file up in a browser. My particular text editor here has a built-in Preview. So I'm in my design.css file. I'm going to turn on my Preview. And then I'm going to point the Preview to the index.html file. This way I can work on the CSS, and see the resulting html file in the Preview.
So with your CSS file open, let's find the rule where we're targeting the article. Now a few lines after that, but not inside of the media query, let's add our first CSS rule to target the blockquote. So we'll type "blockquote". Put in our brackets. Let's split this open. Inside, let's first set a width property. So set a width to 45%, add a semicolon, and as I'm making these changes, you can see in the Preview area here, what the results are.
And now, after the width property, we're going to add a float property. This will allow the contents of float around the left-hand side of the block quote. So we'll type "float". Then "right". Next line, we're going to set margin properties. So I'll type "margin", colon, space. We're going to use shorthand style here, which goes top, right, bottom, left, with spaces. So for the top margin property, we're going to set zero pixels. Then a space. 26 for the right. 20 for the bottom. And 75 for the left.
This will give us a little bit of room on the left-hand side for our large quotes we're going to add in. Next property's going to be padding. We're going to set that to zero on all four sides. Next we'll set a font size property. So font size, 1.5 em's. What this will do is make this 50% larger than the base font, which, up here in the body element, we have defined as 15 pixels. Next line, we're going to set a line height. We're going to set the line height to 1.5 em's as well.
Now the next property we're going to set is going to be for the font family. I want to use a serif face here, since the main body copy is in a sans serif. So we'll add font-family, colon, then we'll specify the font Georgia, and that goes inside of quotes. You can use double quotes or single quotes. I happen to prefer single quotes. So inside of the quotes, we'll type "Georgia". Then a comma, then specify serif, then a semicolon. And then on the next line, we'll set the font color.
So we'll set color to #, to use hexidecimal, 07 for red, 46 for green, and two B's for blue. Then a semicolon. So with these rules in place, we can already see the typographic treatment taking effect. And we also have that extra margin on the left-hand side, so we can add the larger quotes later.
Chris Converse provides free exercise files for every installment of Design the Web. Download the files to practice styling pull quotes on your own website.