[Drupal] How to theme Drupal

A Drupal theme is just a few PHP files, a CSS file, and an info file. Place your theme folder in the location sites/all/themes/themename of your project folder. Theme folder contains images, stylesheets, js files and templates. There are several files associated with a Drupal theme. Each file must confirm to Drupal naming and content standards

Every Drupal theme must have a .info file, and the file name must be the same as the name of the theme. Within the info file, you will define attributes of your theme including the name of the theme, version of Drupal core that the theme supports (e.g., 7.x), name and location for all the CSS files that are required by the theme, name and location of the JavaScript files used by the theme, and names of the regions that are used on the theme.

CSS

All of your sites’ CSS markup should be stored in one or more CSS files in your theme directory. A typical Drupal theme will have at minimum a style.css file. You may choose to call the file something else, and you can have multiple CSS files if you wish.

Templates

page.tpl.php - Drupal theme must have a page.tpl.php file. The file contains a mixture of HTML and PHP code, and defines the overall layout and structure of a page on your website. This file also brings other key Drupal core components into your theme through a number of include files.

node.tpl.php file is composed of a combination of HTML and PHP snippets. The contents of the file define how nodes are laid out when displayed on your site; for example, the placement of the title, the author information, the taxonomy terms, the body, and pictures included with the node.