Link and Style tag get XHTML warning in cshtml

I tried using

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

but got a warning

Validation (XHTML 1.0 Transitional): Element 'link' cannot be 
nested within element 'link'.

So I tried

<style></style>

and got a very similar warning

"Validation (XHTML 1.0 Transitional): Element 'style' cannot be 
nested within element 'style'."

How can I conform to this validation?

css
razor

2012-04-04 19:55
by Travis J

@alirizaadiyahsi - that link does provide a good explanation about why this happens. I will post an answer which shows how to dynamically append the link tag to the head in a few minutes - Travis J 2012-04-04 20:07

Not sure if this will help with the warning, but you have a quote problem in your first example. You can't put quotes in a quoted attribute value - Mr Lister 2012-04-04 20:28

@MrLister - Thank you for the suggestion, but the razor engine will actually compile that into a string which will sit inside the outside quotes - Travis J 2012-04-04 20:43

As Alirizaadiyahsi linked in a comment (although it has since been removed) the cause of this warning is that <link> and <style> tags may only go in the head of the document.

This is an issue for me because I want to have custom styles for certain areas in my asp.net mvc 3 site. To solve the problem, I did this:

<script type="text/javascript">
 var x = document.createElement("link");
 x.setAttribute("href",'@(Url.Content("~/Content/Extras.css"))');
 x.setAttribute("rel", "stylesheet");
 x.setAttribute("type", "text/css");
 $('head')[0].appendChild(x);
</script>

2012-04-04 20:24
by Travis J