Customizing 20-12 Theme

Done. style.css looks like this:

/*
 Theme Name:   Twenty Twelve Child
 Description:  Twenty Twelve Child Theme
 Template:     twentytwelve
*/

@import url("../twentytwelve/style.css");

/* =Theme customization starts here --------- */

#holy-islam {
    margin: 12px auto 0;
    font-size: 10px;
    font-weight: bold;
    text-align: center
}
#page {
    margin-top: 20px;
}
.site-header h1, .site-header h2, .main-navigation div.nav-menu > ul {
    text-align: center;
}
.main-navigation li {
    margin: 0 1.5rem 0 1.5rem;
}
.entry-header .entry-title a {
    color: #ff0000;
}

.site-content article {
    margin-bottom: 2rem;
}
#colophon {
    margin-top: 0;
}

I want to increase font for h1 and bottom space still remaining.

Change the .entry-header .entry-title a so it looks like this:

.entry-header .entry-title a, .entry-title {
    color: #ff0000;
}

You can change the color code to your liking. A good color selector can be found here.

h1, h1 a {
    font-size: 50px;
}

Change the size to what looks good for you.

Change the #page so it looks like this.

#page {
    margin-top: 20px;
    margin-bottom: 20px;
}

What if I just want to change the size of Site Title and not Post Titles? And also the tagline font should be more.

change the size of Site Title and not Post Titles?

change
.entry-header .entry-title a
to
.site-title a

Good. Now I want to format each area of the page to my needs, could you please tell me the Selector of each area, for example, I want to change the background color of page (not #page) but the main background, so what would be the selector for:
1. main bg page.
2. navigation bar (so e.g I want to change bg of navigation)
3. sidebar
4. title
5. tagine
6. The content of the post itself., etc…

1. body.custom-background
2. .nav-menu
3. #secondary
4. .site-title
5. .site-description
6. #primary

Okay I will try that, now
1. The “leave a reply / 2 comments’ link would be placed on the right side of the ‘This entry was posted in…’ line.

2. Insert a line after Post Title.

1. body.custom-background

How to use this?

body.custom-background {
    background-color: red;
}

.site-description {
      font-size: 30px;
}

Not working !

also:

body.custom-background {
    background-color: 9cac87;
}

Not working!

don’t forget # before color codes.

body.custom-background {
    background-color: #9cac87;
}

don’t forget # before color codes.

Still not working.

Try .site-header h2 instead of .site-description.