Title: Need  CSS for each page using custom fields
Last modified: August 20, 2016

---

# Need CSS for each page using custom fields

 *  Resolved [rbseid](https://wordpress.org/support/users/rbseid/)
 * (@rbseid)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/)
 * I want each page to have a different color border-bottom under the title. At 
   first I made an external stylesheet for each page but this seemed like overkill.
   I then embedded an inline style for page in the page editor but heard this is
   not very clean either.
    I found a solution at [http://www.wprecipes.com/how-to-embed-css-in-your-posts-with-a-custom-field](http://www.wprecipes.com/how-to-embed-css-in-your-posts-with-a-custom-field)
   which said place this code in header.php between head tags:
 *     ```
       <?php if (is_single()) {
           $css = get_post_meta($post->ID, 'css', true);
           if (!empty($css)) { ?>
               <style type="text/css">
               <?php echo $css; ?>
               </style>
           <?php }
       } ?>
       ```
   
 * and I wrote a custom field called css with a value of:
 *     ```
       #content_container h2{
         border-bottom: solid 3px  #ff5523;
       }
       ```
   
 * but this didn’t work.
 * Anyone know what I’m doing wrong and are custom fields the way to go?

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155746)
 * If your site has the body class applied, each page already has its own body class.
   Look at your body tag in the source of a page to see if there’s a different class
   on it for each page. (If it’s not there, I can explain how to add it.) You can
   then define the border colour you want for each page’s title in your style.css
   file. I don’t think you need custom fields if I’m understanding correctly what
   you’re trying to do – and you definitely don’t need to create extra stylesheets.
 * Can you provide a link to the site in question? It’ll be much easier to help 
   you more concretely. 🙂
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155753)
 * By the way, the article about custom fields was written before WordPress had 
   a lot of new classes built in by default – that technique is no longer needed.
 *  Thread Starter [rbseid](https://wordpress.org/support/users/rbseid/)
 * (@rbseid)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155780)
 * Zoonini, Thanks for your help! I checked and each page does have a unique body
   class. The class is very long: ‘”page page-id-463 page-template page-template-
   portfolio-php logged-in admin-bar”‘
 * Do I use the entire class name in my style sheet?
    Here’s a link to the site:
   [http://www.silkmountaindesign.com](http://www.silkmountaindesign.com)
 * Also, on my local server I tried embedding CSS for each page in the page editor
   and this also worked. Is their any advantage of one method over the other regarding
   page load times etc?
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155783)
 * So what you need to do in your CSS is target the title style to each page. Example
   for the page above, the unique class for the page is:
 * **page-id-463**
 * So if you wanted to target the h2 tags on that page, you would add something 
   like this to style.css:
 *     ```
       .page-id-463 h2 {
         border-bottom: solid 3px  #ff5523;
       }
       ```
   
 * > Also, on my local server I tried embedding CSS for each page in the page editor
   > and this also worked. Is their any advantage of one method over the other regarding
   > page load times etc?
 * It’s always best to separate form from content as a basic web design best practice.
   Plus, it’s much easier to edit a single file (style.css) to control the look 
   and feel of your site, rather than having to fiddle with a zillion pages in the
   WP admin area.
 * Let me know how it goes!
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155785)
 * p.s. I just noticed your tagline is also using the h2 class – watch out. You 
   may need to modify your CSS accordingly to use your post class instead of the
   page class, i.e. something like:
 *     ```
       .post-146 h2 {
       border-bottom: solid 3px #ff5523;
       }
       ```
   
 *  Thread Starter [rbseid](https://wordpress.org/support/users/rbseid/)
 * (@rbseid)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155793)
 * Thanks for your help!
    It worked out great.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155794)
 * Awesome, glad to hear it! And thanks for your nice email – kind thank-yous like
   yours help to make up for all the people who never bother. 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Need CSS for each page using custom fields’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [custom fields](https://wordpress.org/support/topic-tag/custom-fields/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 7 replies
 * 2 participants
 * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * Last activity: [14 years, 10 months ago](https://wordpress.org/support/topic/need-css-for-each-page-using-custom-fields/#post-2155794)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics