How to call CSS for home page in drupal? - drupal-7

Question

A drupal 7 based website has a custom home page. Presently, the whole drupal website has one css called
style.css
. I have written a new css just for home page. Being new to drupal, I have no idea how to specify to home page to use custom css. How to use <link rel....> kind of thing?
Thanks

Answer 1

Not sure why you would want to do this rather than just using different classes but if you really need to you can add a template.php file to your theme. In there use the hook_preprocess_page to add a new stylesheet depending on the homepage. Change YOUR_THEME to your themes name.
function YOUR_THEME_preprocess_page(&$variables) {
$homepage_id = YOUR HOMEPAGE NODE ID;
if (isset($variables['node'])) {
if ($variables['node']->nid == $homepage_id){
drupal_add_css(path_to_theme() . '/css/homepage.css');
}
}
}

Answer 2

I don't think this is the way to go.
If you customised the homepage, you could add a wrapper with a class specific for the homepage.
Then you could target that class with the style.css file and apply specific styles to the homepage.
Sincerely,
dimitril

Answer 3

Most themes have classes built into the body tag to designate "is front". That said, the proper way to do this is to open up template.php in your theme folder and add this code:
function YOURTHEME_preprocess_node(&$variables) {
$node = $variables['node'];
if (drupal_is_front_page()) {
drupal_add_css(drupal_get_path('theme', 'YOURTHEME').'/css/homepage.css', 'theme');
}
}
You'll replace YOURTHEME with your themes name.

Answer 4

Use the CSS tag .front to target only the homepage in Drupal 7. This works fine for me.
This example will target only the side bar second in the home page:
.front .region-sidebar-second{
background-color: #E9EDF2;
}