Chapter 6 — Style the Template With CSS and Make It Responsive

Introduction

The HTML structure created in the previous chapter gives your website its foundation. Now it is time to transform that structure into a polished visual experience.

This is where CSS, or Cascading Style Sheets, becomes the main tool.

HTML tells the browser what the content means. CSS tells the browser how that content should look and behave visually.

With CSS, you can control:

• Colors.
• Typography.
• Spacing.
• Widths.
• Heights.
• Backgrounds.
• Borders.
• Shadows.
• Grid layouts.
• Flexbox layouts.
• Responsive behavior.
• Hover effects.
• Transitions.
• Visibility.
• Positioning.

For a commercial weight-loss template, CSS should do more than make the page attractive. It should make the template consistent, responsive, customizable and easy to maintain.

A good CSS architecture allows a buyer to change the visual identity of the template without rewriting the entire website.

6.1 Start With the Global CSS Foundation

Before styling individual sections, establish your global rules.

A basic foundation might look like:

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--text);
    background: var(--background);
    line-height: 1.7;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

These rules create predictable behavior across the site.

The box-sizing rule is especially useful because width calculations become easier to understand.

6.2 Define Your Design Tokens

Use the design decisions from Chapter 3.

For example:

:root {
    --primary: #6b8e68;
    --secondary: #355c4d;
    --background: #f8f6ef;
    --surface: #ffffff;
    --text: #26332d;
    --muted: #66736d;
    --accent: #e9a45c;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --shadow-sm: 0 4px 16px rgba(0,0,0,.06);
    --shadow-md: 0 12px 30px rgba(0,0,0,.08);

    --container: 1180px;
}

This creates a central control panel for your design.

If you later want a blue version instead of a green version, you can change the variables.

That is extremely useful when selling templates.

6.3 Style the Main Container

Your container controls the horizontal alignment of the website.

.container {
    width: min(92%, var(--container));
    margin-inline: auto;
}

This means the content will occupy a maximum width while still maintaining space around the edges on smaller screens.

You can use this same class for:

• Header.
• Hero.
• Articles.
• Programs.
• Resources.
• Footer.

Consistent alignment creates a professional appearance.

6.4 Create a Section Spacing System

Major sections need enough space between them.

A useful approach is:

.section {
    padding-block: var(--space-7);
}

Then a smaller section can use:

.section-small {
    padding-block: var(--space-6);
}

You do not need to create a different spacing rule for every section.

Reusable spacing classes make the design easier to maintain.

6.5 Style the Header

The header can use Flexbox.

.site-header {
    position: relative;
    background: var(--surface);
    border-bottom: 1px solid rgba(0,0,0,.08);
    z-index: 100;
}

.site-header .container {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

This keeps the logo, navigation and CTA aligned.

6.6 Style the Logo

.logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--secondary);
}

If you are selling the template, the logo should be easy to replace.

You can use:

• Text logo.
• SVG logo.
• Image logo.

A flexible template should support all three.

6.7 Style the Navigation

.main-navigation {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-navigation a {
    text-decoration: none;
    font-weight: 600;
    color: var(--text);
    transition: color .2s ease;
}

.main-navigation a:hover {
    color: var(--primary);
}

Keep the navigation visually quiet.

The main CTA can provide the stronger visual emphasis.

6.8 Create a Visible Focus State

Keyboard users need to see which element is currently focused.

For example:

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

Do not remove browser focus indicators without providing a suitable replacement.

Accessibility is part of professional frontend development.

6.9 Style the Hero

The hero should feel important without becoming overwhelming.

.hero {
    background: var(--background);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-7);
    padding-block: 90px;
}

The content area can use a maximum width:

.hero-content {
    max-width: 650px;
}

This prevents extremely long lines.

6.10 Style the Eyebrow

The small label above a heading can create visual hierarchy.

.eyebrow {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
}

Use this element consistently.

It can appear above:

• Hero headings.
• Section headings.
• Resource titles.
• CTA headings.

6.11 Style the Hero Heading

.hero h1 {
    max-width: 720px;
    margin-bottom: var(--space-3);
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

The clamp() function allows the heading to adapt to different screen sizes.

This is preferable to using one huge fixed font size.

6.12 Style the Hero Paragraph

.hero p {
    max-width: 600px;
    margin-bottom: var(--space-4);
    font-size: 1.1rem;
    color: var(--muted);
}

The paragraph should support the headline rather than compete with it.

6.13 Style Hero Buttons

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

Using flex-wrap allows buttons to move to another line when the available width becomes smaller.

This is a simple example of responsive behavior.

6.14 Style the Hero Image

.hero-media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

The aspect-ratio property gives the image a predictable shape.

This helps prevent uneven layouts when buyers replace the demonstration image.

6.15 Create Section Heading Styles

.section-heading {
    max-width: 700px;
    margin-bottom: var(--space-5);
}

.section-heading h2 {
    margin-bottom: var(--space-2);
}

.section-heading p {
    color: var(--muted);
}

You can create a centered version:

.section-heading.center {
    margin-inline: auto;
    text-align: center;
}

This gives you another reusable variation.

6.16 Build a Three-Column Grid

For feature cards:

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

This is much cleaner than manually setting widths on every card.

6.17 Style Feature Cards

.feature-card {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.feature-card h3 {
    margin-bottom: var(--space-2);
}

.feature-card p {
    color: var(--muted);
}

The card should have enough internal space.

Do not compress text against the edges.

6.18 Add Subtle Hover Effects

A simple card interaction can be:

.feature-card {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

Subtle movement can make the interface feel responsive.

Avoid excessive animations.

A health and wellness template should generally feel calm and easy to use.

6.19 Style Article Cards

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.article-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: var(--radius-md);
}

Then style the image:

.article-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

And the content:

.article-card-content {
    padding: var(--space-4);
}

6.20 Style Categories

.category {
    display: inline-block;
    margin-bottom: 10px;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary);
}

Categories help visitors scan content.

They can also become clickable filters later.

6.21 Create a Consistent Link Style

.article-card a {
    font-weight: 700;
    color: var(--secondary);
    text-decoration: none;
}

.article-card a:hover {
    color: var(--primary);
}

Links should be visually identifiable.

Do not remove every indication that text is clickable.

6.22 Style the Resource Section

A two-column resource block can use:

.resource-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-7);
}

The image:

.resource-image img {
    width: 100%;
    border-radius: var(--radius-lg);
}

The content can have a maximum width:

.resource-content {
    max-width: 600px;
}

This creates a strong visual contrast with the three-column article grid.

6.23 Use Alternating Section Backgrounds

One effective way to separate sections is to alternate background tones.

For example:

.section-soft {
    background: var(--background);
}

Then:

<section class="section section-soft">

You do not need borders around every section.

Whitespace and subtle background changes can create enough separation.

6.24 Style the Program Cards

.program-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.program-card {
    padding: var(--space-5);
    background: var(--secondary);
    color: #ffffff;
    border-radius: var(--radius-md);
}

Use strong contrast carefully.

If one section has a dark background, the following section can return to a light background.

This creates rhythm.

6.25 Style the Trust Section

.trust-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: var(--space-7);
}

The image can be rounded:

.trust-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

A circular portrait works particularly well for personal-brand templates.

However, do not force every website to use a circular image.

6.26 Style Testimonials

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.testimonial-card {
    padding: var(--space-5);
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0,0,0,.07);
}

You can make the quotation visually prominent:

.testimonial-card blockquote {
    margin: 0 0 var(--space-3);
    font-size: 1.1rem;
    font-weight: 600;
}

Again, the actual testimonials should be genuine and appropriately attributed.

6.27 Style the FAQ

If using <details>:

.faq-list {
    max-width: 850px;
    margin-inline: auto;
}

.faq-item {
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 700;
}

You can improve the visual spacing:

.faq-item p {
    margin: 16px 0 0;
    color: var(--muted);
}

This produces a functional FAQ without requiring complicated JavaScript.

6.28 Style the Newsletter

.newsletter-section {
    padding-block: var(--space-6);
    background: var(--secondary);
    color: #ffffff;
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-5);
}

The form can use:

.newsletter-form {
    display: grid;
    gap: 10px;
}

The input:

.newsletter-form input {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius-sm);
}

6.29 Create a Responsive Form

Desktop:

[ Email Address                 ] [ Subscribe ]

Mobile:

[ Email Address                 ]

[ Subscribe                     ]

CSS:

.form-row {
    display: flex;
    gap: 10px;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }
}

This is a simple example of responsive transformation.

6.30 Style the Final CTA

.final-cta {
    padding-block: var(--space-7);
    text-align: center;
    background: var(--background);
}

.final-cta p {
    max-width: 650px;
    margin: 0 auto var(--space-4);
    color: var(--muted);
}

The centered layout creates a strong closing moment.

6.31 Style the Footer

.site-footer {
    background: #1f2c26;
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-5);
    padding-block: var(--space-6);
}

.footer-column {
    display: grid;
    gap: 10px;
}

.footer-column a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.footer-column a:hover {
    color: #ffffff;
}

The footer should remain visually connected to the rest of the website.

6.32 Add the Footer Bottom

.footer-bottom {
    padding-block: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: .9rem;
}

This creates a clear separation between the main footer content and copyright information.

6.33 Build the Mobile Navigation

At a certain width, hide the desktop navigation.

.menu-toggle {
    display: none;
}

@media (max-width: 900px) {

    .main-navigation {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

}

JavaScript can later add an active class that displays the menu.

For example:

@media (max-width: 900px) {

    .main-navigation.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: var(--space-4);
        background: var(--surface);
        border-top: 1px solid rgba(0,0,0,.08);
    }

}

This gives the mobile menu a simple structure.

6.34 Make the Grids Responsive

Your three-column grid should eventually become two columns and then one column.

@media (max-width: 900px) {

    .feature-grid,
    .article-grid,
    .program-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

Then:

@media (max-width: 600px) {

    .feature-grid,
    .article-grid,
    .program-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

}

This approach provides a smoother transition across devices.

6.35 Make Two-Column Sections Responsive

For the hero, resources and trust sections:

@media (max-width: 800px) {

    .hero-grid,
    .resource-grid,
    .trust-grid,
    .newsletter-inner {
        grid-template-columns: 1fr;
    }

}

Now the sections stack vertically.

6.36 Control Mobile Typography

Large desktop headings may become overwhelming on phones.

The clamp() approach already helps, but you can add a specific mobile adjustment:

@media (max-width: 600px) {

    .hero h1 {
        font-size: 2.6rem;
    }

    .section-heading h2 {
        font-size: 2rem;
    }

}

Always test the actual result.

Do not rely only on numerical assumptions.

6.37 Check Horizontal Overflow

One common mobile problem is unwanted horizontal scrolling.

Possible causes include:

• Fixed-width elements.
• Large images.
• Long text.
• Absolutely positioned elements.
• Oversized buttons.
• Wide tables.

If the mobile page moves sideways when you swipe, find the element causing the overflow and fix the underlying layout.

Do not simply hide the problem with:

body {
    overflow-x: hidden;
}

That can conceal a structural issue rather than solve it.

6.38 Use Flexible Images

Avoid fixed image dimensions whenever possible.

Prefer:

img {
    max-width: 100%;
    height: auto;
}

For designed image frames, use:

img {
    width: 100%;
    object-fit: cover;
}

This allows images to adapt to their containers.

6.39 Use CSS Grid for Structure

Grid is particularly useful for:

• Card collections.
• Two-column sections.
• Footer layouts.
• Content dashboards.
• Resource libraries.

For example:

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

The minmax(0, 1fr) pattern can help prevent content from unexpectedly forcing a column wider.

6.40 Use Flexbox for Alignment

Flexbox is useful for:

• Navigation.
• Buttons.
• Small groups of elements.
• Horizontal forms.
• Card metadata.

For example:

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

Understanding when to use Grid and when to use Flexbox is an important frontend skill.

6.41 Add Motion Carefully

You can add subtle transitions:

a,
button,
.card {
    transition:
        transform .2s ease,
        color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

Avoid excessive animation.

A visitor who comes to read a health article should not have every card bouncing onto the screen.

Animation should support usability.

6.42 Respect Reduced Motion Preferences

Some visitors prefer reduced motion.

You can accommodate this:

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

This is another example of designing beyond appearance.

6.43 Test the Template at Different Widths

Do not test only at:

1920px

and

375px

Also test intermediate sizes such as:

• 1440px.
• 1280px.
• 1024px.
• 900px.
• 768px.
• 600px.
• 480px.
• 375px.

Problems often appear between the major breakpoints.

A design that looks perfect at 375px and 1920px can still break at 768px.

6.44 Use Browser Developer Tools

Modern browsers provide responsive testing tools.

Open Developer Tools and switch to device simulation.

Test:

• iPhone-sized screens.
• Android-sized screens.
• Tablets.
• Desktop.

Inspect elements that appear too wide or too narrow.

This makes responsive debugging much faster.

6.45 Test Text Wrapping

Text wrapping can dramatically affect layout.

Test:

Short heading

and

Long heading with multiple lines that could potentially change the height of the section

If the layout collapses when the heading becomes longer, the component needs more flexibility.

This is particularly important for commercial templates because buyers will replace your text.

6.46 Test Button Labels

Your buyer may replace:

Learn More

with:

Explore Our Complete Wellness Program

The button should be able to accommodate the longer label.

Avoid fixed widths unless there is a strong reason.

Prefer:

.btn {
    min-height: 48px;
    padding-inline: 24px;
}

rather than:

.btn {
    width: 160px;
}

Flexible buttons are more reusable.

6.47 Build a Dark Section Carefully

If you use a dark section, verify contrast.

For example:

.dark-section {
    background: var(--secondary);
    color: #ffffff;
}

Then make sure secondary text remains readable.

Do not use extremely low-opacity white text for essential information.

6.48 Avoid Overusing Shadows

Shadows can add depth, but too many shadows make a website feel heavy.

A subtle shadow:

box-shadow: 0 8px 24px rgba(0,0,0,.06);

may be enough.

Not every card needs a shadow.

Some sections can use:

• Border only.
• Background contrast.
• Whitespace.

Minimalism often creates a more premium appearance.

6.49 Build a Consistent Radius System

If cards use:

border-radius: var(--radius-md);

then buttons can use:

border-radius: var(--radius-sm);

and large feature images:

border-radius: var(--radius-lg);

This creates a visual rhythm.

Do not randomly choose different corner radii throughout the site.

6.50 Create a Reusable Utility System

As the template becomes larger, utility classes can reduce repetitive CSS.

For example:

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--muted);
}

.mx-auto {
    margin-inline: auto;
}

.hidden {
    display: none;
}

Use utilities carefully.

Do not create hundreds of tiny classes that make the HTML difficult to understand.

6.51 Test Keyboard Navigation

Use the Tab key to move through the page.

Check whether you can reach:

• Navigation links.
• Buttons.
• Forms.
• Accordions.
• Footer links.

The focus indicator should remain visible.

A beautiful website that cannot be comfortably navigated by keyboard is incomplete.

6.52 Check the Mobile Menu

The mobile menu should:

1. Open when the button is activated.
2. Close when appropriate.
3. Clearly communicate its state.
4. Allow links to be selected.
5. Not cover content unexpectedly.
6. Remain usable with keyboard navigation.

These details will be implemented with JavaScript in the next stages.

6.53 Create a CSS Organization Strategy

As the stylesheet grows, organize it logically.

For example:

1. Reset
2. Variables
3. Typography
4. Layout
5. Buttons
6. Header
7. Hero
8. Sections
9. Cards
10. Forms
11. Footer
12. Responsive rules
13. Accessibility

This makes debugging easier.

You should be able to find a style quickly.

6.54 Avoid Excessive !important

Beginners sometimes solve every CSS conflict using:

!important

This creates problems later.

Use proper selectors and structure first.

Reserve !important for unusual situations where it is genuinely justified.

A clean stylesheet is easier to modify.

6.55 Think Like a Template Seller

At this stage, ask:

Can someone else understand this CSS?

Can they change the colors?

Can they adjust the container width?

Can they change button styles?

Can they modify the spacing?

Can they add a fourth card?

Can they remove a section without breaking the page?

If your CSS supports these changes, your commercial template becomes much more valuable.

6.56 Practical Exercise

Take your homepage and complete the following process.

First, style the:

• Header.
• Hero.
• Buttons.
• Feature cards.
• Article cards.
• Resource section.
• Programs.
• Testimonials.
• FAQ.
• Newsletter.
• Footer.

Then test the design at:

• Desktop.
• Tablet.
• Mobile.

Write down every problem you discover.

For example:

“Hero heading is too large at 600px.”

“Three cards become too narrow at 850px.”

“Footer columns are difficult to read on mobile.”

Fix each problem one at a time.

6.57 The Responsive Design Checklist

Before considering the CSS stage complete, verify:

• No unwanted horizontal scrolling.
• Images resize correctly.
• Buttons remain usable.
• Text remains readable.
• Navigation works on mobile.
• Cards stack correctly.
• Forms work at narrow widths.
• Footer adapts to small screens.
• Headings wrap naturally.
• Focus states are visible.
• Hover effects are not required for essential information.
• Motion is not excessive.
• Reduced-motion preferences are respected.
• Content remains understandable without decorative styling.

Conclusion

CSS transforms the structural HTML into a real visual experience.

But professional CSS is not simply about choosing attractive colors or adding shadows. It is about creating a consistent system that responds intelligently to different screen sizes and different types of content.

Your template should not merely look good on the computer used to create it.

It should remain useful when:

• The screen becomes smaller.
• The title becomes longer.
• The image changes.
• The buyer changes the colors.
• Another article is added.
• A card is removed.
• The content grows.

That is the difference between a screenshot and a real website template.

In the next chapter, we will add JavaScript interactions, mobile navigation, accordions, forms and other functional elements, turning the static design into an interactive website.