How To Add CSS To WordPress Site

Bywsadmin

This article will show you how to add custom styles or css to your WordPress site without editing your theme files, and see changes in real-time.

 Step 1: Log in to Your WordPress Dashboard

  1. Open your browser and go to your WordPress site admin login page.
    • Usually: yoursite.com/wp-admin
  2. Enter your username and password.
  3. Click the Log In button.

Step 2: Open the WordPress Customizer

  1. In the left-hand sidebar of the dashboard, go to:
    • Appearance → Customize
  2. This opens the WordPress Customizer, which shows a live preview of your site on the right and customization options on the left.

 Step 3: Open the “Additional CSS” Panel

  1. In the left sidebar, scroll down and click on “Additional CSS”.
    • This opens a built-in code editor where you can type or paste your CSS code.

 Step 4: Add Your Custom CSS Code

Inside the editor, type your CSS code.
Example:

body {

    background-color: #f0f0f0;

}

h1 {

    color: darkblue;

    font-family: ‘Arial’, sans-serif;

}

.site-footer {

    background-color: #333;

    color: #fff;

}

  1. As you type, you’ll see the live preview update on the right.
    • Some changes may not appear if the element isn’t currently visible in the preview.

Step 5: Publish Your Changes

  1. Once you’re happy with the preview:
    • Click the “Publish” button at the top of the left sidebar.
  2. Your CSS is now live and saved.

Step 6 (Optional): Test on the Frontend

  1. Visit your website normally (not in the Customizer) to see the live changes.
  2. Use your browser’s Inspect Tool (Right-click → Inspect) to verify that your styles are applied correctly.

Notes:

  • This method does not require a child theme.
  • It is safe and update-proof, because your CSS is saved independently of your theme files.
  • If you switch themes, the CSS may still be stored, but it might not apply the same way depending on the new theme structure.

Similar Posts