Any guidance on how best to define CSS styles in a web page that’s intended for mobile devices? Is it best to use an external stylesheet and reference it in the <head> element using a <link> tag, or is it better to dump the CSS styles directly into the page via a <style> tag?
I presume that the benefit of having the CSS styles directly in the page is that it reduces the number of HTTP requests the mobile device must make. Many prominent websites use this approach for their mobile pages. For example, Yahoo!’s Mobile site puts the CSS styles directly in the <style> (all 27 KB). Same thing for Google’s mobile site (although they have much less content in the <style> tag).
Having the CSS in an external stylesheet would incur an additional HTTP request, but would allow the mobile device to cache the content and result in fewer bytes needing to be downloaded in subsequent visits to the site. Digg’s mobile site is an example of a site that uses an external stylesheet.
So is there a “best practice” for specifying CSS styles in web pages targeted to mobile devices?
Thanks
Many old phones don´t support css external files, and it reduces http request. I think it is better inline CSS styles.
Here some links.