The goal of this guide is not to teach you everything you need to know about CSS, or even all of the CSS that’s going on in the blog skeletonizer (though I will go through most of it). Instead, I’m going to provide a very limited walkthrough of the CSS that you can use to personalize the apperance of a website made with my blog skeletonizer.

I am going to assume that you’ve read how 2 post 2 already, so you know how to edit a file on github. If you don’t know, go read that. You’re going to be editing the styles.css file for most of this, which lives in the CSS folder/directory inside the assets folder/directory.

You can have multiple files to hold your CSS, or even do something a little fancier with sass (which is what I do on this site), but you don’t need to. For the purposes of this tutorial, we’re going to keep it nice and simple, and have all your CSS live in one file.

Wait! What is CSS??

CSS is basically a set of instructions to the computer that you’ll write (so, a coding language, if you want to be fancy). While markdown or html tell your computer the very basics of what should be on your site (as in, what words should show up, should there be a link, etc), CSS tells your computer how your site should look. All the colors on this site, and the cool background boxes are done through CSS.

Colors

Colors are the big one. I’ve given the blog skeletonizer a particularity hideous color scheme by default, mostly to encourage you to start messing around with the colors of your site, and make it your own.

To do this, all you have to do it open the file _assets/CSS/styles.css, and swap out the colors for your own. You can tell that something is a color because it will either be the name of a color (e.g. “lime”), or will be a six-digit combination of numbers and letters with a pound sign before it (e.g. #6666ff). I’ve used a mixture of the two in the CSS document for the skeletonizer, so you can see how both work.

Using the names of colors can be easier than using color codes (the things with the hashtag), because it’s easier to recognize what color they’re talking about. However, there aren’t names for all the colors that your computer can display! Because of this, I usually use color codes instead of color names.

I would encourage you to mess around with color codes in addition to named colors. Just search the internet for a CSS color picker, and you’ll find a ton of sites that will let you choose a color, and will then tell you what the code for it is.

Colors are the big thing to customize, but I’m going to go into a few other elements, too.

The size of your text (and other stuff)

As you can see, some of the text on your site is bigger, and some of it is smaller. You can control this through CSS by specifying the font-size property.

To do this, you can either add a new line with font-size: ??em; or change the existing number, if the section you’re editing already has a font-size line.

There are multiple ways that you can measure font size (and specify it in CSS), but I like to use “em”. One “em” is the height of one normal line of text, so it’s easy to tell how much bigger you’re making things. For example, text that’s 2em tall will be twice as tall, and text that’s .25em will be one-quarter of the size of a normal line of text.

You can also change the size of other things (like the backgrounds/buttons on the nav bar)! Just look for a number, and tweak it until you get it how you want.

Fonts

Fonts are very cool, AND your browser has three by default: serif, sans-serif, and monospace. You can do a ton with just these three fonts, I promise.

But! You can include even more fonts on your site! Two ways to do it are adding the font files themselves to your website, and using google fonts, which, if you’re alright with using a google product, is pretty cool.

I’m just going to cover using google fonts, because it’s what I do, and you can do it just through editing your styles.css file.

A quick aside on google fonts: I use google fonts, lots of people use google fonts, they’re a pretty beginner-friendly way to add fun fonts to your website and they’ll track you a little when you add one of their fonts to their site. This is basically a function of how adding one of their fonts works - instead of having the font file stored with the rest of the files on your site, you essentially just have a link to the file on google’s servers. When someone wants to see your site, their computer follows the link, grabs the file, and then uses it to display the text. As far as I can tell, they mostly just use this information to track how many people are using which fonts, but it’s probably something you should be aware of. It’s something I think of when I debate how I want to add a font to my website.

A quick aside on my quick aside: Is it really important to know this, if you’re just beginning to build sites? How much does the average internet user care about google’s analytics that much? Is there any sense in trying to keep your site connected from the big companies’ networks, when you’re on the internet and it’s nothing but a network? Is anyone going to read this? Am I going to remove this paragraph when it’s not 22:00 and I think hmm, that seems a little embarrassing and also like something that’s not worth worrying about…

Anyway. As you can tell, there may be a “CSS 2” post in which I proudly announce that I’ve stopped using google fonts forever and ever.

Ok back to CSS.

Go to google fonts, which is at fonts.google.com. Find some fonts you like. I suggest looking for “display” fonts for stuff like headings, and mmmaybe a plainer font for the regular text if you plan to write longish posts, but also there’s no rules. If you want your posts to be in handwriting-style cursive then put them in handwriting-style cursive!

Click on the font you want. On its solo page, you’ll see a place to type in some text to preview and then little popup boxes with the words you’re previewing. On the right of those boxes, you’ll see a blue button/link that says “Select Regular 400” (or whatever the font style is. Click that.

If you want to add more fonts, go select them in the same way.

Once you’ve got all the fonts you want selected, go to the top left of the screen, which will have a little shopping bag button. You’re going to see a sidebar that shows the fonts that you’ve selected. Under that, is a section that is called Use on the web. This is what you want to do!

It doesn’t matter whether you use the <link> method or the @import method. I mean, they do slightly different things, but they both have the same result. Either way, the top box will generate a line of code that’ll look like this:

or this:

</code>

Copy and paste this into the top of your styles.css file. Make sure you get the whole line of code; if you leave a > out, for example, it’s not going to work properly.

Now, look back at the google fonts website. Below where that first line of code was generated, do you see a little section called CSS rules to specify families? Good. That tells you what the names of your font are (or rather, what your computer thinks the names of the font are, which isn’t always what you think it is!). If your font’s name is more than one word - like Times New Roman, you need to put quotes around it, like this: "Times New Roman.

Okay, you’re probably thinking now. I know which fonts are on my computer already, and I know how to add more from our good friend Google, but uh. How do I actually use them??? on my site???

It’s as easy as changing the colors, it turns out!

Just open up your CSS document, and scroll until you see a section that says “serif” or “sans-serif”, and replace it with the name of the font you want to use. Save the document, and you’re good!

Oh no! You changed so much CSS and it’s not showing up!

Unfortunately editing CSS can be a little bit irritating because your browser (Firefox, hopefully) will sometimes store a copy of the CSS file from your site to use whenever it loads, so it can load faster. The problem with this is that the stored copy sometimes isn’t updated as fast as we’d like.

To force it to update, you can clear your cache. The cache is basically the part of your browser’s “brain” that’s dedicated to remembering stuff like this–actually, no, let’s think of it as a filing cabinet, because that’ll make this next part much less disturbing.

ANYWAY. If you clear your cache, your CSS should update. You can usually do this in the same place where you can clear your regular browser history. You can just clear the cache, if you want. It’ll still work.

---

I’m sure that I’ll think of more to add, but for now, I think those are kind of the Big Three of customizing your site. Go have fun! Make monstrosities! Use “lime” and “hotpink” and “teal”!

I can - and will - delete any comment at any time for any reason I want. Write comments that won't make me want to delete them.

Also, refer to people with initials or with their github username. I'd like to maintain the thin veneer of possible anonymity this site currently has.