How To Create a Featured Quote Box On Your Website Using CSS (Section 6)

Introduction

In this tutorial, you will add a featured quote to your website using CSS as displayed in the sixth section of the demonstration website. You might use this section to feature a favorite quote, a testimony about your work, or a message to your site visitors. You can also hyperlink this quote to another webpage if you wish. The methods you use here can be applied to other CSS/HTML website projects.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Creating Style Rules For the Featured Quote Section

To create the featured quote section, you will create a class to style the container and a class to style the featured text. In your styles.css file, add the following code snippets:

. . .

/* Section 6: Featured Quote  */

.column-quote {
  width: 90%;
  height: 475px;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:100px;
  margin:auto;
  margin-bottom:150px;
  border: 20px solid #FEDE00;
}

.quote {
  font-size:80px;
  font-weight:bold;
  line-height: 1;
  text-align: center;
}

In this code snippet, you have added the CSS comment /* Section 6: Featured Quote */ to label this section of the CSS code. Then, you have defined the class column-quote, which you will use to style the quote box, and specified the size, padding, margins, and border of the container.

Note that the margin is set to auto, which horizontally centers the container in the middle of the page. In addition, the bottom margin is set to 200 pixels to give some space to the bottom of the page. If you want to learn more about the other declarations, please review the previous sections in this tutorial series on setting the sizes of content, padding, borders, and margins.

You have also created the quote class, which you will use to style the text of the featured quote. Note that you have set the line-height property to 1, which shrinks the space between text lines from the default setting of 1.6. Experiment with changing this value to determine what line spacing you prefer.

Save the styles.css file.

Adding the Featured Quote Section

Return to the index.html file. After the last closing </div> tag, add the following code snippet:

. . .

<!--Section 6: Featured Quote-->

<div class="section-break"> </div>
<div class="column-quote">
  <p class="quote">There are many fish in the sea, but only one Sammy!</p>
</div>

Before moving on, let’s pause to examine each line of code:

• The HTML comment <!--Section 6: Featured Quote--> labels this section of code in the index.html file and will not be displayed by the browser.
• The <div class="section-break"> </div> element creates a section break using a class you may have defined in a previous tutorial. If you did not follow that tutorial, you can add that class by adding the CSS rule .section-break {margin:50px; height:500px;} to your styles.css file. This element creates space between the content in the previous section and the featured quote section.
• The <div class="column-quote"> tag and its closing </div> tag create a container for the featured quote with the style rules you declared for the column-quote class in your styles.css file.
• The <p class="quote">There are many fish in the sea, but only one Sammy! </p> inserts the text content into the <div> container you opened in the line above and styles it according to the rules you declared for the quote class selector in your styles.css file. If you change the length of your text content, you may want to modify one of the classes in this section to change the size of the font or the size of the container to make sure the text still fits.

Save the index.html file and reload it in your browser. Your webpage should now display a large featured quote in a transparent container with a solid background:

Conclusion

In this tutorial, you created a featured text box on your website and modified its style for different website layouts. If you wish to hyperlink your quote to a new website page, please visit our tutorial How To Create and Link To Additional Website Pages With HTML.

In the next and final tutorial of the tutorial series, you will create a static footer, which “sticks” in a fixed position at the bottom of the viewport as the visitor scrolls down the page.