This article explains how to add custom CSS (styling code) to change your website's appearance beyond the standard theme options.
What is Custom CSS?
CSS stands for Cascading Style Sheets. It's code that controls how your website looks - colours, fonts, spacing, and layout. Custom CSS lets you make changes that aren't available in your theme's standard settings.
Method 1: Using WordPress Customizer (Recommended)
- Log into your WordPress admin dashboard
- Go to Appearance > Customize in the left sidebar
- Look for Additional CSS at the bottom of the customizer menu
- Click Additional CSS to open the CSS editor
- Type or paste your CSS code into the text box
- You'll see changes appear on the preview immediately
- Click Publish to save your changes
This method is safest because your custom CSS won't be lost if you update your theme.
Method 2: Using Your Theme's Custom CSS Option
Some themes have their own custom CSS section:
- Go to Appearance > Customize
- Look for sections like Custom CSS, Advanced, or your theme's name
- Find the CSS input field
- Add your CSS code
- Save or publish your changes
Method 3: Using a Plugin
If you need more advanced CSS management:
- Go to Plugins > Add New
- Search for "Simple Custom CSS"
- Install and activate a CSS plugin
- Go to the plugin's settings page
- Add your CSS code
- Save your changes
Refer to our guide on setting up WordPress plugins for more help with plugins.
Basic CSS Examples
Change text colour:
h1 {
color: #ff0000;
}
Change background colour:
body {
background-color: #f0f0f0;
}
Hide an element:
.unwanted-element {
display: none;
}
Important Safety Tips
- Always test changes on a staging site first if possible
- Make small changes one at a time
- Keep a backup of your CSS code
- Use the preview function before publishing
- If something breaks, remove the last CSS you added
Finding the Right CSS Selectors
To modify specific elements:
- Right-click on the element you want to change
- Select Inspect or Inspect Element
- Look for class names (start with a dot) or IDs (start with #)
- Use these in your CSS code
For basic colour and font changes, you might prefer customising colours and fonts through your theme's standard options first.
If you're still stuck, contact our support team through your Web60 dashboard. Include details about what you're trying to achieve and any CSS code you've tried.
FAQ
Q: Will my custom CSS disappear if I update my theme?
A: If you use the WordPress Customizer's Additional CSS section, your custom CSS will be preserved. CSS added directly to theme files will be lost during theme updates.
Q: Why isn't my custom CSS working?
A: Common issues include typos in CSS syntax, incorrect selectors, or existing styles overriding your custom CSS. Try adding !important after your CSS property value.
Q: Can I undo custom CSS changes?
A: Yes, you can delete the CSS code from wherever you added it, or use the revision history in the WordPress Customizer to revert to an earlier version.
Q: Do I need to know CSS to use this feature?
A: Basic CSS knowledge helps, but you can often find CSS code examples online. Start with simple changes and test each one before adding more.
Q: Will custom CSS slow down my website?
A: A reasonable amount of custom CSS won't significantly impact your site speed. However, avoid adding large amounts of unused CSS code.
Q: Can I use custom CSS to completely redesign my website?
A: While possible, extensive redesigns are better achieved by choosing a different theme or hiring a developer. Custom CSS works best for small tweaks and adjustments.
Q: What happens if my custom CSS breaks my website?
A: Remove the problematic CSS code from where you added it. If you can't access your admin area, contact support for assistance restoring your site.
Last updated: 1 March 2026