Master of the universe

How To Use Custom CSS In WordPress


Web design relies heavily on CSS (Cascading Style Sheets) for styling and layout control. Custom CSS allows you to override default styles in WordPress, providing greater control over your website's appearance. This article aims to teach you how to use custom CSS in WordPress effectively and efficiently.

Understanding CSS in WordPress

Basics of CSS

CSS is responsible for the visual appearance of web content. It is composed of selectors, properties, and values, which together define the style rules for a specific element.

How WordPress Handles CSS

In WordPress, CSS is primarily managed through:

  • Theme stylesheets
  • Plugin-generated CSS
  • Inline styles

Methods to Add Custom CSS in WordPress

There are several ways to add custom CSS to your WordPress site, including:

Method 1: Using the WordPress Customizer

  1. Access the Customizer from your WordPress dashboard by navigating to Appearance > Customize.
  2. Locate the "Additional CSS" section.
  3. Write and preview your custom CSS in the provided text box.
  4. Save and publish your changes.

Method 2: Using a Child Theme

Using a child theme ensures that your custom CSS remains intact when updating the parent theme.

  1. Create a child theme folder in your wp-content/themes directory.
  2. In the new folder, create a style.css file and a functions.php file.
  3. Enqueue the child theme's style.css file in the functions.php file.
  4. Add your custom CSS to the child theme's style.css file.

Method 3: Using a Custom CSS Plugin

Custom CSS plugins allow you to add and manage custom CSS directly within the WordPress dashboard. Popular plugins include:

  • Simple Custom CSS
  • SiteOrigin CSS
  • WP Add Custom CSS

To use a custom CSS plugin, install and activate it, then follow the plugin-specific instructions for adding custom CSS.

Best Practices for Writing and Organizing Custom CSS

CSS Formatting and Organization

To maintain clean and organized CSS code, follow these guidelines:

  • Use comments: Insert comments to label sections and provide context for complex styles. Comments make it easier to understand and maintain your CSS code, especially when working with others.
  • Group related styles: Organize your CSS by grouping related styles together. For example, keep all typography styles in one section and layout styles in another. This organization makes it easier to locate and modify specific style rules.
  • Order CSS rules consistently: Consistently order your CSS rules, either alphabetically or by specificity. This order will make it easier to find and modify specific properties.

CSS Naming Conventions

When writing custom CSS, adopt proper naming conventions:

  • Choose descriptive class and ID names: Make sure your class and ID names are descriptive and meaningful. This practice helps you and others understand the purpose of each style rule. For example, use .header-navigation instead of .nav-1.
  • Consider using BEM, SMACSS, or OOCSS methodologies: BEM (Block, Element, Modifier), SMACSS (Scalable and Modular Architecture for CSS), and OOCSS (Object-Oriented CSS) are popular CSS methodologies that provide structure and maintainability to your stylesheets. These methodologies encourage modular, reusable, and scalable CSS.
    • BEM: Involves a specific naming convention, such as .block__element--modifier, to create a clear relationship between the components.
    • SMACSS: Organizes styles into categories, like base, layout, module, state, and theme, to provide a consistent and structured approach to writing CSS.
    • OOCSS: Encourages separating structure and skin, and container and content, to create reusable styles.

Responsive Design and Media Queries

To create a responsive design, follow these guidelines:

  • Write media queries for different screen sizes: Use media queries to apply styles based on the screen size and device characteristics. Design for common breakpoints, such as 320px (small mobile), 480px (large mobile), 768px (tablet), and 1024px (desktop).
  • Choose between mobile-first and desktop-first approaches: Decide whether to adopt a mobile-first or desktop-first approach when writing your media queries. Mobile-first involves writing styles for smaller screens first and then progressively enhancing them for larger screens, while desktop-first involves writing styles for larger screens and then progressively adapting them for smaller screens.
    • Mobile-first: Start with base styles for mobile devices and then use min-width media queries for larger screen sizes.
    • Desktop-first: Start with base styles for desktop devices and then use max-width media queries for smaller screen sizes.

By following these best practices for writing and organizing custom CSS, you can create well-structured and maintainable stylesheets that are easier to manage and update.

Troubleshooting Common CSS Issues

Identifying Specificity Issues

To resolve CSS specificity conflicts, follow these steps:

  • Understand CSS specificity rules: Familiarize yourself with how CSS specificity works. In general, inline styles have the highest specificity, followed by ID selectors, class selectors, and finally, element selectors.
  • Use browser developer tools to inspect styles: Utilize browser developer tools, such as Chrome DevTools or Firefox Developer Tools, to inspect the applied styles on an element. These tools allow you to identify conflicting styles and determine which style has higher specificity.
  • Resolve conflicts with !important and increased specificity: To resolve conflicts, you can use the !important flag to give a style rule higher specificity. However, using !important should be a last resort. Instead, try increasing the specificity of your custom CSS selector by making it more explicit or adding additional context.

Dealing with Browser Caching

To ensure your CSS changes are visible, consider the following:

  • Clear your browser cache: Browsers store a copy of your CSS files to improve page load times, which may cause your changes not to appear immediately. Clear your browser cache to force it to download the latest version of your CSS files.
  • Use cache-busting techniques to force updates: Implement cache-busting techniques to ensure that browsers always load the latest version of your CSS files. One common method is to append a query string to the file URL, such as style.css?v=1.0.1. Changing the version number forces the browser to download the new file.

Resolving Plugin and Theme Conflicts

To address conflicting styles from plugins and themes, follow these steps:

  • Identify the source of the conflict: Use browser developer tools to inspect the applied styles on an element and determine which plugin or theme is causing the conflict. This information will help you decide how to override the conflicting styles.
  • Override conflicting styles with custom CSS: Once you've identified the source of the conflict, write custom CSS to override the conflicting styles. You may need to increase the specificity of your selectors or use the !important flag to ensure your custom styles take precedence.

By following these troubleshooting steps, you can effectively diagnose and resolve common CSS issues in your WordPress projects, ensuring your website appears and functions as intended.


Using custom CSS in WordPress enables you to create unique and professional designs that stand out from the competition. By learning and implementing the methods and best practices outlined in this article, you can take your WordPress projects to the next level.

Sign up for the Artisan Beta

Help us reimagine WordPress.

Whether you’re a smaller site seeking to optimize performance, or mid-market/enterprise buildinging out a secure WordPress architecture – we’ve got you covered. 

We care about the protection of your data. Read our Privacy Policy.