Ananta Code Academy
 Continue to Day 17
MODULE 02 · CONTENT & DESIGN

Custom CSS & Styling

Themes and page builders only get you so far. Today you'll learn where to safely add your own CSS so small styling tweaks survive theme updates instead of getting wiped out.

Day 16 of 30 Beginner ~16 min
01 · OVERVIEW

Why You'd Reach for Custom CSS

The Customizer from Day 5 covers big, structural choices — colors, fonts, layout. Custom CSS is for the smaller stuff it doesn't expose: nudging a button's padding, hiding an element on mobile, or tightening the spacing between two sections.

The key rule is the same one from Day 21's child themes preview: never edit your active theme's files directly, since an update will silently erase your changes. Custom CSS through the Customizer avoids that problem entirely.

02 · FINDING WHAT TO STYLE

Using Your Browser's Inspector

Before you can style an element, you need its exact class or ID. Right-click anything on your page and choose "Inspect" to open your browser's developer tools.

DEVTOOLS ELEMENTS PANEL
Elements Console Network
<div class="site-header">
<nav class="main-nav">
<a class="nav-cta">
</nav>
</div>
.nav-cta {
padding: 10px 20px;
border-radius: 8px;
}

Clicking an element highlights its matching CSS rules on the right.

03 · WRITING THE RULE

From Selector to Style

Once you have a class name, the CSS itself follows a simple pattern: selector, then property-value pairs inside curly braces.

additional-css.css 
/* Give the call-to-action button more breathing room */
.nav-cta {
  padding: 14px 28px;
  font-size: 1rem;
}
TIP

Changes typed into Additional CSS preview instantly on the right side of the Customizer, before you publish anything.

04 · ADDING YOUR CSS

From Inspector to Published Site

  • Inspect the element you want to change and note its class name.
  • Open Appearance → Customize and click into "Additional CSS."
  • Write your rule using the class as the selector.
  • Check the live preview on the right before doing anything else.
  • Click Publish once the preview looks right.
    • 05 · SPECIFICITY

    Why a Rule Sometimes "Doesn't Work"

    TOO GENERIC A rule like a { color: navy; } is easily overridden by a more specific theme rule targeting the same links.
    SPECIFIC ENOUGH Targeting the exact class, like .nav-cta { color: navy; }, wins over broader theme rules almost every time.
    06 · COMMON MISTAKES

    What Trips People Up First

    WATCH FOR THESE
    TYPO'D SELECTOR A misspelled class name means the rule silently matches nothing at all.
    MISSING SEMICOLON Forgetting a semicolon can break every rule that follows it in the same block.
    CACHED PAGE If Day 14's caching plugin is active, clear the cache before assuming a change failed.
    07 · BREAKDOWN

    Breaking Down What You Just Learned

    1

    Additional CSS is update-safeIt lives separately from your theme's own files.

    2

    Inspect before you styleDevtools tells you the exact class name to target.

    3

    Specificity decides the winnerA specific class beats a generic element selector.

    4

    Preview before publishingThe Customizer shows changes live before they go public.

    5

    Check the small stuff firstTypos, missing semicolons, and stale caches explain most "it didn't work" moments.

    08 · TRY IT

    Try It Yourself

    EXERCISE

    Inspect your site's footer credit link, find its class, and add a rule in Additional CSS that changes its color on hover. Confirm it in the live preview before publishing.

    09 · TODAY'S PRACTICE

    Style Three Elements on Your Capstone Site

    HANDS-ON EXERCISE

    Practicing the inspect-then-style workflow

    Pick three small visual tweaks and make each one through Additional CSS rather than a page builder setting.

    1. Inspect and adjust the spacing around one section on your homepage.
    2. Change the hover color of one button or link.
    3. Adjust font size for one heading using its specific class.
    4. Preview all three changes together before publishing.
    5. Publish, then reload the live site to confirm nothing broke.
    10 · RECAP

    Recap

    ADDITIONAL CSS

    The safe, update-proof place for small styling tweaks.

    INSPECTOR

    Right-click → Inspect to find the exact class to target.

    SPECIFICITY

    More specific selectors override generic ones.

    LIVE PREVIEW

    Always check the Customizer preview before publishing.

    11 · SUMMARY

    Key Takeaways

    • Use Appearance → Customize → Additional CSS for small tweaks that need to survive theme updates.
    • Use your browser's Inspector to find the exact class name before writing any rule.
    • A more specific selector beats a generic one when two rules target the same element.
    • Always check the live preview before publishing a CSS change.
    • Typos, missing semicolons, and stale caches explain most CSS that "doesn't work."
    Course Overview