Challenge Exercise 3: Adding Content Before the Blockquote

Let's add a large quotation mark before the text of our <blockquote> to add some visual interest.

Step1. Add a large quotation mark before the <blockquote> like in the following screenshot:

web render of the desired end-state of the blockquote

To encode a curly-quotation mark, we need to use a character entity within CSS. Just like in HTML, CSS encodes characters using a specific syntax. In HTML, the syntax is "&code;", in CSS, it's "\code". The quotation mark in the previous screenshot is generated with "\201c". To see the characters available in CSS, see UniCode Character Table's full list of characters.

The table on the Unicode website will give you a number that looks like U+201c. Simply replace the "U+" with the "\" and CSS will render the character you have selected.

You could also encode straight quotes by enclosing them in apostrophes rather than in quotation marks in the content property.

NOTE: You may have to use the float property to make the quotation mark move to the left like in the screenshot.

Step2. Save style.css and refresh index.html.