How to overwrite styles of the core.css stylesheet

  • Article

With the default behavior of a SharePoint page the core.css is rendered always as the last stylesheet. This is implemented using the control:

<Sharepoint:CssLink runat="server"/>

Using this control the style sheets will render like this:

<link rel="stylesheet" type="text/css" href="https://blogs.msdn.com/_layouts/1033/styles/controls.css?rev=EhwiQKSLiI%2F4dGDs6DyUdQ%3D%3D" mce_href="https://blogs.msdn.com/_layouts/1033/styles/controls.css?rev=EhwiQKSLiI%2F4dGDs6DyUdQ%3D%3D"/>
<link rel="stylesheet" type="text/css" href="https://blogs.msdn.com/Style%20Library/en-US/Core%20Styles/pageLayouts.css" mce_href="https://blogs.msdn.com/Style%20Library/en-US/Core%20Styles/pageLayouts.css"/>
<link rel="stylesheet" type="text/css" href="https://blogs.msdn.com/_layouts/1033/styles/core.css?rev=baCjtd5mQmxwkFlwbFgfgQ%3D%3D"/>

This is an issue when you're trying to overwrite some styles which are defined in this core.css file.

To fix this you can either implement a custom component which is derived from CssLink (as described here) or use the "AdditionalPageHead" placeholder:

<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">

Using this placeholder you can easily overwrite the default style either inline or in a separate stylesheet.

<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">
<style type="text/css">
.ms-sitemapdirectional,.ms-sitemapdirectional a{
unicode-bidi:embed;
background:#FF0000;
}
</style>
</asp:ContentPlaceHolder>