CSS Menu Tools

How I Add CSS in the Website.com Builder (and What Actually Stuck)

Written by

in

I use Website.com for a small shop site I run for weekend orders. Cute cookies. Busy Fridays. I needed tiny style fixes. Bigger buttons. Softer headings. Clean links. You know what? The built-in styles were close. But not quite me. So I added my own CSS.

Here’s how I did it, what worked, and what tripped me up. If you're looking for a gentle primer before diving in, the free How to Build a Website with CSS series walks through the core concepts in a beginner-friendly way.

If you’d like a screenshot-rich, step-by-step companion to this write-up, check out my guide on adding CSS in the Website.com builder.

Where the CSS button lives (on my plan)

On my Business plan, I saw two spots that take custom code. Your labels may read a bit different, but the flow was like this:

  • In the editor, open the left sidebar.
  • Tap Settings (the little gear).
  • Go to Site Settings.
  • Look for Custom Code or Header Code. That field loads on every page.
  • Paste a style block there. Then Publish.

On one of my other sites, I also had a Design area with a Custom CSS box. Same idea. If you see a box named Custom CSS, use that. If not, the Header Code field works fine.

Tip: Some features need a paid plan. When I used a free plan, the code box was missing.

My first test: a tiny “does this work?” change

I always start small. This line flips link color and hover. Easy to check.

<style>
  a { color: #0a66c2; }
  a:hover { color: #064a88; text-decoration: underline; }
</style>

I hit Preview. Links turned blue. Win.

If nothing changes, publish and hard refresh. I once thought nothing worked, but my browser had cached the old CSS.

Global style fixes I keep

I like simple defaults. Let the page breathe. Here are the rules I use on almost every site. I add them to the global header code so they load everywhere.

<style>
  /* Base rhythm */
  html { scroll-behavior: smooth; }
  body {
    line-height: 1.6;
    color: #222;
  }

  /* Headings that feel friendly */
  h1, h2, h3 {
    letter-spacing: 0.2px;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
  }

  /* Nicer text blocks */
  p { margin: 0.6em 0; }

  /* Softer images */
  img { border-radius: 8px; }

  /* Buttons that pop (works if you add a custom class—see next section) */
  .my-cta {
    background: #ff6a3d;
    color: #fff;
    padding: 12px 18px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
  }
  .my-cta:hover { background: #e95c31; }

  /* Mobile tweaks */
  @media (max-width: 480px) {
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
    .my-cta { width: 100%; text-align: center; }
  }
</style>

If you ever want to mock up a slick dropdown or mega-menu before pasting the CSS into Website.com, I spin up a quick demo at CSS Menu Tools to save time.

Does Website.com support classes on elements? On my site, yes. In the right panel, I saw a field called Class on boxes and buttons. I typed my-cta and the button picked up the style. If you don’t see that field, I group the content inside a Box and apply the class on the Box. For patterns that go beyond color tweaks—think animations, flexbox layouts, and grid experiments—the Advanced Webpage Styling with CSS guide is a concise refresher I keep bookmarked.

While experimenting with layouts for lifestyle or relationship blogs, you might need inspiration for how playful content can be broken up with pull-quotes and bold call-out boxes. One article I recently restyled for fun was titled Unexpected Sex Tips From Real Live Girls which offers candid, reader-submitted advice; beyond the cheeky topic, it’s a handy example of how small CSS touches—like gradient buttons and animated list markers—can keep readers engaged all the way to the comments section.

Another design rabbit-hole I fell into was studying how upscale sugar-dating platforms communicate exclusivity through subtle visuals and refined typography. Skimming the landing page for Sugar Baby Charlotte illustrates how a muted pastel palette, generous white-space, and confidently sized calls-to-action can project sophistication—valuable inspiration you can borrow when fine-tuning your own styles in the Custom CSS panel.

Page-only CSS (so you don’t style the whole site)

I wanted a special hero on my Order page. Not on the rest. I used the page’s Header Code field.

  • In the Pages panel, click the page name.
  • Open Page Settings.
  • Find Header Code (Advanced).
  • Paste a style block there. That code only runs on that page.

Here’s the snippet I used to soften the hero and tighten spacing:

<style>
  /* Page-specific rules */
  h1 { color: #1f2b3a; }
  p.lead { font-size: 18px; opacity: 0.9; }
  @media (max-width: 480px) {
    p.lead { font-size: 16px; }
  }
</style>

I added the class lead to that first paragraph. It looked clean on desktop and didn’t shout on mobile.

A few real changes I made (with code)

  • Make product cards taller so photos don’t jump around:

    <style>
.card { min-height: 380px; }
.card img { object-fit: cover; height: 220px; width: 100%; }
</style>

  • Reduce the big gap above the footer:

    <style>
footer { margin-top: 24px !important; }
</style>

  • Calm down long lists:

    <style>
ul { padding-left: 1.2em; }
li { margin: 0.3em 0; }
</style>

  • Hide a promo strip on phones (it felt cramped):

    <style>
@media (max-width: 480px) {
  .promo-strip { display: none; }
}
</style>

I put promo-strip as a class on that strip in the editor.

What broke (and how I fixed it)

  • My H1 got tiny on mobile. I had set a global font size. I fixed it with a mobile media query, like you saw above.

  • I styled all images with rounded corners. My logo looked weird. I added an exception:

    <style>
img { border-radius: 8px; }
img.logo { border-radius: 0; }
</style>

    Then I set the logo’s class to logo.

  • I pasted CSS in Site Header and also in a Page Header. The page one won. That’s normal. Page code loads after site code. If two rules fight, the last one wins. Or the more specific one wins.

Little editing quirks

  • The live editor view didn’t always show my CSS. Preview did. Publish did. So I preview often.
  • Theme updates can nudge spacing. When I change a template section, I skim my CSS and see if any selector feels too broad. I like classes over element names for this reason.

Quick starter set you can copy

Use this as a base. Then trim it down.

“`html

/* Typography */
body { line-height: 1.6; color: #222; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
p { margin: 0.6em 0; }

/* Links */
a { color: #0a66c2; }
a:hover { color: #064a88; text-decoration: underline; }

/* Media */
img { border-radius: 6px; }

/* Buttons (attach .btn-main in the editor) */
.btn-main {
background: #1e90ff;
color: #fff;
padding: 12px 18px;
border-radius: 6px;
border: none;
font-weight: 600;
}
.btn-main:hover { background: #197bd6; }

/* Layout helper */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Mobile */
@media (max-width: 480px) {
h1 { font-size: 28px; }
h2

More posts