This is the fifth part of some posts on using CSS in and with DT/DTTG. Though I wrote it as a single piece, I broke it up in smaller installments to keep the posts (barely) managable. Please let me know (preferably by a PM) if you find errors of any kind or are missing details. I’ll correct the first ones and try to help with the second ones.
Previous post | Next post
Styling block quotes
You’ve already seen a short example that made quotes stand out from the regular text. A bit more advanced is this:
blockquote {
margin-left: 2em;
border-left: 1px red solid;
background-color: lightgrey;
}
Now, if you look at that in the rendered view, you might think that it leaves room for improvement. And it certainly does: first, the background color starts at the left side of the block, but the text begins 2ems to the right of that. It would be nicer if only the text would have a different background color, not the whole block including the margin.
Then the first line of text is indented by 1em. That happens because it is contained in a p element, and all p elements are indented. But we don’t want that for those paragraphs inside a blockquote:
blockquote > p {
text-indent:0
}
Here, blockquote > p selects only those paragraphs that are immediate children of a blockquote element, and text-indent: 0 resets the indentation of their first line so they’re flush left. Now you can use the same selector to change the background: Remove the setting for background-color from the blockquote style and add it to the style for the blockquote’s paragraph children like this
margin-left: 1em;
background-color: lightgrey;
That gives you a white margin of 1em between the red vertical bar at the left and the grey background of the blockquote.
