Stylized Quotation Marks

Introduction

In this lab, we will explore the quotes property in CSS, which allows us to customize the quotation marks used for inline quotes. We will learn how to use this property to define our own opening and closing quote characters, and apply them to <q> elements in our HTML. By the end of this lab, you will have a better understanding of how to add a personal touch to the styling of your web pages.

Skills Graph

Stylized Quotation Marks

index.html and style.css have already been provided in the VM.

To customize the inline quotation marks, modify the quotes property within a <q> element.

For example:

<p><q>Do or do not, there is no try.</q> – Yoda</p>

can be styled with curly quotes using CSS:

q {
  quotes: "“" "”";
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Stylized Quotation Marks lab. You can practice more labs in LabEx to improve your skills.