1
00:00:00.08 --> 00:00:02.05
- [Chris] Hi, this is Chris Converse.

2
00:00:02.05 --> 00:00:04.08
And in this episode,
we'll use CSS to style

3
00:00:04.08 --> 00:00:06.09
a blockquote within our webpage.

4
00:00:06.09 --> 00:00:09.06
We'll use CSS pseudo-elements
to add large quote marks

5
00:00:09.06 --> 00:00:12.00
along with positioning and text properties

6
00:00:12.00 --> 00:00:13.07
in order to bring more attention

7
00:00:13.07 --> 00:00:15.03
and style to a quote.

8
00:00:15.03 --> 00:00:16.09
If you'd like to follow along with me,

9
00:00:16.09 --> 00:00:18.04
download the exercise files,

10
00:00:18.04 --> 00:00:21.03
and let's begin by opening
the index.html file

11
00:00:21.03 --> 00:00:23.04
in a text editor.

12
00:00:23.04 --> 00:00:25.01
And so, once you have
the index file opened

13
00:00:25.01 --> 00:00:26.05
in a text editor, you'll see we have

14
00:00:26.05 --> 00:00:27.08
a really basic webpage in place

15
00:00:27.08 --> 00:00:30.02
with a blockquote down here.

16
00:00:30.02 --> 00:00:31.04
Now to preview this, you can open

17
00:00:31.04 --> 00:00:35.03
the index.html file up in a web browser.

18
00:00:35.03 --> 00:00:37.05
So this is the default
styling we have in place.

19
00:00:37.05 --> 00:00:40.09
We have our quotes which are
actually in the HTML here,

20
00:00:40.09 --> 00:00:43.03
and we have our citation.

21
00:00:43.03 --> 00:00:44.05
So the first thing we're going to do

22
00:00:44.05 --> 00:00:46.01
is come in here and get
rid of the beginning

23
00:00:46.01 --> 00:00:47.01
and ending quotes.

24
00:00:47.01 --> 00:00:49.06
So delete the left side double quote.

25
00:00:49.06 --> 00:00:53.02
Then come over here and delete
the right side double quote.

26
00:00:53.02 --> 00:00:55.00
And so, the citation has an em dash added

27
00:00:55.00 --> 00:00:56.05
through a CSS pseudo-element,

28
00:00:56.05 --> 00:00:57.08
and we're going to do
something very similar

29
00:00:57.08 --> 00:00:59.05
with the beginning and ending quotes.

30
00:00:59.05 --> 00:01:00.08
And I want to do this with CSS

31
00:01:00.08 --> 00:01:02.01
because I want as little content

32
00:01:02.01 --> 00:01:04.03
in the HTML as possible.

33
00:01:04.03 --> 00:01:06.08
So once you've made that
change, save your HTML.

34
00:01:06.08 --> 00:01:08.05
Let's go back to the exercise files,

35
00:01:08.05 --> 00:01:12.01
and let's open up style.css
in our text editor.

36
00:01:12.01 --> 00:01:13.06
And now inside of the CSS file,

37
00:01:13.06 --> 00:01:17.01
let's scroll down and find
the blockquote selector

38
00:01:17.01 --> 00:01:18.09
which is right here.

39
00:01:18.09 --> 00:01:21.00
So the first thing
we'll do after the color

40
00:01:21.00 --> 00:01:24.01
is let's add a font size.

41
00:01:24.01 --> 00:01:27.06
So let's set the font size to 1.6 ems

42
00:01:27.06 --> 00:01:30.04
just to make that a little bit larger.

43
00:01:30.04 --> 00:01:31.05
Let's hit a Return.

44
00:01:31.05 --> 00:01:32.05
And then on the next line, let's set

45
00:01:32.05 --> 00:01:35.06
a position value of relative.

46
00:01:35.06 --> 00:01:36.07
Now we need to do this

47
00:01:36.07 --> 00:01:38.06
because we're going to
be absolute positioning

48
00:01:38.06 --> 00:01:40.08
the pseudo-elements
inside of the blockquote,

49
00:01:40.08 --> 00:01:42.05
and we want to make sure that
those position properties

50
00:01:42.05 --> 00:01:45.03
will position in relation
to the blockquote

51
00:01:45.03 --> 00:01:48.01
instead of going all the
way up to the body tag.

52
00:01:48.01 --> 00:01:49.08
So now with that in place,

53
00:01:49.08 --> 00:01:51.08
let's hit a few returns after blockquote

54
00:01:51.08 --> 00:01:55.00
and let's add our first pseudo-element.

55
00:01:55.00 --> 00:01:57.09
So I'll type in blockquote,

56
00:01:57.09 --> 00:02:02.04
then two semicolons, then the word before,

57
00:02:02.04 --> 00:02:05.05
put in our brackets, and then let's start

58
00:02:05.05 --> 00:02:07.04
by defining the content.

59
00:02:07.04 --> 00:02:10.05
So content: , two tick marks for a string,

60
00:02:10.05 --> 00:02:11.09
then a semicolon.

61
00:02:11.09 --> 00:02:14.02
And inside here, we need to
specify the unicode character

62
00:02:14.02 --> 00:02:15.08
for the beginning quote.

63
00:02:15.08 --> 00:02:17.08
So that'll start with a backslash

64
00:02:17.08 --> 00:02:21.02
and then 201, then the letter c.

65
00:02:21.02 --> 00:02:23.00
And now in the browser, we
can see our beginning quote

66
00:02:23.00 --> 00:02:25.07
showing up at the beginning
of the blockquote.

67
00:02:25.07 --> 00:02:27.05
Let's come back to our CSS.

68
00:02:27.05 --> 00:02:30.04
Next property, let's come
in here and set font size.

69
00:02:30.04 --> 00:02:33.03
We're going to set this to 4.2 ems,

70
00:02:33.03 --> 00:02:35.07
so four times the base font size,

71
00:02:35.07 --> 00:02:36.07
then a Return.

72
00:02:36.07 --> 00:02:38.08
Next we'll set a position property.

73
00:02:38.08 --> 00:02:41.02
We're going to set this to absolute.

74
00:02:41.02 --> 00:02:42.09
And now that this item
is being positioned,

75
00:02:42.09 --> 00:02:45.01
we'll set left and top properties.

76
00:02:45.01 --> 00:02:48.03
So we'll start with left, so left: .

77
00:02:48.03 --> 00:02:52.01
We're going to set this to -46 pixels.

78
00:02:52.01 --> 00:02:53.09
Next line, we're going
to set a top property,

79
00:02:53.09 --> 00:02:57.04
and we're going to set this to 15 pixels.

80
00:02:57.04 --> 00:03:00.02
And then finally, we'll
set the font color.

81
00:03:00.02 --> 00:03:02.03
So we'll use rgba for this,

82
00:03:02.03 --> 00:03:04.02
put in our parentheses.

83
00:03:04.02 --> 00:03:06.02
We're going to set this to
a semi-transparent white,

84
00:03:06.02 --> 00:03:08.04
so we'll put 255 for red,

85
00:03:08.04 --> 00:03:12.07
255 for green, 255 for blue,

86
00:03:12.07 --> 00:03:15.04
and then we'll set the alpha to .4

87
00:03:15.04 --> 00:03:17.06
making it 60% transparent.

88
00:03:17.06 --> 00:03:19.05
So now with our beginning
quotes being added,

89
00:03:19.05 --> 00:03:20.08
let's copy all of this.

90
00:03:20.08 --> 00:03:21.09
Let's paste it down below,

91
00:03:21.09 --> 00:03:23.03
and let's reset the properties

92
00:03:23.03 --> 00:03:25.04
to create our ending quotes.

93
00:03:25.04 --> 00:03:26.06
So the first thing we'll do is set

94
00:03:26.06 --> 00:03:30.03
this pseudo-element to be after.

95
00:03:30.03 --> 00:03:34.04
For the content, we're
going to set this to 201d.

96
00:03:34.04 --> 00:03:37.04
We're going to leave font size at 4.2 ems.

97
00:03:37.04 --> 00:03:39.09
We're going to keep position absolute.

98
00:03:39.09 --> 00:03:43.02
We're going to come in here
and remove the left property.

99
00:03:43.02 --> 00:03:46.08
And then we'll change the
top property to bottom,

100
00:03:46.08 --> 00:03:50.01
and we'll set this to -36 pixels.

101
00:03:50.01 --> 00:03:52.07
And we'll leave the color as is.

102
00:03:52.07 --> 00:03:54.03
So now if you preview this in a browser,

103
00:03:54.03 --> 00:03:57.02
since we haven't set a
left or right property,

104
00:03:57.02 --> 00:03:58.07
the default value is going to be

105
00:03:58.07 --> 00:04:01.07
wherever this element
shows up after the content.

106
00:04:01.07 --> 00:04:04.09
So here it's showing
up after the citation.

107
00:04:04.09 --> 00:04:07.00
So now what we need to do
is set the ending quote

108
00:04:07.00 --> 00:04:08.07
to show up after the quotation

109
00:04:08.07 --> 00:04:10.06
and not after the citation.

110
00:04:10.06 --> 00:04:13.00
So to do that, we need to set
some positioning properties

111
00:04:13.00 --> 00:04:15.00
on the citation so that the quotes

112
00:04:15.00 --> 00:04:16.09
will not pay attention to it.

113
00:04:16.09 --> 00:04:20.00
So to do that, let's
scroll down in our CSS.

114
00:04:20.00 --> 00:04:23.09
Let's find our blockquote
cite for the citation.

115
00:04:23.09 --> 00:04:26.05
After the color, let's hit a return.

116
00:04:26.05 --> 00:04:28.02
And the first thing we'll
do is set a display type

117
00:04:28.02 --> 00:04:30.07
of block so that the
citation will always show up

118
00:04:30.07 --> 00:04:32.06
on its own line.

119
00:04:32.06 --> 00:04:36.09
So I'll type display: , set this to block,

120
00:04:36.09 --> 00:04:38.03
put in semicolon.

121
00:04:38.03 --> 00:04:40.01
And now in our browser, we
can see that the citation

122
00:04:40.01 --> 00:04:43.09
is now on its own line.

123
00:04:43.09 --> 00:04:45.03
Next we'll set a font size.

124
00:04:45.03 --> 00:04:47.04
We want the citation to
be a little bit smaller.

125
00:04:47.04 --> 00:04:49.03
So we're going to set this to .7 ems

126
00:04:49.03 --> 00:04:53.08
which will be 30% smaller
than the blockquote size.

127
00:04:53.08 --> 00:04:56.08
Next we'll set a position
value to this as well.

128
00:04:56.08 --> 00:05:00.00
And we'll set this to absolute.

129
00:05:00.00 --> 00:05:02.01
And then finally, we'll
set a bottom property

130
00:05:02.01 --> 00:05:05.02
of -2.5 ems which will
position the citation

131
00:05:05.02 --> 00:05:07.01
a little further away from the quote.

132
00:05:07.01 --> 00:05:08.03
And all of these rules together

133
00:05:08.03 --> 00:05:09.06
will give us a much more pleasing

134
00:05:09.06 --> 00:05:12.07
and interesting pull
quote for our webpage.

135
00:05:12.07 --> 00:05:14.03
So if you'd like to explore more options

136
00:05:14.03 --> 00:05:16.05
for styling a blockquote,
check out chapter two

137
00:05:16.05 --> 00:05:18.06
of our course on Creating
a Responsive Web Design

138
00:05:18.06 --> 00:05:19.09
here in the library.

139
00:05:19.09 --> 00:05:21.05
Or to dive deeper into more options

140
00:05:21.05 --> 00:05:24.05
for styling a blockquote,
check out our course entitled

141
00:05:24.05 --> 00:05:26.08
Creating a Pull Quote with CSS.

142
00:05:26.08 --> 00:05:28.09
And so with that, I'll
conclude this brief look

143
00:05:28.09 --> 00:05:31.00
at styling a pull quote with CSS.

144
00:05:31.00 --> 00:05:33.09
And as always, thanks for watching.