FAQ Section HTML CSS #3

This FAQ section HTML CSS tutorial shows you how to build a clean three-column FAQ layout with a number, question, and answer sitting side by side in each row. The section uses a serif heading font for contrast against the sans-serif body text, and a short decorative line under the heading adds a subtle editorial touch. On mobile, the columns stack naturally so it stays readable on any screen size.

Final output:

Steps for Responsive FAQ Section HTML CSS #3

1. First link your fonts in the head if necessary. I am using the Inter and Playfair Display fonts from Google Fonts.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
    rel="stylesheet">

Now let’s start with a section element with the class section-faq. Inside it, add a .faq-wrapper div with a .faq-header and a .faq-body div.

<section class="section-faq">
    <div class="faq-wrapper">
        <div class="faq-header"></div>
        <div class="faq-body"></div>
    </div>
</section>

Then reset margins, set Inter as the font family, and define two CSS variables on :root for the heading font and the dark text color so you can reuse them throughout. Give the section a warm off-white background and use clamp() on the padding so it scales with the screen size.

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "Inter", sans-serif;
}
:root {
    --heading-font: "Playfair Display", serif;
    --text-dark: hsl(60, 3%, 6%);
}
.section-faq {
    background-color: hsl(60, 17%, 98%);
    padding: clamp(4rem, calc(4vw + 1rem), 8rem) 5%;
}

Center the .faq-wrapper with the margin inline property set to auto and a max-width. On desktop, add some inline padding so the content doesn’t sit right at the edge.

.section-faq .faq-wrapper {
    max-width: 64rem;
    margin-inline: auto;
}
@media screen and (min-width: 992px) {
    .section-faq .faq-wrapper {
        padding-inline: 2rem;
    }
}

2. Add a label span and a heading to the .faq-header.

<div class="faq-header">
    <span>Questions & Answers</span>
    <h2>F.A.Q.</h2>
</div>

Style the label with a small uppercase font in a muted color. Then style the heading with the Playfair Display font and use clamp() on the font size so it scales smoothly between screen sizes.

Set the position property to relative on the heading so the short decorative line below it can be placed using a ::after pseudo-element. Set the position property to absolute on the line, set the bottom property to 0, and give it a fixed width so it reads as a subtle accent rather than a full-width border.

.section-faq .faq-header span {
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 2.02px;
    text-transform: uppercase;
    color: hsl(60, 6%, 58%);
}
.section-faq .faq-header h2 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(2.5rem, calc(0.6875rem + 5vw), 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.56px;
    color: var(--text-dark);
    margin-top: .75rem;
    padding-bottom: 1.5rem;
    position: relative;
}
.section-faq .faq-header h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background-color: var(--text-dark);
}

Output:

3. Fill in .faq-body with the FAQ items. Each .faq-item has a number span, a question heading, and an answer paragraph.

<div class="faq-body">
    <div class="faq-item">
        <span>01</span>
        <h3>Can I use this FAQ section on any type of website?</h3>
        <p>Yes, this FAQ section works on any HTML, CSS, and JavaScript setup...</p>
    </div>
    <!-- add more items -->
</div>

Add a top margin to .faq-body to space it away from the header. Then style each .faq-item with a three-column grid so the number, question, and answer sit side by side.

Add a top border on each item and a bottom border on the last one using :last-child to create clean dividers between them. On mobile, switch to flexbox with flex-wrap set to wrap so the columns stack naturally.

.section-faq .faq-body {
    margin-top: 4rem;
}
.section-faq .faq-item {
    display: grid;
    grid-template-columns: 2rem 2fr 4fr;
    gap: 2.5rem;
    padding-block: 2.25rem;
    border-top: 1px solid hsl(60, 9%, 87%);
}
.section-faq .faq-item:last-child {
    border-bottom: 1px solid hsl(60, 9%, 87%);
}
@media screen and (max-width: 768px) {
    .section-faq .faq-item {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
    }
}

Output:

4. Style the number span with the Playfair Display font in italic and a muted color since it’s decorative rather than informational. Hide it on very small screens since it takes up unnecessary space when everything is stacked.

.section-faq .faq-item span {
    font-family: var(--heading-font);
    font-weight: 700;
    font-style: italic;
    font-size: .875rem;
    line-height: 1.5;
    color: hsl(60, 6%, 58%);
}
@media screen and (max-width: 576px) {
    .section-faq .faq-item span {
        display: none;
    }
}

Style the question heading with a semi-bold weight and a slightly negative letter spacing to make it feel tight and intentional. Set the flex property to 1 on it so it takes up all the remaining space when the layout switches to flexbox on mobile.

.section-faq .faq-item h3 {
    flex: 1;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.16px;
    color: var(--text-dark);
}

Style the answer paragraph with a smaller font size and a muted color so it reads as secondary to the question. On tablet screens, add a left margin to align it with the question heading above it, since the number span is hidden at that point.

.section-faq .faq-item p {
    font-size: .875rem;
    line-height: 1.5;
    color: hsl(60, 5%, 34%);
}
@media screen and (max-width: 768px) and (min-width: 577px) {
    .section-faq .faq-item p {
        margin-left: 2.5rem;
    }
}

Output:

Final Output Code for Responsive FAQ Section HTML CSS #3:

Head

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
    rel="stylesheet">

HTML

<section class="section-faq">
    <div class="faq-wrapper">
        <div class="faq-header">
            <span>Questions & Answers</span>
            <h2>F.A.Q.</h2>
        </div>
        <div class="faq-body">
            <div class="faq-item">
                <span>01</span>
                <h3>Can I use this FAQ section on any type of website?</h3>
                <p>Yes, this FAQ section works on any HTML, CSS, and JavaScript setup. I built it to be
                    framework-free, so you can drop it into a static site, a WordPress theme, or a React project
                    without extra dependencies.</p>
            </div>
            <div class="faq-item">
                <span>02</span>
                <h3>Is the HTML CSS FAQ code beginner-friendly?</h3>
                <p>I kept this FAQ component as simple as possible on purpose. The structure uses plain, semantic
                    HTML for the layout, so you're not relying on a heavy JavaScript library just to get things
                    working.</p>
            </div>
            <div class="faq-item">
                <span>03</span>
                <h3>Will this responsive FAQ design work well on mobile?</h3>
                <p>Yes, I designed this FAQ section to be fully responsive from the start. The question and answer
                    columns stack on smaller screens, so it stays readable without cramming everything into a tiny
                    space.</p>
            </div>
            <div class="faq-item">
                <span>04</span>
                <h3>Can I customize the FAQ section to match my site?</h3>
                <p>Definitely. Everything in this FAQ component is controlled through CSS variables at the top of
                    the stylesheet, so you can update the color palette and fonts in one place instead of hunting
                    through the whole file.</p>
            </div>
            <div class="faq-item">
                <span>05</span>
                <h3>Can I add more questions to this FAQ section?</h3>
                <p>Yes, just copy one of the existing items and update the number, question, and answer. This FAQ
                    component's layout adjusts automatically, so you don't need to touch the surrounding CSS.</p>
            </div>
            <div class="faq-item">
                <span>06</span>
                <h3>Do I need JavaScript for this FAQ section?</h3>
                <p>No, this FAQ component is pure HTML and CSS. There's no JavaScript involved at all, so you can
                    copy this static FAQ section straight into any project without worrying about extra scripts or
                    dependencies.</p>
            </div>
        </div>
    </div>
</section>

CSS

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "Inter", sans-serif;
}
:root {
    --heading-font: "Playfair Display", serif;
    --text-dark: hsl(60, 3%, 6%);
}
.section-faq {
    background-color: hsl(60, 17%, 98%);
    padding: clamp(4rem, calc(4vw + 1rem), 8rem) 5%;
}
.section-faq .faq-wrapper {
    max-width: 64rem;
    margin-inline: auto;
}
@media screen and (min-width: 992px) {
    .section-faq .faq-wrapper {
        padding-inline: 2rem;
    }
}
.section-faq .faq-header span {
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 2.02px;
    text-transform: uppercase;
    color: hsl(60, 6%, 58%);
}
.section-faq .faq-header h2 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(2.5rem, calc(0.6875rem + 5vw), 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.56px;
    color: var(--text-dark);
    margin-top: .75rem;
    padding-bottom: 1.5rem;
    position: relative;
}
.section-faq .faq-header h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background-color: var(--text-dark);
}
.section-faq .faq-body {
    margin-top: 4rem;
}
.section-faq .faq-item {
    display: grid;
    grid-template-columns: 2rem 2fr 4fr;
    gap: 2.5rem;
    padding-block: 2.25rem;
    border-top: 1px solid hsl(60, 9%, 87%);
}
.section-faq .faq-item:last-child {
    border-bottom: 1px solid hsl(60, 9%, 87%);
}
@media screen and (max-width: 768px) {
    .section-faq .faq-item {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
    }
}
.section-faq .faq-item span {
    font-family: var(--heading-font);
    font-weight: 700;
    font-style: italic;
    font-size: .875rem;
    line-height: 1.5;
    color: hsl(60, 6%, 58%);
}
@media screen and (max-width: 576px) {
    .section-faq .faq-item span {
        display: none;
    }
}
.section-faq .faq-item h3 {
    flex: 1;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.16px;
    color: var(--text-dark);
}
.section-faq .faq-item p {
    font-size: .875rem;
    line-height: 1.5;
    color: hsl(60, 5%, 34%);
}
@media screen and (max-width: 768px) and (min-width: 577px) {
    .section-faq .faq-item p {
        margin-left: 2.5rem;
    }
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.