@ch3ss, each page or post is given a unique, numeric ID called a post ID. It’s also called a page ID, because pages are also considered posts. For your site, since you don’t have pretty permalinks enabled, you can see what the post ID is by looking at the address of each page. For example, the address of your Menu page is this:
https://www.lighthouserestaurantanddockbar.com/?page_id=81
So the post ID (i.e., page ID) of the Menu page is 81. If you go to your Happy Hour page, you’ll see that the post ID is 126.
A properly created WordPress theme will assign a class name to the body element that is based on that post ID. For pages, the class name will be in the form page-id-#</strong, while for posts, the class name will be postid-#, where # would be the numeric post ID.
So to create CSS that targets just a specific page, you would use that class name at the beginning of your CSS selectors. That is what @salsaturation was alluding to in the first rule that he posted.
The current rule that sets the color of the main area (which has a class of wrapper looks like this:
.wrapper {
background-color: #EED6AF;
}
To set the background color of the Menu page, then, you would add an overriding rule (using a CSS plugin, as @salsaturation mentioned; I like Custom CSS Manager also) that looks like this:
.page-id-81 .wrapper {
background-color: #EED6AF;
}
Technically, you don’t need to include the body element in the selector, you want to use as little “weight” as necessary. The #EED6AF is the current color value in RGB (Red, Green, Blue) hex notation. There’s a good color picker here that will give you the hex code for whatever color you want.
Then to set the background of just the Happy Hour page, you add another rule that looks like this:
.page-id-126 .wrapper {
background-color: #CCFFFF;
}
That value is a light cyan color.
So this information should allow you to set the background color of any of your pages by adding another CSS rule using the page’s post/page ID.
