How to add custom CSS in WordPress?

Method 1: WordPress Customizer (Best & Safest)

Best for: Beginners and making small, global CSS changes.

Steps:

1. Log in to your WordPress Dashboard.
2. Navigate to Appearance → Customize.
3. Click on the Additional CSS tab.
4. Paste your custom CSS into the editor.
5. Click Publish.

Method 2: Block Editor (Gutenberg) – Page Level CSS

Best for: Applying styles to specific elements on a single page or post.

Steps:

1. Edit the specific page or post.
2. Select the block you wish to style.
3. Open the Block Settings in the right-hand panel.
4. Expand the Advanced section.
5. Assign a Custom CSS class (e.g., my-custom-style).
6. Save the page.
7. Go to the Customizer (Method 1) and write the CSS for that class.

Method 3: Elementor (Free Version)

Best for: Users building their site with the Elementor page builder.

Steps:

1. Select Edit with Elementor on your page.
2. Click on the specific element you want to style.
3. Navigate to Advanced → CSS Classes.
4. Enter a unique class name.
5. Save your changes.
6. Add the corresponding CSS via Appearance → Customize → Additional CSS.

Method 4: Child Theme (Recommended for Developers)

Best for: Large-scale projects and permanent CSS changes that survive theme updates.

Steps:

1. Create and activate a child theme.
2. Locate and open the style.css file within the child theme folder.
3. Add your custom CSS styles.
4. Save the file.

Method 5: Theme File Editor (Direct Editing)

Best for: Quick technical fixes. Note: This is generally not recommended as changes may be lost during theme updates.

Steps:

1. Go to Appearance → Theme File Editor.
2. Select the style.css file from the right sidebar.
3. Append your CSS to the bottom of the file.
4. Click Update File.

Method 6: Page Builders (Theme-Specific CSS)

Best for: Users of lightweight themes like Astra, GeneratePress, or Kadence.

Steps:

1. Navigate to Appearance → Customize.
2. Open your specific Theme Settings.
3. Look for a section labeled Custom CSS or Advanced Styling.
4. Insert your code and click Publish.

Method 7: Add Custom CSS via Plugin

Best for: Non-technical users who want a dedicated interface for CSS management.

Steps:

1. Install and activate a Custom CSS plugin (e.g., Simple Custom CSS).
2. Open the plugin settings from the dashboard.
3. Add your CSS code to the provided text area.
4. Click Save.