# Adding a custom CSS file to your WordPress site

> Add a separate custom CSS file to your WordPress theme so your style changes are easy to manage and survive updates.

Source: https://helpcenter.ruachost.com/wordpress/guides/adding-custom-css-file-to-your-wordpress-site/

Sometimes you may want to apply unique styling to your WordPress theme without editing the main stylesheet directly. On **ruachost.com**, you can add a **custom CSS file** to your theme for better control and maintainability.

## Why Add a Custom CSS File?

- Keeps your custom styles separate from the theme’s default CSS.
- Prevents losing changes when updating the theme.
- Makes it easier to organize and manage custom design tweaks.

## Steps to Add a Custom CSS File

1. **Log in to WordPress** with an administrator account.
2. In the dashboard, go to **Appearance → Theme Editor**.
3. Select your active theme and open the **functions.php** file.
4. Add the following code snippet:

   ```
   // Load custom CSS file
   function custom_style_sheet() {
       wp_enqueue_style(
           'custom-styling',
           get_stylesheet_directory_uri() . '/your_custom_css_file.css'
       );
   }
   add_action('wp_enqueue_scripts', 'custom_style_sheet');
   ```

   - Replace `your_custom_css_file.css` with the actual filename of your custom stylesheet.
   - Ensure the file is located in the same directory as your theme’s main `style.css`.
5. Save the file.
6. Upload your custom CSS file to the theme directory (`wp-content/themes/your-theme/`).
7. Refresh your site → The custom styles will now be applied.

## Important Notes

- Always back up your theme before editing `functions.php`.
- Use a **child theme** to preserve changes during theme updates.
- If your CSS file is in a subfolder (e.g., `/css/custom.css`), update the path accordingly.
- Test your site thoroughly to ensure styles are applied correctly.