Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Selectors Advanced Selectors Pseudo-Elements - ::first-line and ::first-letter

Tom Hackett
Tom Hackett
16,988 Points
Posted by Tom Hackett
Tom Hackett
16,988 Points

Problem styling first letter, can anyone see what I'm doing wrong?

Styling of my drop cap isn't looking the same as in the video...

http://imgur.com/6b7TZh7

7 Answers

Justin Iezzi
Justin Iezzi
18,199 Points

Hey Tom, you have a typo on your font-size property. See here - 

.intro:first-letter {
  float: left;
  font-size 80px;
  color: white;
  padding: 5px 10px;
  background: #384047;
  margin: 10px 10px 0 0;
  border-radius: 5px;
  line-height: 1;
}

Your font-size property has a missing colon*. Fix that and it should look like it does in the video.

Colton Ehrman
PLUS
Colton Ehrman
Courses Plus Student 5,859 Points
Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

Ohhh! You forgot a colon! ":" lol

Colton Ehrman
PLUS
Colton Ehrman
Courses Plus Student 5,859 Points
Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

How are we suppose to see what you did wrong when we can't see anything? :/

Tom Hackett
Tom Hackett
16,988 Points
Tom Hackett
Tom Hackett
16,988 Points

I tried attaching a screenshot but the method didn't work, what is the best way?

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

You need to upload your screenshot to an image hosting website like http://postimage.org/. Then post the link for your uploaded image.

Justin Iezzi
Justin Iezzi
18,199 Points

You can paste your code directly into your post, so you can edit your original post and add your code. Check out the "markdown cheatsheet" reference when posting code, otherwise the format will be very hard to read.

Otherwise visual differences can be the browser interpretation of the code as well.

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

Weird. Is it possible that you could post a link to the actual document? With the lorem paragraph

Colton Ehrman
PLUS
Colton Ehrman
Courses Plus Student 5,859 Points
Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

You need to take a snapshot of your workspace and then send that link

Colton Ehrman
PLUS
Colton Ehrman
Courses Plus Student 5,859 Points
Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

For some reason your font-size property is not being added. Make sure to save your css file and do a hard refresh