There are many great Drupal themes and modules available, but it is inevitable that you will want to override some portions of what is available. This can be done by modifying the core, modules, and/or themes, but this should be avoided at all costs. A much better solution is to create a single, site-specific module, that can be used for overriding various functions in other people's code, and to include a custom css file for your site. You can then modify these items to your heart's content to get the desired outcome for your site. I will use this site's code and css as an example:
Step 1: Create a new folder under sites/default/modules called sitehelper_mstevetodd. You could replace default with yoursite if you have multiple sites.
Step 2: Create 3 text files in this folder, using your site name instead of mstevetodd in the file names, and in several places in the code (click on each to see/download the code):
- sitehelper_mstevetodd.info (used to define the module to Drupal so it shows up in the available module list)
- sitehelper_mstevetodd.module (the actual code)
- sitehelper_mstevetodd.css (css file, loaded by .module code)
Step 3: In Drupal, Site Building, Modules, List, find and enable your new module.
Step 4: Tweak theme css by using FireBug (for FireFox) or FireBugLite (for IE and Chrome) to find css selectors, then making changes/additions to sitehelper_mstevetodd.css file. If you use an ftp or scp-enable editor (like PSPad), you can actually make the changes one at a time, on your site, and see the effect by refreshing the page in your browser. This is highly-recommended, as css is very unforgiving, and the immediate feedback is priceless.
As an example, I wanted more visual separation between "nodes" on the front page than the Plutado Green theme provided. I clicked the Inspect button in FireBug, then clicked on one of the node titles. FireBug showed that this element was an "H2", and a child of a "div" with class "node". I added a section to my .css file for "div.node>h2" and specified "border-bottom" as a solid LightGrey line. I also added a "padding-top" to make a bit more room. Small tweaks like this is where making live changes to the .css file pays off for me, as it can be a very iterative process.
If you add custom graphics files, you can place them in this same folder, and refer to them as URL(filename.png). No path is needed.
Note: due to the "cascading" nature of css, some of your css overrides might be "ignored", because the theme has an identical rule. In this case, you can add an !important" flag to your css directive, and it will take precedence over other rules at the same level. You can see several examples of this in my .css file.