I am trying to add a css file to a basic html file (in /dashboard along with the css file) and it is not working:
#{
ViewBag.Title = "Index";
}
<head>
<link rel="stylesheet" href="~/Views/Dashboard/Dashboard.css" type="text/css" />
</head>
<body>
<h2 id="yes">Index</h2>
<h1>#ViewBag.test</h1>
</body>
I have tried multiple ways, including adding the file to the contents folder, and adding
#Styles.Render("~/Content/css")
Is this a syntax issue? Or a lack of understanding of how the layout system works? Still wrapping my head around asp.net and MVC...
You are not supposed to be loading CSS under the #section Scripts. There's a reason CSS is loaded first!
For example, check this reference here by Patrick Sexton: Call CSS First
Ensuring the calls for CSS
files come first helps ensure the browser gets it first. This saves
time by reducing network calls and not letting javascript activity
delay the browser from getting CSS
Real Solution - Loading your CSS First
Step #1
If you want to load different CSS files depending on the .cshtml file, and assuming they all use the same _Layout.cshtml, you can do something like this:
On your _Layout.cshtml, in between your <head> HTML tag, write this:
#RenderSection("Stylesheets", required: true)
Putting this in your <head> tag will ensure it gets loaded first!
Note: The required: true part is optional.
Step #2
Then, on your .cshtml Views, add this at the top:
#section Stylesheets {
}
And inside there, load your <link> tags.
Try this below at end of the body tag
#section Scripts
{
<link href="~/Content/yourcssname.css" rel="stylesheet" />
}
Related
I would like to stlye my .net core website. Currently there is a file called site.css with all the css for the website. However since i have multiple views i would like to be able to pick and choose what css is applied to what view. I want all my views to have the same navbar as my homepage or index view. Any suggestions?
However since i have multiple views i would like to be able to pick and choose what css is applied to what view.
You can add a Render Section control to your layout.
In your _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
#await RenderSectionAsync("css", required: false) <-- Add this
</head>
<body>
#RenderBody()
</body>
</html>
And in your view file, you can specify which css it depends on:
#section css{
<link rel="stylesheet" href="some-css.css" />
}
I want all my views to have the same navbar as my homepage or index view. Any suggestions?
Simply put the navbar in your layout view file is fine.
Apply all your css changes to shared/_layout.cshtml page.
Document Reference
Meteor compiles the css files into one css file and inserts it as first child of head element in html.
<head>
<!-- meteor inserts my concatenated css file from client folder here -->
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
</head>
I don't want to create a package for the theme assets I am using. I just want to use them directly in the html like above and I want to develop my css in the client folder with a preprocessor.
How can I get meteor to inject the generated css as last element of head rather than first which is default?
Thanks
EDIT:
To clarify further, I want meteor to inject the compiled css as shown below. I could manipulate the DOM and move that link after DOM is ready but it's a hack. Is there an API to configure this?
<head>
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
<!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>
You can use #import url; declaration on top of your css file.
main.css
#import '/sometheme/theme.css';
body {
}
This will load /public/sometheme/theme.css before your css
Just place your css theme and meteor will concatenate it into existing css. Meteor have a special way with file order:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
To achieve your goal, just make sure you the your css is deeper than the theme folder and be aware with the alphabetical ordering
Edit:
If you want to load file from /public, just place <head></head> in one of html file (e.g.: app.html) and reference your stylesheet there.
app.html:
<head>
<link href="/sometheme/theme.css" rel="stylesheet">
</head>
It will refer /public/sometheme/theme.css
I have an ASP.NET MVC 3 project with a _Layout.cshtml and the css style sheet being accessed like this:
link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css"
This is fine for most of the views in my project but there is just one view that I would like to define the style sheet independently and in the view itself. Specifically in the head of the view. This means that the view would have to have it's own head and body tags independently of the _Layout.cshtml file.
Is this possible? If so can someone help me get started with it?
EDIT:
What I'm trying to do is put a style sheet in the head of this one view that would override the CSS from the _Layout.cshtml.
You could define an optional Razor Section in the head tag of your layout. Place it after your main stylesheet, and then it can be used in any views using the layout to bring in additional stylesheets that contain override rules.
_Layout.cshtml
<head>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css">
#RenderSection("CssOverrides", false)
</head>
View.cshtml
#section CssOverrides {
<link href="../../Content/themes/base/jquery.ui.override.css" rel="Stylesheet" type="text/css">
<!-- additional stylesheets -->
}
Suppose if I have a website http://somethingsomething.com
And I have 3 css file
common.css
homepage.css
inner-pages.css
homepage.css is required for homepage and common.css is for whole site but inner-pages.css is for other pages only and it's big file. Is it possible to load inner-pages.css after homepage data download. In the same way like we use async attribute for script tag. As far as I know async attribute is only for JS not CSS
my one friend suggested to use requirejs for this http://requirejs.org/docs/faq-advanced.html#css but I don't want to use javascript to load css and even I would think upon JS way i would not use require.js just for this. So if it is not possible with CSS only. what would be the simple JS way to do this?
Async CSS with media="bogus" and a <link> at the foot
Say we've got our HTML structured like this:
<head>
<!-- unimportant nonsense -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- other unimportant nonsense, such as content -->
<link rel="stylesheet" href="style.css">
</body>
More at http://codepen.io/Tigt/post/async-css-without-javascript
You can place an iframe in your page pointing to some dummy page that serves the CSS, that should serve the CSS file async.
<iframe src="loadcss.html"></iframe>
Do note it seems pretty trivial, this causes a minimum of 2 css file transfers per page and 3 css file transfers per child page (if it isn't cached). If you were to minify the css you would only have 1 transfer regardless.
try
$.ajax({
url:'/css.css',
type:'get',
success:function(css){
$('html').append('<style>'+css+'</style>');
}
});
or
function getCss(url){
$('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}
getCss('/css.css');
ok sorry I didn't see you don't want to use javascript
how about using css #import:
<style>
#import url('/style1.css');
#import url('/style2.css');
</style>
Include your CSS in the <body> instead of <head> ... "it seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets." and add a condition for IE:
head
<head>
<!--[if IE]>
<link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
<![endif]-->
</head>
body
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload>
<!-- <![endif]-->
</body>
by Taylor Hunt #codepen.io
As suggested Require is not necessary for loading CSS assets. If you want to get your larger payloads asynchronously without relying on JavaScript you should be looking at leveraging HTTP/2 Server Push to deliver your non-critical style assets. And here's a performance technique you may find useful for delivering critical CSS payloads for browsers which works well even today.
Finally, if you are optimizing your pages for performance and don't want to pull in heavy or complicated tools like Require I've an alternative minimal asset loader you may use if you like.
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
Why have both? Please simplify you answer, don't go so technical.
<style type="text/css"> is when you want to have style rules embedded within the page.
<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
CSS has the #import directive, if you use <style>#import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between #import and link in CSS ).
Method 1 (using <style type="text/css">)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
What is better?
In my opinion Method 2.
Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.
The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
The first is used to insert css code directly in your html files, while the second is calling an external css file.