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

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

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.

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.

Featured quote section on demonstration website

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.

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:

styles.css

. . .

/* 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;
}

Copy

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 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 contentpaddingborders, 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.

css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size.