Why most developers use the
<link href="/js/jquery-ui/css/flick/jquery-ui-1.8.23.custom.css" type="text/css" />
<link href="/css/main.css" type="text/css" />
<link href="/css/table.css" type="text/css" />
instead of
<style type="text/css">
#import "/js/jquery-ui/css/flick/jquery-ui-1.8.23.custom.css";
#import "/css/main.css";
#import "/css/tables.css";
</style>
even in autogenrated code in html markup ? What is disadvantages of last method ?
Below are the few disadvantages that I know
Old browsers doesn't support #import
We can not take advantage of rel and title attributes with #import where we can take advantage of those attributes
link method is known as its simplicity
In order to learn more disadvantages with #import please go through http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
The biggest disadvantage is that CSS #import loads every CSS file seperately instead of loading files at once. This means the browser has to wait for every single imported CSS file to finish loading until it can start loading the next one. This slows down your website significantly, especially if you have a lot of imported CSS files.
Related
I have a index.html page and a style.css file.
I have a style class called .slider and a style class called .logo. Should I put both .slider and .logo inside the style.css page or should i put .slider in index.html and .logo inside .css?
im asking this because i dont know if I should put styles only related to one page inside a global style.css or should i just put it inline in the page it applies to?
Typically you embed css that is page specific. Here is how I do my css:
Global css (seperate file(s)):
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
NOTE: In today's web world we use a ton of plugins/themes and these plugins/themes tend to roll out newer versions so when you override these plugins/themes make sure you create a css file specific to that theme.
For instance,
Bootstrap 3.1
<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css">
Create this for all your bootstrap overrides so you can use the latest version when it comes out.
<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css">
Page specific css(embedded):
<head>
<!-- last element in head //-->
<style type="text/css">
.pageSpecific
{
color: red;
}
</style>
</head>
When I am in development stages or the html element does not require css classification.
Simple style format (inline):
<th style="min-width: 65px;">Column Header</th>
You may have print specific css as well:
<link href="/css/print.css" rel="stylesheet" type="text/css">
and inside this file wrap your css as such:
#media print{
<!-- print specific css here//-->
}
Keep in mind that you may want to use a css classifcation at a later date when at the time it may seem page specific. Always code for reusability!
Finally:
I like to use css minifier when I put my file(s) into production. I do the same with my javascript files using UglyJs. There is also LESS css that you can use but for now I would stick to these simple conventions or something similar.
Styles can go in one of three places.
Inline on the element itself
In the html page
In a separate file
I would suggest either putting it in a <style> tag in the <head> of your html or putting it in a separate file, either will work just as well. Obviously having the styles in a separate file means you could reuse those styles on another page if needed.
Either way, it won't make a difference. Personally, I like to have all of my CSS in one place, but you can do whatever you want. If you do put all of your CSS in one document, use comments to separate it into groups, so everything will be easy to find.
You should NEVER have inline or on-page CSS. It should all go in the stylesheet (of which you should only have one per media-type) - why? Because stylesheets are cached, and the cache is way better to hold it than the HTML-files (which may also be cached, by all means, but with dynamic content, they often load quite more often than CSS).
Second, it's a nightmare to update and change, if not everything is in one file.
Is there a effective difference between
<style type="text/css">#import url(/css/layout.css) all;</style>
and
<link href="/css/layout.css" type="text/css" static="all" rel="stylesheet">
Do browser behave different ?
What is recommended from w3c etc. ?
There are several reasons that you should use <link> instead of #import, 2 of them are:
Using #import may cause unexpected ordering in how they are downloaded.
The #import may cause blank white screen problem.
for more information about performance of websites, pls refer High Performance Web Sites.
I had the same question in mind . I had a clear idea when i went through this blog by Jennifer Kyrnin,
To know more you can have a look here
Begin with two stylesheets: simple.css (only simple rules for early browsers) modern.css (advanced CSS2, rules to override rules in simple.css)
Create a third stylesheet "import.css" containing only:
#import "modern.css";
Link the simple.css and import.css in the HEAD of the document:
<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="import.css" />
All CSS1 browsers will load simple.css and import.css, however, only modern browsers will understand the #import rule and also load modern.css. Since modern.css is linked after simple.css, its rules will override those in simple.css more easily.
Alternate Syntax
Different versions of the import rule have varying levels of support from older browsers.
#import "style.css"; /* hidden from nearly all v4 browsers */
#import url('style.css'); /* IE4 can understand, but not NN4 */
...
We should not put #import at the bottom of simple.css....
According to the CSS specs, #import rules must precede any other CSS rules in a stylesheet, so this creates the need to place it in its own stylesheet for these purposes.
What's the best method to include CSS in page and why?
for eg.:
<style type="text/css">
#import "style.css" screen, tv;
#import "print.css" print;
#import "iphone.css" iphone;
</style>
or
<LINK rel="stylesheet" media="screen" href="style.css" type="text/css" />
<LINK rel="stylesheet" media="print" href="print.css" type="text/css" />
<LINK rel="stylesheet" media="iphone" href="iphone.css" type="text/css" />
From what i know #import doesn't work in ancient browsers, this might be a advantage because these browsers will only show text instead of a unreadable CSS mess (when using link).
It has been discussed many times, you can read more here:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Difference between #import and link in CSS
http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
to mention some...
Personally I never use #import as for the performance impact.
Realistically both accomplish the same goal, but there are a few minor differences. Namely:
#import is not supported in IE6 and older and Netscape 4
#import allows multiple style sheets to be imported in a single link or style element, if desired
link allows specifying an alternate stylesheet, which browsers like FireFox, Safari, and Opera can allow users to switch to. IE also supports this if using a JavaScript switcher. This is most often used for accessibility.
I know I can include CSS on my page like this:
<style>
.style{
..
}
</style>
How do I add an external stylesheet file in an HTML page?
In your HEAD, add:
<link rel="stylesheet" type="text/css" href="your_css_file.css">
the css file itself does not contain <style> tags.
The simplest way to do so is to add a stylesheet link to your document HEAD section:
<link rel="stylesheet" href="style.css" type="text/css">
Doing so will reduce the performance on the first load (since the system must request two files instead of one) but improve subsequent performance because the style sheet remains in cache for a while.
From StackOverflow's page:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5885" type="text/css">
I don't think it will improve speed much unless the same CSS file is shared across multiple webpages in your website (so the browser can cache it). Otherwise there's the penalty of creating an extra HTTP connection to retrieve the CSS.
Add the following line in the head of your html file
<link rel="stylesheet" type="text/css" href="path/to/your/style.css">
Then you can add styles in style.css like,
.classname{
...
}
And there is also inline style sheet, you can add it in the html line itself, for example
<a style="color:red;" href="#"></a>
You need to add this tag in the header section of your html file
<HEAD>
<link rel="stylesheet" type="text/css" href="giveThePathToYourStyle.css">
</HEAD>
Where are all of the places you can put CSS style information on an HTML page?
I know you can place CSS style info in the head of an HTML page, where else is it valid to put CSS elements?
I would like to place my CSS someplace else on the page due to inheritance, e.g:
<style type="text/css">
...
</style>
You can use
<link rel="stylesheet" type="text/css" href="style.css" />
in the head to link to an external stylesheet.
You can also have inline style attributes, such as
Hello
And you can also set the styles in your scripts, e.g. using jQuery (which can go where ever your script is):
$('textBox').css("font-weight", "bold");
However, it is good practise to try to keep all the style information in one standard spot, i.e. the head of the document - it makes it easier for others to maintain your work for you.
Note that if you really want to override a particular attribute, the best way to do it is to use the !important option, such as
color: red !important;
You can use this with any of the methods listed above, and it will override any later settings that conflict.
You can link external stylesheets in the <head> block. You can use more than one stylesheet, and they are loaded in order (in this example, both screen.css and print.css override some elements of style.css.
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can import it from an external stylesheet in the <head> block:
<style>
#import url(style.css)
</style>
Or import it using another method:
<style type="text/css" media="all">
#import "style.css";
</style>
You can put the CSS in the <head> block:
<style type="text/css">
p {font-face:Arial;}
</style>
You can put the CSS inline into the html:
<ul> <li style="list-style:none">Item 1</li></ul>
You can add the CSS to the DOM via javascript:
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
You can specify it "inline"
<div style="border: 1px solid red" />
Other than that I'm not used to place it anywhere else than separate files / <head>
Off hand:
In other documents. Include CSS files with the LINK element:
<link href="style.css" type="text/css" rel="stylesheet">
Inline with HTML elements:
<h1 style="color: red">Title</h1>
That is usually the only two other places you will put CSS. You can also apply CSS to documents via JavaScript.
As the others have said, non-inline CSS belongs in the head, if you want to write syntactically-correct code. Check the schema if you're not sure.
If you need to generate the CSS during dynamic page creation, you can easily inject it into the DOM, at the bottom of the head, using javascript:
document.getElementsByTags('head')[0].appendChild( -- css here --);
Be forewarned that this will cause your page rendering to slow down and "blink," as the browser must restyle the page when your new CSS is inserted. The same thing will happen if you ignore the schema and place your CSS in the body.
This leads to a poor user experience.
If you're concerned with inheritance in css then you need to remember this general rule.
Inline styles > everything else.
Tag > id
Id > class
Then you have combinations of these rules.
Tag + id (div#main) > id
Parent tag + tag+id > tag+id
Remember these are just general rules but they should take care of 99% of your situations. Placing styles in your scripts are generally a bad idea because it affects perfoance as others have noted and it adds another place for you to update when you need to change the styles.
So, you can specify it inline as an attribute on the element you want to style...
<p style=" font-weight:bold; ">
Or, you could add it in a style block in the page body or header
<style>
p {font-weight:bold;}
</style>
And lastly, you could include it from a linked CSS file by importing...
<style>
#import url(css/bold.css)
</style>
Or by linking it...
<link rel="stylesheet" href="css/bold.css" />
Honestly, linking is, 99.9999% of the time, is the best way to include stylesheets on a page as it neatly separates your CSS from your code, making updates to either much faster.