How to Style in Drupal Please, I need help. 

I have a site design that has a totally different home page than the rest of the pages. The interior pages might present problems too, I don't know...everything in Drupal seems like a mighty struggle that takes days or weeks to understand.

At any rate, i'm using a zen sub-theme. I created all my blocks from scratch in the admin interface and then styled them in _custom.scss (imported to styles.scss) such that they all had styles to set them up exactly as I intended...It took awhile but I finally made it look like I wanted it to look.

Then I thought I should try using zen grids to do the layout since it was included in zen package and thought I would be able to utilize all the benefits of that system by doing so. So I re-did the entire home page by editing the responsive.scss in /layouts folder specifically for my home page layout with the blocks all over the place. But now I realize this won't work because I need to have a different layout on the other pages...possibly many different layouts...so maybe zen grids won't work for me, but I don't know that for a fact...I just don't know.

So I looked into creating a template.php function to call a different css file for the home page but after reading a bunch of articles on this site and other sites I couldn't get that to work either. I tried calling a different stylesheet if it's the front page from my .info file but couldn't get that to work either...maybe I don't know how to call the 'home page' correctly.

Does anyone have any tips for moving forward with what should be a fairly simple design using the zen sub-theme and about 6-7 other sites pages (including one custom module which is almost done and some views pages)?
The problem you are facing is that Drupal is so versatile that you may feel swamped by the many ways to accomplish this goal.

The things you need to do:


provide the correct body class
override the correct theme template at the appropriate context
inject the correct style sheet at the appropriate context (optional)


This is how you do it:

You must make sure that you have a body class that identifies the page you want to CSS style. Front page already has 'front' class. You can inject body class via template_preprocess_html (example here). Your CSS can then target the body class in the same style sheet (no need for separate style sheet). 

To provide separate style sheets you need to inject different style sheet for different contexts. When using the info file the style sheet is always loaded. To do it conditionally, you will need to use drupal_add_css, and as you wish to do it at a page level you need to add that function probably in template_preprocess_html. You will need to detect the page that you are on by inspecting the url, then load the CSS file that you need. Example here: Adding style sheets

Style sheets can also be removed/altered via hook_css_alter

To target different layouts for different pages, look at Drupal 7 Template (Theme Hook) Suggestions. You can use the available theme suggestions, and you can also add your own (by ading to the theme_hook_suggestions key in an appropriate preprocess_function.)

If some of this sounds too complicated, just go with the Context module. That module has a slew of plugins that can do everything I described above. There are many tutorials, as in Drupal 7 Context module - Daily Dose of Drupal episode 72.

There are also many video tutorials available on theming with Drupal Zen and Zen Grids