What the best possible way to include multiple CSS in Sharepoint .master. my approch:
Site sitting> Master Page> Alternate CSS URL
I tried this before register CSS directly in master page, but experienced a crashed page.
Then I try to use @import in css, also SharePoint doesn't recognized it.
One more thing, in SharePoint there is some limitation of css load (I think 24).
Any help?
iv written about the @import method here:
@import, not working in css of sharepoint 2010
i think its 25 to a page.... but you can get far more with a trick i did in 2007! also like to note that the import works for css better when the css file is within the hive folder and not within sharepoint like within styleLibrary.
or manual method within masterpage!
2010
<SharePoint:CssRegistration ID="CssRegistration1" name="/_layouts/customcssfolder/mycss.css" After="corev4.css" runat="server"/>
2013
<SharePoint:CssRegistration ID="CssRegistration1" name="/_layouts/customcssfolder/mycss.css" After="corev5.css" runat="server"/>
want more than one css registration than you increment the number within the id
<SharePoint:CssRegistration ID="CssRegistration1" name="/_layouts/customcssfolder/mycss1.css" After="corev5.css" runat="server"/>
<SharePoint:CssRegistration ID="CssRegistration2" name="/_layouts/customcssfolder/mycss2.css" After="corev5.css" runat="server"/>
<SharePoint:CssRegistration ID="CssRegistration3" name="/_layouts/customcssfolder/mycss3.css" After="corev5.css" runat="server"/>
the code above like most other languages is procedural, so if you want to overwrite some default css with your custom css than you add it last,
CssRegistration1 is my default css:
<SharePoint:CssRegistration ID="CssRegistration1" name="/_layouts/customcssfolder/mycss1.css" After="corev5.css" runat="server"/>
code then moves onto CssRegistration2 that overwrites CssRegistration1 if it contains the same css class or id name.
<SharePoint:CssRegistration ID="CssRegistration2" name="/_layouts/customcssfolder/mycss2.css" After="corev5.css" runat="server"/>
there are exceptions to this like using the !important method in CssRegistration1 for one of my classes that forces that style regardless of the same class in CssRegistration2. but if both have it than obviously it takes the last one!
more on cssRegistration:
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.cssregistration.aspx
It's possible to use plain link tag in your master page header if you can't use <SharePoint:CSSRegistration ... />, as in the case where you want to use the media attribute.
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)" href="Style/default.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)" href="Style/ResponsiveMaster.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 1023px)" href="Style/ResponsiveMasterTablet.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 640px)" href="Style/ResponsiveMasterMobile.css" />
