0

I have a few lines of styles in every page. I'd rather not to put them in one css file for it might affect the styles of other page.

Do we really need to put the styles on a css file or is it ok to have

<style>...</style>

on every page?

What are the advantages of putting the styles in one page regarding to it's speed? Does it speed up the loading of a page?

Ivo San
  • 1,233
  • 4
  • 16
  • 26
  • In regards to speed, it will be faster to put the styles straight into the page because you won't need to request the CSS file. Google even does this (look at their source). That's hardly an advantage compared to a consolidated CSS file though. – Marty Jun 11 '13 at 04:37
  • 2
    if anything, putting repetitive styles into every page will SLOW DOWN the loading, because you're sending more bytes that could have been centralized into a single file and cached for subsequent requests. – Marc B Jun 11 '13 at 04:37
  • other than speed considerations, you may want to put a `css` in a file when you are using it across pages and but `css` into `style` when it is distinct to the page. – tay10r Jun 11 '13 at 04:40
  • If you want to include style tag in document, look after the attribute scoped : http://www.w3.org/wiki/HTML/Elements/style
    ....
    – G-Cyrillus Jun 11 '13 at 04:46
  • you may like to see this http://w3uiguru.com/how-to-apply-cascading-style-sheet-css/ ... and external css can be cached – NullPoiиteя Jun 11 '13 at 05:27

1 Answers1

0

Basically it is a compromise option. Like Marty Wallace and Marc B stated.

The speed aspect is therefore a consequence of the option you take, as they are both valid. Just remember these two factors:

  • should you choose to use the CSS in the <style> section of your HTML file, it will be loaded everytime with each page load. Therefore, the more CSS rules you have in this section, the bigger the file, hence, longer loading time and slower speed.
  • If you <link> a stylesheet, that file will be requested everytime you load the page as well. So more or less the same relation to loading time is implied, although it may differ a lot in absolute value.

Also, you should have in mind that most browsers have caching mechanisms to optimize the usage of CSS. Try to read more about it so you can take advantage of it as well.

My opinion is that a mixed approach is probably the best option. Choose the rules that are to be applied to the common elements between your different pages and put them in a linked CSS file. Then, use the <style> tag to set specific CSS for elements on that page. This is my I-don't-care-about-it-that-much way of doing it.

Most of the time I found that CSS doesn't impact performance that much - but of course, it depends a lot on how much CSS you are actually using.

Community
  • 1
  • 1
Joum
  • 3,189
  • 3
  • 33
  • 64