How to apply StyleSheet to MVC3 website?

Question

I need to make some mock up screen shots useing a CSS Stylesheet, but i have no idea how to apply it to my MVC3 application.

When i replace the previous style sheet, my page has no style.

<link href="@Url.Content("~/Content/insstyle.css")" rel="stylesheet" type="text/css" /> 

And if i put it in a new line after the style changes a bit but its nothing good its hardly changes and i know this stylesheet is huge and looks nice.

<link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/insstyle.css")" rel="stylesheet" type="text/css" /> 

This is the method i looked up to merge the two style sheets.

Questions ...

1) Am i merging the style sheets correctly, if not how do i merge two different style sheets correctly?

2) With a MVC3 application can i remove the original style sheet? can i only have my new style sheet as the main style sheet?

Answer 1

1. You are not "merging" the stylesheet's but loading them up separately and applying them to the website. If you were to merge them, then you should put them into one file so that your website is only loading up 1 resource file. There is no harm in having the two though, but sometimes it is better to have 1 css file rather than multiple. See here for more info Single huge .css file vs. multiple smaller specific .css files?

2. You can remove the original stylesheet, but depending on what you have in your new one, your site will look different.

If your page has no style when using the new stylesheet, then I suspect that you are not applying the correct styles to the correct elements. If you post your css code from the new style, then we can help you out more. Alternatively, you may not have created the new CSS file in the correct location? It should be in the Content folder /Content/insstyle.css. Also check for spelling of the file etc...