Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / How-To Articles / How to Specify CSS Styling on a Single WordPress Page  

How to Specify CSS Styling on a Single WordPress Page  

March 5, 2015 By Nick J Leave a Comment

Understanding a bit of CSS is a useful skill for a website owner. Now, suppose you wanted to apply a line of CSS styling on just a single page instead of the entire site. Learning how to target your CSS to specific pages can solve hours of frustration when a code snippet isn’t readily available on the internet.

Let’s use this example: we’re going to hide the page title of just the Home Page.

The basic CSS for hiding a page title will usually look like this:

.main-title {
display: none;
}

When you copy the code above and place it in your styles.css file, it should hide all the page titles in the website. Normally, we’d stop there if that was what we wanted but we just want to hide the page title on the home page.

Basically, the code right now is targeting the display attribute for the main-title element. There is however no indication of which main-title is targeted. Is it the main-title on the home page? Is it the main-title on the About page? For cases like these, all main-titles will be affected.

To target a specific page, you need to add another selector and it looks like this:

.home .main-title {
display: none;
}

The “.home” part is the part that indicates which main-title we are targeting.

Now, our next challenge will be figuring out what to write in the “.home” part. For that, we need to look at the page source. Look for the start of the <body> HTML. You will then see something like this:

page-classes

Notice those classes? Those are what we use for the selectors. We can’t just use any of those though because other pages might be using the same classes and if that’s the case, those other pages will be affected by your CSS as well. We have to find the class unique to that page and in this case it is “home”.

On this next example, the unique class which is also the page ID is “page-id-155”. When we make use of “.page-id-155”, we are basically specifying that only that page should be affected by any CSS you write next to it.

page id

However, there are cases where you might have trouble finding the unique class or the page ID is not indicated as one of the classes. In this case, you should go edit that page in the WordPress dashboard. Once you are in the edit page, check out the URL in the address bar. The number corresponding to post= is your page ID that you can then use to target that page.

post id

That’s about it. And do keep in mind that this knowledge isn’t simply limited to your page titles. Here are some more applications:

  • Hiding the widget area for some of your pages.
  • Reducing/enlarging the main content area depending on the current page.
  • Keeping font/color styling on specific pages

When you know the unique class or page ID you can target specific pages with your CSS styling now and I hope it helps you make your website become the best it can be.

Now you know how to specify CSS styling on a single WordPress page. Got questions? Head over to the comments section.

People that read this article also liked

internet-characterHow to Create a Child Theme for Storefront Storefront-Top-Bar-screenshot-sampleHow to Add a Top Bar in Storefront Theme How to Center Logo in Storefront Theme_featureHow to Center Logo in Storefront Theme email-characterHow to Optimize Email Opt-in Forms for Increased Conversions in WooCommerce

Filed Under: How-To Articles Tagged With: CSS, design tweaks, how-to, website development, WordPress

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • The Ultimate Guide on How to Set Up Shipping on Your WooCommerce Store
  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales