Very strange behaviour with form based login and css file

I am using form-based authentication in my JSF webapp and everything was working fine. Until I wanted to enhance the login page to look like the rest of the application - it's only html code, no JSF or JSP tags. However the problem is with the css file and it has 2 levels:
a)the css classes are not loaded at all - everything is plain white with black text
b)when I provide my credentials and hit enter or press the submit button, the pages goes to my css file!!! The url path changes to the css file and I see the file content with classes etc.

Here is my login page:

I wanted to edit the classes for input methods I don't know if this causes the problem (however since the classes are not loaded at all I don't think so):

I tried changing the login file extension from loginpage.jsp to loginpage.html but this did not help. If I delete the link to the css file from page header problem 2 disappears (obviously problem 1 remains). I l have also tried to put all css files in the header <style> tag but then after login, the page redirects to of the pictures used in the css as a background-image. How can I load the css files to the login page?

The solution is to change the protected url pattern from /* to i.e. *.faces

There's a chicken-and-egg problem when you attempt to access protected JavaScript and CSS resources from a login page. Since they're protected, you can't get them until you're logged in. But if the login page itself requests protected resources, you're not yet logged in. Eek.