Need to add default asc & desc arrows to gridview columns

Hi,

I am a newbie with CSS. I got a gridview working with sorting on all my columns. I am trying to add the up and down arrows to each gridview column. When the user clicks on the column, the up arrow is enabled, vice versa when clicked again with the down arrow. The non-clicked columns will have both diabled arrows. So far, I have not gotten the arrows to appear in the gridview header cells. I am trying to do this CSS.  Any help is greatly appreciated.

I got the following two lines inside my gridview markup section.

              <SortedAscendingHeaderStyle CssClass="sorting" />
                <SortedDescendingHeaderStyle CssClass="sorting" />\

I got the following inside my style section:

  <style type="text/css">

.sorting_asc {
 background: url('../../media/images/sort_asc.png') no-repeat center right;
}

.sorting_desc {
 background: url('../../Content/media/images/sort_desc.png') no-repeat center right;
}

.sorting {
 background: url('../../Content/media/images/sort_both.png') no-repeat center right;
}

.sorting_asc_disabled {
 background: url('../../Content/media/images/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
 background: url('../../Content/media/images/sort_desc_disabled.png') no-repeat center right;
}
 

table.display thead th:active,
table.display thead td:active {
 outline: none;
}

    </style>