Text layout with CSS and HTML

So we know how to customize the font. What about text layout? CSS can be applied to text in AMP, just like normal HTML. AMP also provides some additional text layout features.

Pull-quotes are quite common in news article content. It's a technique that's used to emphasize an important part of the text. One way to achieve this is by using a simple HTML blockquote tag (/ch3/pullquotes.html):

<blockquote class="pull-quote">
  The whale is a mammiferous animal without hind feet
</blockquote>

Then we'll add a left border to the quote by adding the following CSS:

.pull-quote {
  border:none;
  border-left:6px solid #999;
  font-size:1.5rem;
  padding-left:1rem;
 } 

When viewed in a browser, you should see something like this:

This is nice, but we can do better. Let's add a stylized quotation mark as a visual effect to really make the pull-quote stand out. We can achieve this with CSS, using the before pseudo-selector:

.pull-quote::before {
  content: '\00201C';
  font-size: 8rem;
  font-family: Georgia, serif;
  color: #ff8c00;
  position: absolute;
  left: -0.5rem;
  line-height: 7rem;
  padding-left: 1rem;
}

This CSS will output the value of the content property--in this case, it's \00201c, which is the unicode value for a double quotation symbol--before any element with class pull-quote. The remainder of the CSS just positions and styles the quote symbol.

The result is a nice, professional-looking pull-quote, as shown in the following image (/ch3/pullquotes.html):