- [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.