Adding Custom CSS and JS on SharePoint MasterPage

I tend to come across this at times and I always lookup on the internet on how to do this. So I'm writing this blog post so that I can refer back to this next time:

Here is how we can add a custom CSS on the SharePoint 2010 MasterPage:

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/HREuHome.css %>" After="corev4.css" runat="server"/>

The above script could be added right above the closing HEAD tag </head>

Here is how we can add a custom javascript file and its better to add it right inside the <form> tag:

<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
  <Scripts>
  <asp:ScriptReference Path="<%$SPUrl:~SiteCollection/Style Library/footer.js%>"></asp:ScriptReference>
  </Scripts>
 </asp:ScriptManager>

ScriptManager may be present already and we just need to add in the Script References.