If we intend to tweak existing themes, it is strongly suggested not to touch the original core theme files. Instead just copy one of existing themes and put folders in
/sites/all/themes/[HERE].

Example if we like the bluemarine theme but wants to tweak the theme,
COPY /public_html/themes/bluemarine TO
/public_html/sites/all/themes/[HERE] and rename the folder.

There are usually 2 basic files to tweak our themes. The files are:

1)style.css
2)page.tpl.php

Style.css controls things like:-
background color
borders
thickness
font type and size
margins, etc
for the whole website and also for separate 'parts' like sitename, footer, sidebars, main areas, etc.

page.tpl.php is like the 'frame for parts (see above)' which 'holds it' all together.
For example, if we wish to include like a piece of Google's adsense code just above the footer line, we look for the 'frame' and the footer part, and place the code above it.

Main Parts of Style.css

Let's take example theme pushbutton

Go to 'http://my_domain.com/cpanel

Login username and password

Select File Manager > Go > public_html > sites > all > Create new folder > [Folder name] themes

Select > public_html > themes > pushbutton > Copy > /sites/all/themes

Select > public_html > sites > all > themes > pushbutton > [directly on file] style.css.

Simple precautionary steps for beginners:-
1) Backup style.css just in case! Select [right-hand frame] Show file. Hightlight all, right-click Copy/Paste into any notepad/text editor in your harddisk - name it style.css.
If there's any problem with the existing file while tweaking it, just rename this file to something else and upload the style.css from your harddisk.

2) Highlight (or make some marks) for those tweaks we put in ourselves. Say we need to test different colors - we have to go back to the style.css a few times, looking for that same line we amended and change the code for different colors. But scrolling and looking for that line can be difficult.

So make some obvious marks/highlights but be sure to include the comments markers, begin with /* and end with */ example:-
/* CHANGED FONT-SIZE AND BACKGROUND COLOR BELOW ######## */

Typical areas in style.css includes:

body, block, sidebar-left, sidebar-right, main, and content.

The main is the center area where the content displays.

We can change color, font, size, add border, margins: by manipulating the attributes within the "{xxxxx...}" braces.

A little example will make this clearer:

Original code in style.css has a line like this:

#sidebar-left {
border-right: 3px solid #f5f5f5;
}

The "{ }" braces describe the start/end attributes of sidebar-left. In this case it is attribute "border".

Don't forget the ";" semicolon at end.

"3px" is the size of border - change and try.

"#f5f5f5" is the hexadecimal color code. You can get more codes by googling "hexadecimal color chart".

We can add more border like inserting another line like this eg.
"border-bottom: 3px solid #ff3333; " (or top/left)

We can remove the border by commenting out the line with /* words to comment out end with */. For example like this:

#sidebar-left {
/* border-right: 3px solid #f5f5f5; */
}

The right border of sidebar-left will be taken out.

To put back the border, just uncomment or take out the "/*" and "*/".