Add custom CSS styles to XSLT List View webpart

To add custom css styles to xslt list view webpart follow these steps

1. Create a new view on the list or document library
2. Edit the view in sharepoint designer and generate custom xslt styles for the entire view
• Open the view in Sharepoint designer
• Click on Design tab
• Click on Customize Entire View option

1. Find this code 
<xsl:template match="View" mode="footer">
  </xsl:template>




Replace it with your styles embedded in it
e.g.


<xsl:template match="View" mode="footer">
<style type="text/css">
.ms-bodyareaframe {
padding: 0px;
}
.ms-vh A:link, .ms-vb A:link, .ms-vb2, .ms-vh2 A, Nobr SPAN A:link, div.noindex table.ms-listviewtable tr.ms-viewheadertr th.ms-vh2 div.ms-vh-div,
table.s4-wpTopTable div.noindex tr.ms-viewheadertr th.ms-vh2 div.ms-vh-div, td.ms-gb
{
color: green;
text-decoration: none;
font-family:&quot;Segoe UI&quot;;
font-size:8pt;
font-weight: normal;
}
.ms-viewheadertr, .ms-vhltr
{
background-color:silver;
}
</style> </xsl:template>




Save and close Sharepoint designer 
Refresh the view in browser