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
robinbehroozi
15,912 PointsHow to get big quotes...
So, in my html, I created some quotes using “ to get the opening quotes and ” to get the closing quotes. I put them, and the whole paragraph into a div with a class name of quotes. Then in css, I used a negative value in text-indent to make the quotes stick out. Anyway, I was just wondering, how would I make the quotes big? I want to make the quotes huge like in the examples, and I'd also like to change their colour. Can anyone help me with this?
5 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Robin,
In order to style your quotes separately from your paragraph text you would have to either wrap them in another element like a <span> so they can be targeted separately for styling or generate your quotes using the :before and :after pseudo elements.
So something like this: (Also, I would consider using a more semantic element like <blockquote> depending on what types of quotes these are rather than a generic div.)
<blockquote>
<span>“</span>
The quote goes here.
<span>”</span>
</blockquote>
To keep your markup cleaner, and this is probably the more preferred way today, is to use the pseudo elements to generate the quotes and then you style the generated content how you want.
So your html would be:
<blockquote>
The quote goes here.
</blockquote>
Notice no extra span tags and no quotes either. This keeps the markup clean.
Here's an example showing the css you would use to generate and style the opening quote with the :before pseudo element:
http://stackoverflow.com/questions/16325687/make-big-quotes-with-blockquote
Kenneth Love
Treehouse Guest TeacherIncreasing the font-size of the div should increase the size of the quote marks. Something like:
.quotes {
font-size: 5em;
}
Dave Evans
13,160 PointsHere is a good reference by Chris Coyier
robinbehroozi
15,912 PointsHi Kenneth.
Thanks for your answer. The problem I have is that I don't want all the text in the div to be 5 em, I just want the block quotes to be that size, and the text to be 1em or so.
Kenneth Love
Treehouse Guest TeacherCall the quotes out with their own spans or something.
<span class="big-quote">&lquot;</span>
.big-quote {
font-size: 5em;
}
robinbehroozi
15,912 PointsAwesome…thank you.