How to add a Q&A Block in Website using HTML & CSS

 Let’s check how you can add a Question and answer block using HTML & CSS only. Just follow the steps as shown below. 

So, If you want to add a stylish Question and answer block or definition block then you need to use a custom HTML code given below.  You can also use this to showcase FAQs on your website.

You can use it on any website whether it is on Blogger, Wordpress, or any other CMS platform.

This is a sample code of a Q&A block where we added two paragraph wrap inside a div section and some inline styling on the HTML code.

 <div style="border: 2px solid lightgrey; padding: 15px; border-radius: 7px;" >
<h2 style="border-bottom: 2px solid lightgrey; padding: 0px 0px 7px; margin-bottom: 10px; margin-top:0px">What is Affiliate Marketing?</h2>
<p>Affiliate marketing is the process of earning money (commissions) every time you promote a company’s products or services and drive a sale. You only get paid every time you drive a sale, just like a commission-only sales representative.</p>
</div>  

Here, you can adjust the padding, margin, and font size of the element depending on your website.

And if you want to use this code in multiple blog posts and don’t want to add styling all the time, you can use the CSS class option. 

Here is how it works. 

First, let’s assign a class to this code. 

 <div class="QNA_box" >
  <h2>Question 1 Here </h2>
  <p>Write the Answer to the question 1 here.</p>
</div>

<br>

<div class="QNA_box" >
  <h2>Question 2 Here </h2>
  <p>Write the Answer to the question 2 here.</p>
</div> 

Here we have added two blocks with a <br> tag to add a line break between the two sections.

Now we need to add the CSS code for this to apply the styling.

.QNA_box{
    border: 2px solid lightgrey; padding: 15px; border-radius: 7px;
  }
  .QNA_box h2 {
    border-bottom: 2px solid lightgrey; margin-bottom: 10px; margin-top:0px; padding-bottom: 7px;
  }

Here, note that you need to use the CSS code in the CSS section of your theme. If you are using Blogger then you can paste it before the ]]></b:skin> tag. And for Wordpress users you can use the additional css section in the theme customizer.

I recommend you watch the video properly to know how to use the code on your website.

If you have any doubts, you can ask me in the video comment section or in our telegram Group.

For more Tutorials like this, You can follow our YouTube channel and follow us on Twitter for updates.

Read Also: How to Embed a Youtube Playlist in Blogger & WordPress Website.