For Newbies

  • Websites are just text files on a computer!
  • Loading a website is really just transferring those files to your computer.
  • The HTML file contains the page’s contents.
  • The CSS file determines how the page should look.

Introduction

When you first load this page, you might briefly see some unstyled text as the site’s styles kick in. This is called a “flash of unstyled content”.

Here’s what it looks on this site:

This happens because your browser has loaded the HTML file, but not the CSS file. (Not yet, anyways.)

The Plan

What I wanted to do was to smooth out the transition between the unstyled state to the styled one. It bothered me that the text would “jump” from the left side to the center.

So I took some CSS styles related to page layout, and added it directly to the HTML. This gave the page just enough structure, so the text already starts out in the right position.

The result:

You can see that there’s less of a jump. Hopefully a bit easier on the eyes.

This technique is called “inlining” the styles.

CSS usually lives in an external file, separate from the HTML. But in this case, we are putting the CSS into the HTML code itself - we are bringing the CSS inline.

The Tradeoff

I can’t inline too much styles though - this makes every page a little heavier. At the extreme case, inlning all of the styles will just make the page take longer to load - while the user has neither content nor styles.

All in all, I made each page on my site slightly heavier for a slightly better user experience. Practically, is there a noticible difference either way? Probably not.

But I had fun, and now you have one more trick to add to your toolbox if you work with websites.

Author’s Note

Fun fact - this is my first blog post with images. (GIFs, no less!)

It took me a while to decide how to handle this. I thought about uploading them to an image hosting website, and linking from there. I think that may be useful if I had a lot of visitors.

But for now, I settled on what’s easiest, which is just keeping the images alongside my writing, all in the same Git repository.