Restrict CSS on one page

Question

I have my site: http://theapkstore.com . On the homepage I've added a slider. And reduced the top margin of widget which says "Welcome to my site". The homepage looks fine but then when I open any one the link from the navbar then on that page I see that the top margin is acting on all the pages which causes the widget to devastate the design. Can you please tell how can I only put the top margin of that widget on the homepage?

Answer 1

You are using body_class() in your template already, so your home page has a class home on the body element.

Restrict the margin rule in your stylesheet by using that class:

.home #secondary {
    margin-top: 20px;
}

Answer 2

use a conditional template tag when you enqueue the css.

add_action( 'wp_enqueue_scripts', 'wwm_enqueue_scripts' );

function wwm_enqueue_scripts()
{

 //is_front_page() may or may not be the appropriate tag...
 //perhaps is_home() might server you better...???
 if ( is_front_page() ) {

  //put the appropriate things in these variables for your stylesheet...
  wp_enqueue_style( $handle, $src, $deps, $version, $media );
 }
//enqueue other stuff (or not)
}

see docs on conditional tags: http://codex.wordpress.org/Conditional_Tags