- [Instructor] Hi, this is Chris Converse
and in this episode we'll be creating drop caps
using the first letter selector in CSS,
allowing us to add more typographic style to our layout
without adding additional html to the webpage.
And if you'd like to follow along with me,
download the exercise files
and let's begin by opening index.html in the text editor.
And once you have the html file open.
Inside of the head area,
you'll see we have the link to style.css
which we'll be opening in just a minute.
Inside of the body area
we have a single article element.
And inside the article element
we have two paragraph elements.
So we're going to be creating a CSS rule
that's going to target the first letter,
the letter R here,
in this first paragraph.
And if you'd like to see the layout
we're going to be working with,
you can open index.html file in a web browser
and at this point let's go back to the exercise files.
Let's find style.css
and let's open this in our text editor.
Once we have this open I'm going to scroll down to the bottom.
After the article selector let's come in here
and now let's target the paragraph element
and the first letter.
So we'll type article space p,
then we're going to hit two colons,
which is the same syntax we use for a pseudo element.
This is a part of the CSS3 syntax.
Then we'll type first-letter.
Then a space, put in our brackets.
I'll split this open.
And now we can define some properties for the first letter.
So let's start with font family,
two single tick marks for a string.
Sofia is the name of the font.
Then after the string hit a comma, space,
type in the word cursive,
then a semi-colon.
Next line let's set the font size.
So font-size, we're going to set this to 4 ems
which will be four times larger than the base font
which is set to 16 pixels up here in the body selector.
So with these in place,
let's save our CSS.
If we go back to the browser
we'll see these changes taking effect.
We can see the first letter of the first paragraph
showing up here,
and we'll also see that the first letter
of the second paragraph is being selected.
Since our CSS rule targeted the paragraph elements
inside of the article,
both of these are getting selected.
So let's come in here into CSS,
and let's only target the first paragraph element.
So we're going to get the cursive before the two colons
and we're going to type a colon
then we'll type first-child.
So we have colon first-child
which will target the first paragraph element.
And then two colons,
first-letter, which will target the first letter
of the first paragraph.
And so with these in place,
save your CSS
and go back to the browser.
And now we're only targeting the first letter
of the first paragraph.
Now it's also worth noting
that you can only select the first letter of an html element
if its display has block properties.
Since paragraph elements are treated
as block elements by default,
this is why this is working.
So this would not work with a hyperlink
or a span element,
unless, of course, you change the display type in CSS.
So now let's go back to our CSS file
and let's drop this cap into the text area.
So inside of our article space p,
let's come in here and add a new property.
We're going to set a float property.
We're going to set this to left,
then a semi-colon.
Then on the next line,
let's set line height.
We're going to set this to .9 ems.
Just a little bit smaller than the base font size.
Then next we'll come in and add a padding property.
And we'll set this to zero on the top,
20 pixels on the right,
zero on the bottom
and zero on the left.
So with these in place,
save your CSS,
go back to the browser,
and we'll now see that that first letter
is now dropping down into the text area.
So now that our drop cap is working,
I'd like to add some additional properties here
to create an overlap effect.
So to achieve this,
let's go back to our CSS file
and let's make a few additional changes.
So let's come in here to font size
and let's change font size from 4ems to 8ems.
That's going to make that much larger.
Next let's come down to line height.
Let's change the line height to .1.
So just 10% of the base font size.
Let's come in here and change the padding to zero.
Now on the next line,
let's add a color property.
Since we're going to be overlapping the text
I want the color of the drop cap
to be a little less opaque.
So for the color space we use RGBA,
put in our parentheses,
inside of the parentheses we'll set 255 for red,
211 for green and 141 for blue.
And then .5 for the alpha.
And then finally on the next line,
let's come in and set some margin properties.
So for the margin we're going to set zero on the top,
we're going to set negative 11 pixels on the left,
that will move the letters on the first line
a little bit closer to the drop cap.
Then for the bottom property
we're going to set zero
and for the left property we're going to set
negative 23 pixels,
which will move the drop cap a little bit to the left
into the margin area.
So with these in place let's hit save,
go back to the browser
and hit reload again.
And now we'll see that the drop cap is much larger,
the text is overlapping the drop cap
and the drop cap is sitting off to the left
into the margin area.
So this gives us a really nice layered effect
and it works in all modern browsers,
except for Firefox.
At the time of this recording,
Firefox does not allow the text to flow
over the first letter,
even when we set the line height to such a small amount.
So we'll still get the drop cap effect in Firefox,
we just won't get the text overlap.
So with a single CSS rule,
and a few properties,
we were able to transform the first letter
of our paragraph into a drop cap,
without adding any additional html to our page.
And so with that,
I'll conclude this episode
and as always, thanks for watching.