CSS: inline, embedded, external or external parse - SnippetGood

CSS: inline, embedded, external or external parse

2009-10-19T16:21:35Z

I was thinking about server load times and wondering what the most efficient way to add css is. What gets loaded fastest?

For my part, I think the external css is the easiest to maintain as a project scales, but sometimes you need a lot of these stylesheets for large scale websites with a lot of varying sections. What about parsing several css sheets on load?

as for snippets:

inline:

<div style="float: left;" class="left">hi</div>

embedded:

<head>
    .left { float: left }
</head>
<body>
    <div class="left">hi</div>
</body>

external:

 <head>
    <link rel="stylesheet" type="text/css" href="style.css">     
 </head>
 <body>
     <div class="left">hi</div>
 </body>

parsing:

 ????

Answer by Greg for CSS: inline, embedded, external or external parse

2009-10-19T16:29:14Z

I don't know much about parsing, but you can combine css stylesheets like this:

<link rel=Stylesheet href="global.css" title="combined" />
<link rel=Stylesheet href="nav.css" title="combined" />
<link rel=Stylesheet href="section.css" title="combined" />

This might be a really old-school out of date method, but I thought I'd log it in here for completeness

Answer by Antti Sykäri for CSS: inline, embedded, external or external parse

2009-10-27T23:59:57Z

The Google Page Speed project has a list of web performance best practices:

http://code.google.com/speed/page-speed/docs/rules_intro.html

Other useful tools you can use to measure your performance are Firebug (getfirebug.com) and YSlow (developer.yahoo.com/yslow/).