I have a custom css file which I've uploaded to the CSS file repository (under Shared Components).
In my page header I have (as per Using Custom Cascading Style Sheets):
<link rel="stylesheet" href="#WORKSPACE_IMAGES#mycustom.css" type="text/css">
(I've tried #APP_IMAGES# and #WORKSPACE_IMAGES# - same result.)
When the page loads, the file is loaded but some of the css rules are not applied, because... looking at the file contents in Firebug, around half the rules in the file are not present.
The CSS in the file is valid: if I simply paste the file contents into the inline CSS element of the page header, everything works fine - but I'd rather link to a file, in either the page or preferably its template.
Anybody else experienced this, or have an explanation? Or a clue as to what I may be doing wrong?
Have you check if your custom CSS is not overwritten by the Apex CSS?
Ideally your custom CSS needs to be loaded after the Apex CSS to be sure your rules are applied.
If you can't do that, you can try to add !important to your CSS file, for example
font-size: font-size:100% !important;
This is not the best but it is a solution; See Assigning property values, Cascading, and Inheritance for more details
Did you use the file before with less rules, meaning: have you updated the file and uploaded it again?
If yes - did you try deleting the cache in your browser - there is a problem with the timestamp in CSS-Files showing wether is was updated (once it was cached it will deliver the cached version until cache is cleared) - so Ctrl + F5 or delete the cache in your browser (13 Ways to Clear Your Browser's Cache - wikiHow)
Maybe this helps.