How to load .css file only on your custom 404 Not Found page?

Question

Following this guide I created a custom page--404.tpl.php page for my custom 404 Not found page. We put this in template.php:

function themename_preprocess_page(&$vars) {    
 // Adds a Custom 404 page    
 $header = drupal_get_http_header("status");    
 if($header == "404 Not Found") {        
   $vars['theme_hook_suggestions'][] = 'page__404';    
 }    
}

Now I need to load CSS only when that page is loaded. This here only shows how to load it in either node or front page, but not custom 404 page.

This does not work:

    $header = drupal_get_http_header("status");
    if($header == "404 Not Found") {
      $vars['theme_hook_suggestions'][] = 'page__404';
      drupal_add_css(drupal_get_path('theme', 'dev') . "css/404/bootstrap.css");
      drupal_add_css(drupal_get_path('theme', 'dev') . "css/404/custom-style.css");
    }

}

Answer 1

As mentioned by @Yogesh, you should use drupal_add_css. Your code cannot work because you have missing slash. Please use below code.

function themename_preprocess_page(&$vars) {    
 // Adds a Custom 404 page    
 $header = drupal_get_http_header("status");    
 if($header == "404 Not Found") {        
   $vars['theme_hook_suggestions'][] = 'page__404';
   drupal_add_css(drupal_get_path('theme', 'dev') . "/css/404/bootstrap.css");
   drupal_add_css(drupal_get_path('theme', 'dev') . "/css/404/custom-style.css");
 }    
}

Answer 2

Another option could be to use CSS Injector. It would allow you to load CSS based upon the path. Might be a simpler solution but may not do exactly what you require.