All geek questions in one place

How can I reference two stylesheets using ASP.Net MVC 3?

I would like to use Bootstrap from Twitter in my ASP.Net MVC 3 application. I downloaded bootstrap.css and added it to my project in the Content folder. I opened _Layout.cshtml and added a link to the file:

<head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

When I run the application, the stylesheet is not applied. How to link to both Site.css and bootstrap.css from my _Layout.cshtml file?

+4
source share
2 answers

I think the problem here is CSS inheritance, cascade and specificity. Remember that Twitter Bootstrap resets all styles.

'If Site.css is before loading bootstrap.css (which I did not understand at first). Reorder and both work. Weird

Actually, that makes sense. Site.css loads all the style declarations and immediately after that Bootstrap.css loads, which resets most (if not all styles), so the declarations inside Bootstrap.css will be applied. Both seem to work, probably because Bootstrap.css may not have a specific style, or Site.css has a very specific style defined using identifiers or html classes.

Reorder ( Bootstrap.css first), now you first reset all styles and then apply other styles. Since Site.css loads in the second, the styles defined in it will be applied to your site.

For your own purposes, try defining the inline style in your html document, which was defined both in "Site.css" and "Bootstrap.css", and see how the style is applied by adding / removing a style definition.

I tried to find a good helper explanation for CSS cascading, and the best graphical and simple explanation I found was this , which notes

If the selectors in the external and embedded style sheets conflict, have the same specificity, the final tie-breaker is based on the rules order: the rule announced later will win. This applies not only to the order of the rules on one sheet, but also to order that the sheets are linked, imported or embedded in the head of the (X) HTML page.

+7
source

You can copy and paste CSS from the bootstrap file into your single .css file to shorten HTTP requests.

Just put all the bootstrap code at the very beginning, and then your personal CSS, following it, for organizational purposes.

However, what you did should work. Can you post a JSFiddle example, what does your markup look like?

For more information see

http://www.w3.org/TR/html4/present/styles.html#h-14.3

-1
source

Source: https://habr.com/ru/post/1380419/

More articles:


All Articles