---
title: Getting Started With Custom CSS
description: "With your WordPress site, not only can you customize the layout of your pages, but you can customize their styles too. Cascading style sheets or [CSS](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms//#css) is the technology that allows you to style your web pages. This guide shows…"
url: "https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-css/"
updated: "2025-03-03"
category: Advanced / Getting Started With Custom Code
---

# Getting Started With Custom CSS

With your WordPress site, not only can you customize the layout of your pages, but you can customize their styles too. Cascading style sheets or [CSS](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms//#css) is the technology that allows you to style your web pages.

This guide shows you the best 3 ways to add custom styles using CSS to your website:

1. Use a plugin (generally the easiest way)
2. Use the **Appearance** > **Customize** > **Additional CSS** editor
3. Edit your child theme's `style.css` file

  **Note**: Your theme might include an option or settings area for you to add CSS. Using your theme's support for CSS might be even easier than using a plugin. Please check your theme's documentation.

## Use a Plugin

If you aren't comfortable or don't want to bother with editing server files using a plugin is the way to go! We'll cover 2 plugins we like to use.

### Simple Custom CSS and JS Plugin

The first plugin we recommend is the [Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/) plugin.

After you install and activate the plugin, add your CSS by going to **Custom CSS & JS** > **Add Custom CSS** under your wp-admin side menu.

![file r4SU85An2O](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61c035ec55ad1a761aa61a92/file-r4SU85An2O.jpg)

The screen capture above is courtesy of **Simple Custom CSS and JS**.

The awesome thing about this plugin is that you plop in only CSS code. You don't need to worry about wrapping it around any HTML or PHP. Whew!

**Important!** If you want to add custom CSS to style your Popup Maker popups use the following settings:

- **Linking type**: Internal
- **Where on page**: Footer
- **Where in site**: In Frontend

![file K5MUCkQ9ml](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61a8310379d5be1f25dd4d73/file-K5MUCkQ9ml.jpg)

When you're done adding your CSS, click **Publish** to save your code. And as always, purge your caches to check your changes on the front end.

![file j2cuXHz5bn](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61c029cf67de684e3e437a08/file-j2cuXHz5bn.jpg)

### Code Snippets Plugin

We also like the [Code Snippets](https://wordpress.org/plugins/code-snippets/) plugin. Learn more on how to use the **Code Snippets** plugin in our [Getting Started with Custom PHP](https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-php//#easiest-use-the-code-snippets-plugin) guide.

  **Pro tip**: Use the  **Example CSS snippet** that comes installed with the plugin as a template for adding your CSS. That example template uses the `wp_head` [hook](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms//#hooks) to inject your CSS into the head of your posts and pages on the front end (public-facing end) of your site.

The 2 main differences between **Code Snippets** and **Simple Custom CSS and JS** are:

1. **Storage location**: **Simple Custom CSS and JS** stores your snippets as files on your webserver. **Code Snippets** stores snippets in the database.
2. **PHP snippets**: **Code Snippets** wraps all code inside PHP. That might be confusing to beginners, but that lets you add PHP code on top of HTML, CSS, and JavaScript. **Simple Custom CSS and JS** does **not** support PHP snippets at the time of writing.

### Benefits of Using a Plugin

Using a plugin has 2 big benefits:

1. **Easier to manage**: Both plugins we've covered let you create individual CSS snippets. Having smaller and more focused snippets make it easier to sort, find, edit, delete, enable/disable, export, and troubleshoot compared with a monolithic chunk of code in the **Additional CSS** editor or in a huge `style.css` file.
2. **Better editing experience**: Both plugins also have wider code editing areas with built-in shortcut features.

![file jvTfVXzN2t](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61a84eea663c7a603de8e28d/file-jvTfVXzN2t.jpg)

In the screen capture above is a list of keyboard shortcuts the Code Snippets editor supports.

## Use the Appearance > Customize > Additional CSS Editor

Using the **Additional CSS Editor** under the wp-admin menu **Appearance** > **Customize** is the usual way most WordPress docs recommend. If you don't want a plugin or mess with server files and a child theme, then this is your best bet.

Just be aware that the **Additional CSS**editor is **not** suited for adding a lot of custom CSS, the CSS code is stored in the database, and the editing experience can be painful. In the screen capture below, you can see how confined the CSS editor is compared to the rest of the screen.

![file lrp04LYtRY](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61a87e1f64e42a671b63c5b2/file-lrp04LYtRY.jpg)

Below is what the **Additional CSS** looks like in the database.

![file 1ZbWjk4d9w](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61a87ea464e42a671b63c5bf/file-1ZbWjk4d9w.png)

## Edit Your Child Theme's style.css File

Editing your child theme's style.css file is the most advanced option out of the 3 ways covered in this guide. But if you don't want to use a plugin or the **Additional CSS** editor for your custom CSS, this option is for you!

Before you start you'll need a [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/). After your child theme's set up, you can add your CSS directly into the child theme's `style.css` file.

Remember when you created your child theme? A WordPress child theme needs at least a `style.css` and `functions.php` file. Here's a minimalist example of a child theme's web directory (/wp-content/themes/twentytwentyone-child/).

![file wKwEqmYcio](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61a256a364e42a671b63ae66/file-wKwEqmYcio.jpg)

### But First, Take a Backup

Before you start editing server files, make sure you have a current backup of your site. You should also edit and test your changes on a staging copy instead of making changes directly on your live site. 

**Pro tip**: Save a copy of the file you want to edit before you make any changes. You can save it in the same folder as the original. You'll just need to give it a different name, e.g., `style.css.bak`. Then, if your edits crash your site, you can quickly revert to the backup file with a quick rename ;-). Just remember to either delete your bad version of the file or rename it to something else for debugging later.

### 3 Ways to Edit

Here are 3 ways you can edit your child theme's `style.css` file.

- SFTP (e.g. FileZilla)
- cPanel File Manager
- WordPress Theme Editor (only if there's no other way)

Just for the sake of an example, here's what a child theme `style.css` file looks like in the **Theme Editor**.

![file 6PJtbsWhdG](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61a8895a64e42a671b63c5ef/file-6PJtbsWhdG.jpg)

In the example above, you'd start adding your custom CSS code right after line 11. Even though you can use the built-in **Theme Editor**, we suggest you edit your `style.css` using **SFTP** or **File Manager**.

## Disclaimer About Using Custom Code Samples

**Major caveat**: Every time you use custom code, you take responsibility for testing and maintaining it. Here are some best practices you should follow:

- Make sure you have a recent full backup of your site. 
- Test your code on a staging copy of your live site. 
- Remember that any custom code example you decide to reuse is exactly that—an example! Meaning, that you'll need to tweak and make sure the code works in your environment and meets your needs.

Whenever you need to troubleshoot your site for a possible plugin or theme conflict, make sure you disable all custom code.