Editing CSS in WordPress – Simplified for Beginners
Getting Started
To start with, CSS (Cascading Style Sheets) is the language used to design the skeleton of a website. It beautifies and adds life to the web pages – changing the fonts, colors, sizes, spacing, and other visual aspects. This tutorial is here to help beginners understand how to manipulate and edit CSS on WordPress websites.
What You’ll Need: Understanding Themes & Child Themes
Before we start, it’s essential to understand how WordPress themes work. Most themes come with a predefined CSS. When you adjust the CSS, you modify the theme. However, if the theme updates, all your tweaks would be erased. Hence, the need for a Child Theme – a copy of the parent theme, but it allows you to make changes without altering the parent theme.
You can either create a child theme manually by following the official WordPress guide or use a plugin like Child Theme Configurator. This plugin simplifies the entire process to a few clicks.
Editing CSS with Customizer
- From your WordPress dashboard, navigate to Appearance > Customize.
- Then select Additional CSS. This brings up an editor where you can add your custom CSS.
- After writing your custom CSS, click on the Publish button.
Editing CSS Using a Plugin
Besides the Additional CSS option, you can use WordPress plugins. A highly recommended one is Simple Custom CSS. After installing and activating, navigate to Appearance > Custom CSS. You can then add your custom CSS code.
Editing CSS Files Manually
This is the most advanced option and it’s advised to proceed with caution. Before editing any files, ensure to backup your website. In case anything goes wrong, you can restore it to the previous state.
- From your WordPress dashboard, head to Appearance > Theme Editor.
- On the right, locate Theme Files (usually starts with
style.css). - Edit the CSS, then click the Update File button.
Another way is via FTP (File Transfer Protocol). Use a client like FileZilla to connect to your website hosting and navigate to /wp-content/themes/your-theme-name/, and open style.css.
Inspecting Websites With Developer Tools
The Inspect Element or Developer Tools in browsers like Chrome and Firefox are handy tools for testing and learning about CSS. Right-click on any element on a webpage and click on ‘Inspect’ to see its CSS. You can experiment by changing the CSS via inspection. Note that any changes made will only be visible on your device and won’t affect the live site.
Overriding Styles in CSS
Occasionally, the changes you make might not reflect. This could be due to CSS Specificity or the CSS written later in the CSS file taking precedence over your changes. You can override this with the !important declaration.
Here’s an example:
.entry-title {
font-size: 24px !important;
}
Final Notes
Remember, practice makes perfect. The more you experiment with CSS, the better you’ll get at it. Ensure you backup your site, or work with a child theme or plugin to prevent unexpected changes during theme updates. This guide should give you a comprehensive start, but in case you need more information, explore the official WordPress Codex.
Whether you are focused on adjusting the background colour of your header or tweaking the size of your paragraph text, don’t be afraid to make mistakes, and never stop learning. Happy editing!