Css in Html


So understanding that you can directly write css in an html file as well as link a css and an html file together to create a more detailed page, I was just wondering when writing css directly in the html file comes in more handy?


When you have link to a css file, it takes time (maybe a few milliseconds) for the css file to get to your page and apply the styles. Meanwhile the html body still displays.

I made this one page with a bunch of animations that didn’t load fast enough. The page looked broken for the first .2 seconds. The solution was to put the css on the html, which HAS to load before the html body displays.

So when there is a lot of complex css that isn’t taking effect, putting the css is in the html is a hack.

Hope this helps :slight_smile:


An external CSS file will not take very long to download, but yes, it is another request for the server to handle. There will be some latency. However this is never a good reason for ditching the external file.

The key is to set up the load sequence to favor CSS over other downloading resources such as script and images. CSS is loaded in the HEAD which means it takes precedence to images and other objects going into the body of the page.

It’s not a crime to have an embedded style sheet, but it is discouraged since that style sheet can not be applied to other pages without copying the sheet to those pages. It also makes the HTML file larger and that takes more time to download. One CSS file can be applied across an entire site of thousands of pages. The only time it needs to be downloaded is when the site is first encountered. After that it is cached in the browser and can be reached quickly by other pages in the site.