Creating Customizations For Each Page or Post in WordPress

The more in depth customization tutorial is located here: Customize CSS to Style your Site.
The below is the shorter tutorial.

Sometimes I just want to make a change to a specific page or post.

Here are some examples on how to change for instance the backgrounds of the body area, header, content and footer inside any WordPress page, post or category.

To find the code for a page or post hover the mouse over the title in the All Pages or Posts list and notice at the
bottom of a browser on the left side in the status bar the link that is seen and the number mentioned.
OR right click in Chrome or Firefox and select Inspect Element and check the top code and notice the id mentioned.

For instance I went to the All Pages Screen and moved my mouse over the About page I used.
I could see the link in the bottom left of my browser and the number mentioned was 6.

To show the color red in the header of the About page. I would add 
.page-id-6 #header {
   background: red;
}

If it was a post then I would change to:
 .post-id-6 #header {
    background: red;
 }

If it was a category I would then change to:
  .category-id-6 #header {
    background: red;
  }

Body tag has another structure:
body.page-id-8 {
    background: red;
}

.page-id-18 #content h1, 
.page-id-20 #content h1 { 
      font-family: times, helvetica !important; 
}

For the home page there are two options: .home or one can use the .page-id-number.
.home #header {
    background: red;
}

For the above two pages I want to use another font for the h1 tag.
Inside the content div area for heading 1 I will for these two pages use the font times or helvetica
and to make really sure that it works I also add the !important tag.

Similar can be done with other Div tags. Here are some of them:

body – full background area of the page. NB! Remember that the body tags has another structure. Example: body.page-id-8.
#header – Inside header area where the banner/logo and main menu are.
#site-logo – Use this div tag and replace your logo.
#headerwrap – Area behind the header (Stretches across the screen left to right).

body – Area outside of the content area (Stretches across the screen left to right).
#layout – Content and sidebar area.
#content – Inside the content area.
#sidebar – Inside the sidebar area.

#footer – Inside the footer area.
#footerwrap – Area behind the footer (Stretches across the screen left to right).

Here is another example to making a change to multiple pages:

.page-id-6  #header,
.page-id-10 #header,
.page-id-24 #header {
    height: 190px;
    margin-top: -50px;
    background: #ccc; /* sand color - other color #fcfcfc white */
    border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    -moz-border-radius: 0.8em;
 }