How to style every element in a theme? I created a theme from scratch and I didnt make a lot of changes to the theme template files which listed as below: 


  
  block.tpl.php
  html.tpl.php
  node.tpl.php
  node--article.tpl.php
  page.tpl.php
  page--front.tpl.php
  views-view.tpl.php
  views-view-fields.tpl.php
  


A lot of styling that I made with HTML/CSS was missed up when I start creating contents and didn't appear as I expected. 

Below code is used for getting the whole content, but how am I able to break it into artic title, article meta, article content body? 

print render($content);


So I would like to know how am I able to edit the PHP files and giving styles to each element? Also some of elements that are specific for home page and category pages are shown into the article pages, so how shall I fix that too?

EDIT:
here is title's code from page.tpl.php:

&lt;?php print render($title_prefix); ?&gt;
&lt;?php if ($title): ?&gt;&lt;h1 class="pageTitle"&gt;&lt;?php print $title; ?&gt;&lt;/h1&gt;&lt;?php endif; ?&gt;
&lt;?php print render($title_suffix); ?&gt;


and that's the title code from node--article.tpl.php:

&lt;?php print render($title_prefix); ?&gt;
&lt;?php if (!$page): ?&gt;
&lt;h3 class="postTitle"&gt;&lt;a href="&lt;?php print $node_url; ?&gt;"&gt;&lt;?php print $title; ?&gt;&lt;/a&gt;&lt;/h3&gt;
&lt;?php endif; ?&gt;
&lt;?php print render($title_suffix); ?&gt;


But still all articles getting its title styling from page.tpl.php and it is staying outisde of the div that I specified for the node--article.tpl.php file. So how to fix that?
Your question is very broad. As I understand it, you want to know how the Drupal theming system works ;)

If you want to style the output of a node then have a look at the default node template in order to find out, what variables are available.

Before creating a theme from scratch I find it highly advisable though, to look through the default core themes and some more popular contrib themes in order to understand different approaches. If it's only about some styling changes, you could also use a minimalistic theme and change it according to your needs.


  A lot of styling that I made with HTML/CSS was missed up when I start creating contents and didn't appear as I expected.


Is it possible that you use a wysiwyg editor for content editing and that this interferes with the CSS in your theme?

Edit:
The title in node--article.tpl.php will only be printed if the node is not shown as a full node (but in teaser view), e.g. no visiting /node/NID. That's controlled by the $page variable. Once again, please look at the default node template: node.tpl.php to see what variables are available and what they mean. If you visit /node/NID then the default behavior in Drupal is that the page title (the one used in page.tpl.php is set to the node title and displayed in the page template, not in the node template. You can change that off course, but you have to adapt the display logic inside the templates to match your needs. You could try something like the following.

In page.tpl.php:

&lt;?php if (!isset($node) || $node-&gt;type != 'article'): ?&gt;
    &lt;?php print render($title_prefix); ?&gt;
    &lt;?php if ($title): ?&gt;&lt;h1 class="pageTitle"&gt;&lt;?php print $title; ?&gt;&lt;/h1&gt;&lt;?php endif; ?&gt;
    &lt;?php print render($title_suffix); ?&gt;
&lt;?php endif; ?&gt;


This will print the page title only if you are not on a node page or if the node is not of type article.

In node--article.tpl.php:

&lt;?php print render($title_prefix); ?&gt;
&lt;h3 class="postTitle"&gt;&lt;a href="&lt;?php print $node_url; ?&gt;"&gt;&lt;?php print $title; ?&gt;&lt;/a&gt;&lt;/h3&gt;
&lt;?php print render($title_suffix); ?&gt;


This will always print the nodes title whenever node--article.tpl.php is used, regardless if the node is displayed as a full page or as a teaser view.