1
00:00:01.05 --> 00:00:02.08
- [Instructor] Hi, this is Chris Converse

2
00:00:02.08 --> 00:00:04.07
and in this episode we'll
be creating drop caps

3
00:00:04.07 --> 00:00:07.04
using the first letter selector in CSS,

4
00:00:07.04 --> 00:00:10.03
allowing us to add more
typographic style to our layout

5
00:00:10.03 --> 00:00:13.01
without adding additional
html to the webpage.

6
00:00:13.01 --> 00:00:14.07
And if you'd like to follow along with me,

7
00:00:14.07 --> 00:00:16.06
download the exercise files

8
00:00:16.06 --> 00:00:20.09
and let's begin by opening
index.html in the text editor.

9
00:00:20.09 --> 00:00:22.08
And once you have the html file open.

10
00:00:22.08 --> 00:00:24.01
Inside of the head area,

11
00:00:24.01 --> 00:00:26.08
you'll see we have the link to style.css

12
00:00:26.08 --> 00:00:28.08
which we'll be opening in just a minute.

13
00:00:28.08 --> 00:00:30.03
Inside of the body area

14
00:00:30.03 --> 00:00:32.04
we have a single article element.

15
00:00:32.04 --> 00:00:33.06
And inside the article element

16
00:00:33.06 --> 00:00:35.07
we have two paragraph elements.

17
00:00:35.07 --> 00:00:37.00
So we're going to be creating a CSS rule

18
00:00:37.00 --> 00:00:38.08
that's going to target the first letter,

19
00:00:38.08 --> 00:00:40.02
the letter R here,

20
00:00:40.02 --> 00:00:42.05
in this first paragraph.

21
00:00:42.05 --> 00:00:43.05
And if you'd like to see the layout

22
00:00:43.05 --> 00:00:44.06
we're going to be working with,

23
00:00:44.06 --> 00:00:48.01
you can open index.html
file in a web browser

24
00:00:48.01 --> 00:00:50.07
and at this point let's go
back to the exercise files.

25
00:00:50.07 --> 00:00:52.03
Let's find style.css

26
00:00:52.03 --> 00:00:55.05
and let's open this in our text editor.

27
00:00:55.05 --> 00:00:58.07
Once we have this open I'm going
to scroll down to the bottom.

28
00:00:58.07 --> 00:01:01.02
After the article selector
let's come in here

29
00:01:01.02 --> 00:01:03.06
and now let's target the paragraph element

30
00:01:03.06 --> 00:01:05.09
and the first letter.

31
00:01:05.09 --> 00:01:09.02
So we'll type article space p,

32
00:01:09.02 --> 00:01:11.00
then we're going to hit two colons,

33
00:01:11.00 --> 00:01:14.05
which is the same syntax we
use for a pseudo element.

34
00:01:14.05 --> 00:01:17.02
This is a part of the CSS3 syntax.

35
00:01:17.02 --> 00:01:20.07
Then we'll type first-letter.

36
00:01:20.07 --> 00:01:23.01
Then a space, put in our brackets.

37
00:01:23.01 --> 00:01:24.07
I'll split this open.

38
00:01:24.07 --> 00:01:28.01
And now we can define some
properties for the first letter.

39
00:01:28.01 --> 00:01:31.02
So let's start with font family,

40
00:01:31.02 --> 00:01:34.07
two single tick marks for a string.

41
00:01:34.07 --> 00:01:36.09
Sofia is the name of the font.

42
00:01:36.09 --> 00:01:39.06
Then after the string hit a comma, space,

43
00:01:39.06 --> 00:01:42.03
type in the word cursive,

44
00:01:42.03 --> 00:01:44.02
then a semi-colon.

45
00:01:44.02 --> 00:01:46.07
Next line let's set the font size.

46
00:01:46.07 --> 00:01:49.08
So font-size, we're going
to set this to 4 ems

47
00:01:49.08 --> 00:01:52.08
which will be four times
larger than the base font

48
00:01:52.08 --> 00:01:56.03
which is set to 16 pixels up
here in the body selector.

49
00:01:56.03 --> 00:01:57.01
So with these in place,

50
00:01:57.01 --> 00:01:58.07
let's save our CSS.

51
00:01:58.07 --> 00:01:59.05
If we go back to the browser

52
00:01:59.05 --> 00:02:01.07
we'll see these changes taking effect.

53
00:02:01.07 --> 00:02:03.06
We can see the first letter
of the first paragraph

54
00:02:03.06 --> 00:02:05.00
showing up here,

55
00:02:05.00 --> 00:02:06.05
and we'll also see that the first letter

56
00:02:06.05 --> 00:02:09.00
of the second paragraph is being selected.

57
00:02:09.00 --> 00:02:11.04
Since our CSS rule targeted
the paragraph elements

58
00:02:11.04 --> 00:02:12.08
inside of the article,

59
00:02:12.08 --> 00:02:14.08
both of these are getting selected.

60
00:02:14.08 --> 00:02:16.08
So let's come in here into CSS,

61
00:02:16.08 --> 00:02:19.06
and let's only target the
first paragraph element.

62
00:02:19.06 --> 00:02:22.07
So we're going to get the
cursive before the two colons

63
00:02:22.07 --> 00:02:25.01
and we're going to type a colon

64
00:02:25.01 --> 00:02:29.01
then we'll type first-child.

65
00:02:29.01 --> 00:02:30.08
So we have colon first-child

66
00:02:30.08 --> 00:02:32.06
which will target the
first paragraph element.

67
00:02:32.06 --> 00:02:33.08
And then two colons,

68
00:02:33.08 --> 00:02:35.05
first-letter, which will
target the first letter

69
00:02:35.05 --> 00:02:37.03
of the first paragraph.

70
00:02:37.03 --> 00:02:38.01
And so with these in place,

71
00:02:38.01 --> 00:02:39.02
save your CSS

72
00:02:39.02 --> 00:02:40.05
and go back to the browser.

73
00:02:40.05 --> 00:02:42.01
And now we're only
targeting the first letter

74
00:02:42.01 --> 00:02:44.02
of the first paragraph.

75
00:02:44.02 --> 00:02:45.02
Now it's also worth noting

76
00:02:45.02 --> 00:02:48.04
that you can only select the
first letter of an html element

77
00:02:48.04 --> 00:02:51.00
if its display has block properties.

78
00:02:51.00 --> 00:02:52.05
Since paragraph elements are treated

79
00:02:52.05 --> 00:02:54.01
as block elements by default,

80
00:02:54.01 --> 00:02:55.07
this is why this is working.

81
00:02:55.07 --> 00:02:57.02
So this would not work with a hyperlink

82
00:02:57.02 --> 00:02:58.04
or a span element,

83
00:02:58.04 --> 00:03:02.00
unless, of course, you change
the display type in CSS.

84
00:03:02.00 --> 00:03:03.05
So now let's go back to our CSS file

85
00:03:03.05 --> 00:03:06.06
and let's drop this
cap into the text area.

86
00:03:06.06 --> 00:03:09.02
So inside of our article space p,

87
00:03:09.02 --> 00:03:11.03
let's come in here and add a new property.

88
00:03:11.03 --> 00:03:13.04
We're going to set a float property.

89
00:03:13.04 --> 00:03:15.03
We're going to set this to left,

90
00:03:15.03 --> 00:03:16.09
then a semi-colon.

91
00:03:16.09 --> 00:03:17.07
Then on the next line,

92
00:03:17.07 --> 00:03:19.05
let's set line height.

93
00:03:19.05 --> 00:03:21.08
We're going to set this to .9 ems.

94
00:03:21.08 --> 00:03:25.03
Just a little bit smaller
than the base font size.

95
00:03:25.03 --> 00:03:28.02
Then next we'll come in
and add a padding property.

96
00:03:28.02 --> 00:03:30.04
And we'll set this to zero on the top,

97
00:03:30.04 --> 00:03:32.00
20 pixels on the right,

98
00:03:32.00 --> 00:03:32.08
zero on the bottom

99
00:03:32.08 --> 00:03:34.06
and zero on the left.

100
00:03:34.06 --> 00:03:35.04
So with these in place,

101
00:03:35.04 --> 00:03:36.07
save your CSS,

102
00:03:36.07 --> 00:03:37.09
go back to the browser,

103
00:03:37.09 --> 00:03:39.03
and we'll now see that that first letter

104
00:03:39.03 --> 00:03:42.04
is now dropping down into the text area.

105
00:03:42.04 --> 00:03:44.03
So now that our drop cap is working,

106
00:03:44.03 --> 00:03:45.07
I'd like to add some
additional properties here

107
00:03:45.07 --> 00:03:47.08
to create an overlap effect.

108
00:03:47.08 --> 00:03:48.07
So to achieve this,

109
00:03:48.07 --> 00:03:50.00
let's go back to our CSS file

110
00:03:50.00 --> 00:03:52.06
and let's make a few additional changes.

111
00:03:52.06 --> 00:03:54.04
So let's come in here to font size

112
00:03:54.04 --> 00:03:58.04
and let's change font
size from 4ems to 8ems.

113
00:03:58.04 --> 00:04:01.02
That's going to make that much larger.

114
00:04:01.02 --> 00:04:03.00
Next let's come down to line height.

115
00:04:03.00 --> 00:04:05.07
Let's change the line height to .1.

116
00:04:05.07 --> 00:04:08.07
So just 10% of the base font size.

117
00:04:08.07 --> 00:04:12.02
Let's come in here and
change the padding to zero.

118
00:04:12.02 --> 00:04:13.02
Now on the next line,

119
00:04:13.02 --> 00:04:15.06
let's add a color property.

120
00:04:15.06 --> 00:04:16.09
Since we're going to
be overlapping the text

121
00:04:16.09 --> 00:04:18.04
I want the color of the drop cap

122
00:04:18.04 --> 00:04:20.06
to be a little less opaque.

123
00:04:20.06 --> 00:04:23.01
So for the color space we use RGBA,

124
00:04:23.01 --> 00:04:24.06
put in our parentheses,

125
00:04:24.06 --> 00:04:27.08
inside of the parentheses
we'll set 255 for red,

126
00:04:27.08 --> 00:04:31.03
211 for green and 141 for blue.

127
00:04:31.03 --> 00:04:33.08
And then .5 for the alpha.

128
00:04:33.08 --> 00:04:34.09
And then finally on the next line,

129
00:04:34.09 --> 00:04:37.04
let's come in and set
some margin properties.

130
00:04:37.04 --> 00:04:40.04
So for the margin we're
going to set zero on the top,

131
00:04:40.04 --> 00:04:43.00
we're going to set negative
11 pixels on the left,

132
00:04:43.00 --> 00:04:44.06
that will move the
letters on the first line

133
00:04:44.06 --> 00:04:47.03
a little bit closer to the drop cap.

134
00:04:47.03 --> 00:04:48.02
Then for the bottom property

135
00:04:48.02 --> 00:04:49.04
we're going to set zero

136
00:04:49.04 --> 00:04:50.07
and for the left property
we're going to set

137
00:04:50.07 --> 00:04:52.08
negative 23 pixels,

138
00:04:52.08 --> 00:04:54.09
which will move the drop
cap a little bit to the left

139
00:04:54.09 --> 00:04:57.00
into the margin area.

140
00:04:57.00 --> 00:04:58.07
So with these in place let's hit save,

141
00:04:58.07 --> 00:04:59.06
go back to the browser

142
00:04:59.06 --> 00:05:01.02
and hit reload again.

143
00:05:01.02 --> 00:05:03.04
And now we'll see that the
drop cap is much larger,

144
00:05:03.04 --> 00:05:05.03
the text is overlapping the drop cap

145
00:05:05.03 --> 00:05:07.00
and the drop cap is
sitting off to the left

146
00:05:07.00 --> 00:05:08.08
into the margin area.

147
00:05:08.08 --> 00:05:10.07
So this gives us a really
nice layered effect

148
00:05:10.07 --> 00:05:13.03
and it works in all modern browsers,

149
00:05:13.03 --> 00:05:15.00
except for Firefox.

150
00:05:15.00 --> 00:05:16.02
At the time of this recording,

151
00:05:16.02 --> 00:05:17.09
Firefox does not allow the text to flow

152
00:05:17.09 --> 00:05:19.03
over the first letter,

153
00:05:19.03 --> 00:05:22.00
even when we set the line
height to such a small amount.

154
00:05:22.00 --> 00:05:24.04
So we'll still get the
drop cap effect in Firefox,

155
00:05:24.04 --> 00:05:26.09
we just won't get the text overlap.

156
00:05:26.09 --> 00:05:28.01
So with a single CSS rule,

157
00:05:28.01 --> 00:05:29.03
and a few properties,

158
00:05:29.03 --> 00:05:30.09
we were able to transform the first letter

159
00:05:30.09 --> 00:05:32.06
of our paragraph into a drop cap,

160
00:05:32.06 --> 00:05:36.00
without adding any
additional html to our page.

161
00:05:36.00 --> 00:05:36.08
And so with that,

162
00:05:36.08 --> 00:05:38.00
I'll conclude this episode

163
00:05:38.00 --> 00:05:40.09
and as always, thanks for watching.