Adding your own custom CSS

Most of the look-and-feel changes you'll want — colors, fonts, and spacing — are best done with your site's built-in design tools, with no code at all. But if you want a very specific tweak that those tools don't cover, you can add a small piece of custom CSS. CSS is the language that controls how things look on a web page, and you don't need to be a developer to paste in a few lines.

First, try the design tools (no code needed)

Before reaching for CSS, check whether the change is already a built-in option — it usually is, and it's easier to manage:

• Go to Appearance → Pixelgrade Design to open the Pixelgrade hub.
• Open the Design System tab and click Open Style Manager.
• Adjust your colors, fonts, and spacing there. These changes apply

consistently across your whole site.

Use custom CSS only for the specific things the design tools don't reach.

—

Step 1 — Open the Site Editor

From your WordPress dashboard, go to Appearance → Editor to open the Site Editor.

You can also get there from **Appearance → Pixelgrade Design → Design System → Open Style Manager**, which opens the same Site Editor.

—

Step 2 — Open Styles → Additional CSS

• In the Site Editor, open Styles (the half-shaded circle icon).
• Open the options menu (the three-dot ⋮ icon at the top of the Styles

panel) and choose Additional CSS.

—

Step 3 — Add your CSS

• Type or paste your CSS into the Additional CSS box.
• As you type, the canvas preview updates so you can see your changes before

saving.

—

Step 4 — Save

• Click Save in the top-right corner of the Site Editor.
• Confirm what's being saved, then click Save again. Your custom CSS is now

applied across your site.

Tip: Custom CSS you add here belongs to your site, not to the theme, so it

stays in place when the theme updates. (This is different from editing theme

files directly, which an update can overwrite.)

—

Want to target just one block?

If you only want to style a single block, you can add CSS to that block instead of site-wide: select the block, open its settings, and look under the block's Advanced section.

—

New to CSS? Learn the basics

Since recently, using CSS to alter the site appearance has been mainly a web designer's job. Now, you should know that you don't need advanced designing or coding skills to do this work by yourself. We're giving you a helping hand by referring to some trustworthy resources to assist you:

• Check out the CSS Basics

article from WordPress.com, and don't forget to check the useful links at the bottom of the article.

• Or read the Intro to CSS section from

WordPress Training community.

—

Prefer not to touch code at all?

If you'd rather make visual tweaks without writing CSS, there are third-party visual-editing plugins such as CSS Hero. Before relying on one on your Pixelgrade LT site, check that it lists current **block-theme (Full Site Editing)** compatibility. For most needs, the built-in Style Manager design tools (above) cover you without any extra plugin.

—

Need a hand?

If your styling change isn't behaving as expected, open **Appearance → Pixelgrade Design → Help** to search the documentation or reach support.