WP Thinker

The WordPress Playground

How to add CSS to a specific page in WordPress

CSS in WordPress Page

Do you want to change the design, color, or layout of your WordPress site or pages without changing your current WP theme? Well, you can do it by using custom CSS. All you need to do is add the right CSS codes to a specific page or theme to modify its appearance.

However, not many people know where they should be making those changes or how to add the custom CSS.

In this article, we will show you what CSS is and two ways to add custom CSS to a specific page of any WordPress site. Let’s get started!

What is CSS?

CSS or Cascading Style Sheets is a coding language that can modify the basic structure of any website, which is written in HTML. With CSS, you can assign different properties to the HTML tags that include but are not limited to color, size, display, and layout.

With CSS, you can also make changes to the default of any WordPress theme. If you want to modify your WordPress website’s looks and design according to your needs or choice, you can add custom CSS to the WordPress site’s pages.

Why do people add custom CSS to WordPress pages?

As we have mentioned previously, you can use CSS to modify the HTML structure of a WordPress site to change several elements of a web page like color, layout, or display. Any design or appearance that your WordPress theme is unable to provide you by default can be achieved using custom CSS.

With CSS, you will get more control over how your website would look just by adding or changing a few lines of CSS code.

For instance, if you want to change the background color of each of your blog post pages, you can just add a custom CSS code to the theme’s code structure. You can also use the block editor and add CSS code to it to make changes to specific pages of your WordPress site.

Do you want to change the appearance of your product page? Just add custom CSS to the product pages. You can see how the product page looks, starting from its color to its layout to its overall design. After all, the default page designs available in the theme might not seem that appealing.

With custom CSS, you can enhance your WordPress site’s look, feel, and layout without needing to discard your current theme. This will ultimately save you a lot of time and money, which you would have otherwise invested in buying and setting up a new theme.

How to add CSS in WordPress without using third-party plugins

At this point, you should understand what CSS is and why custom CSS is important for your WordPress site. So, now it’s time to see how you can add custom CSS to specific pages in WordPress without using third-party plugins.

Add custom CSS using the Theme Customizer

Since the introduction of WordPress 4.7, anyone can add custom CSS to any specific page directly from the WordPress admin area. It’s really easy, and you can even preview the changes your custom CSS will bring to a page before actually saving the changes and publishing the updated page.

Here’s how you can add custom CSS codes to a specific page using the WordPress Theme Customizer:

  1. First, log in to your site’s WordPress admin page and navigate to Appearance → Customize. This will launch the “Customizer” interface of your WordPress theme.
  2. Now, click on the “Additional CSS” option available in the left panel.
  3. Find the ID of the page.
  4. Next, the tab will slide a bit to show you a box where you can add the custom CSS.
  5. Now, before every CSS rule, keep adding your page ID like “#page-id-425“. Check below for an example code.
  6. As long as you add the correct lines of CSS code, you can see the preview of the page live on the right-hand side. You can navigate to the specific page on the right side preview to see the changes.
  7. Keep adding the CSS codes until you are happy with the look of the page, and then hit the “Publish” button to save the changes.
#page-id-425 .entry-title {
    font-size: 30px;
    font-weight: 700;
}

#page-id-425 .entry-content {
    padding: 20px;
}

👉 Please Note: Any custom CSS added via the WordPress theme customizer will only be relevant to the current theme. If you ever change your WordPress theme, you will have to add the CSS code in the new theme once again to get the desired page design.

Add custom CSS using the WordPress block editor and Theme Editor

You can also add custom CSS classes to the WordPress site pages via the theme editor. This will allow you to edit WordPress CSS to add classes which you can use in your pages using block editor. Here’s what you need to do:

  1. First, you need to navigate to Tools → Theme File Editor. Once you get there, you need to select the active theme and click on the “Stylesheet.css” theme file.
  2. Next, you need to add the CSS class and the necessary code using the text editor. 
  3. Once you’re done updating the code, click on the “Update File” option.
  4. After that, you need to open the “Site editor” by navigating to Appearance → Site Editor. Here, select a block and click on the “Settings” icon in the right sidebar.
  5. Open the “Advanced” menu option where you will be able to see the “Advanced CSS class(es)” box. You must add the “CSS class” in this section.
  6. Finally, click on the “Publish” button to save the changes.