Hi All,
I need some suggestions css related. Please provide me your valuable suggestion and recommendations.
Thanks in Advance
*all code in XHTML. Just remove the space and trailing forward slash.
1. The <link /> element.
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
and for more complex sites demanding more CSS, group your rules into separate CSS files. Then you can use the @import rule multiple times in the style sheet that you have linked to your xhtml document, for example:
@import 'master.css';
@import 'content.css';
@import 'tables.css';
2. For most sites I would say one stylesheet. You can put screen and print styles in the one stylesheet as so:
@media screen {/*screen rules here */}
@media print {/*print rules here*/}
No idea on the rest of the questions. (:
As usual I have an opinion, but it’s not different from StevieD’s.
- What is Best practice calling external css? @import or <link>
Often when you see @import in the <head> it’s an old trick to hide the CSS from Netscape7 or some ancient browser… because it did not understand @import at all. So far as I know, everyone supports it now, but like StevieD I only use <link>. There may be some advantage to @import for some particular CSS technique, but I don’t know it.
- what’s ideal number of css call per page?
Same as the amount of radiation we’re supposed to get on the job: as little (low) as reasonably achievable (ALARA). You certainly do not want a separate sheet for typography, resets, colours, and box properties. To that end, I will include/merge any CSS that comes with any JS plugins I download (they often have their own, separate CSS files). Same goes for any CSS files generated by fontSquirrel and those types of font services.
what’s css size should be.
ALARA.
Thanks to all of you for your valuable suggestion and time.
The best and easiest way is to use <link> elements. These are the best supported across all browsers.
It depends on your site design. On the one hand, you want to minimise the number of HTTP requests needed for a page to load, which suggests using one stylesheet and putting everything in it. But on the other hand, if you have very large blocks of CSS that are only relevant to certain pages, you probably don’t want visitors to all other pages having to download them, because several unnecessary KB of data is probably going to be worse than an additional HTTP request. But you should always have at least 2 CSS files, because you should always include a separate print stylesheet!
The ideal size is whatever size it needs to be, to get the job done. If you’ve got a fairly simple and straight forward site design, you can have a very small CSS file. If you’ve got a large site with a complex design, you’ll need a much larger CSS file. There’s no way round that, if you want that styling, you need a file large enough to get it all in. Of course, there are lots of things you can do to minimise the size, like using the shorthand format for borders, padding and margins, etc. And you should avoid and eschew redundant and unnecessary duplication. I’ll say it again, avoid redundant and unncessary duplication. Saying the same thing over and over again is a waste of time, and unnecessary (you get the picture?). Make your files as small as they can be, but no smaller.
Missing question.
Unanswerable question. It depends.
I’ve never heard anyone say you shouldn’t use linked CSS on an https server. What they may mean is that if you have a <link> from an https page to a css file on the main unsecured http server, your visitors will get warning messages about some content being unsecured - simple solution, copy the css files onto the https server as well, and bingo, problem solved.