Choosing the default css on page load

0
votes

I have a very basic mvc application.

I have two css files viz ., Site.css and bootstrap.min.css .

I saw that in the application that the styles mentioned in the bootstrap.min.css is getting loaded which has the styles like

html,body{margin:0;padding:0;}

etc.

When I was debugging the code I got to know that both of the css files are present in the _Layout.cshtml

link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css"

My issue here is : Is it because the bootstrap.min.css file is used after Site.css in the order, the bootstrap.min.css style is getting applied?Or is there a way to select the default css available in MVC?

2
htmlcssasp.net-mvcasp.net-mvc-4

2 Answers

3
votes

Short answer, CSS styles are applied in this order - from this SO question

CSS files applying order

  1. user agent declarations (browser default style)
  2. user normal declarations
  3. author (page) normal declarations
  4. author (page) important declarations
  5. user important declarations

So specifically in your case, the bootstrap.min.csss file is being applied after the Site.css file, so takes precedence.

2
votes

Css applies always the most bottom code, means contents from bootstrap.min.css overwrite your Site.css styles if redefined.

If you're able to edit Site.css you should try the important parameter:

background-color: #000 !important;

If youre even able to change the order you should consider to do that first

This will make the rule locked (unless you use !important at the same rule later on but bootstrap work completely without !important as i know)