Link or Embed CSS

[williamsun]

All things considered, which way is better, linking the css or embedding it?

I always thought it was better to link css style sheets to take full advantage of the cascading feature, but I see a lot of sites that embed all the css -- forcing small formatting changes to be done to every page. But they still do it anyhow. There must be a good reason.



I don't know if this has been covered, I couldn't find it with a forum search.

[jscheuer1]

Embedding styles is inefficient and indicative of a poor overall concept and/or an unwillingness to adhere to it.

It's often easier in the short term though, so it's always tempting.

There are rare cases where it might be unavoidable, but these are generally much less than people who resort to it a lot might imagine.

[williamsun]

The only reason I could come up with is maybe some people disable styles/linked extras as an extra security measure against hacker's cross site scripting exploits (although that really isn't the way it works). Whatever the reasons maybe they just want to make sure that the formatted page is delivered to the site visitor. -- That's all I can figure, but I need to consider every possibility because without the linked style sheets my site looks like scrambled garbage.

[djr33]

If CSS is disabled, it won't matter where it's from.

It's easier in a lazy sense to embed the CSS, but then as you know well it's much harder to maintain the site.

It's useful to put specific styles for one specific page within the HTML as embedded styles. This is especially true if you might be generating them dynamically such as with PHP or another server side language.
[Note: it IS possible to generate a dynamic serverside-controlled CSS file, but it's much harder than the average PHP/etc user would be able to handle. It involves .htaccess and/or sending headers to explain what the file is for. It's just plain text as content, so it's possible, but it's difficult. In the same sense, PHP can generate images, but it's not easy to do.]

But if you're creating styles that aren't meant to be shared between pages, it's all but crazy to not create an external stylesheet.


My guess is that those pages you found with the embedded styles either:
1) Are generated dynamically with serverside languages like PHP (so the CSS is in fact stored in one place). This is only inefficient in the sense that it is sent to the user each time the page loads, so it's a little slower and takes more bandwidth. For site maintenance, it's not bad.
2) Are just badly designed sites.

[williamsun]

Ok, I didn't say it was the right thinking, just my thinking. lol

Thanks to the both of you for your responses. They might have been php pages, I don't remember. Is there any kind of search engine advantage or any other advantage to having php pages, besides the php programming itself (which I can't do haha) and being able to insert duplicated items/modules/blocks? I have often wondered that.

I have never had a web or graphics class so I'm clueless about a lot of things. lol

[djr33]

PHP is useful for the designer because it allows automation of HTML and using elements across pages, actually very similar to external stylesheets for CSS. It also allows databases, form processing, sending emails, etc.
But no, PHP doesn't do anything for search engines. Search engines (and visitors) end up seeing plain HTML pages (even if they are labeled "page.php") as if they were written by hand. PHP operates entirely and only on the server then sends plain old HTML to the user.

[keyboard]

If embedding css is generally "frowned upon", then why does vbulletin do it?

[williamsun]

If embedding css is generally "frowned upon", then why does vbulletin do it?

PHP like Djr33 was talking about. PhpBB is the same way.

[keyboard]

But you can have a .php file which (with the right header) can be used as a .css file... same for .js

[williamsun]

He explained that the linked pages are delivered to the user in one page. If you view source it is all in the page you see, but on the site they are different css pages.