Last time we completed step 2 of the Cloud Resume Challenge; building a resume out of HTML. Here, I’m going to begin the important process of making it not look like garbage, with CSS!
CSS stands for Cascading Style Sheets. While HTML tells a browser how a page is structured, CSS tells it how the content should be presented. Placement / layout, colours, fonts and more are all controlled with CSS. But it wasn’t always so. Before CSS, the styling and layout of elements was declared directly in the HTML, leading to overly complex and repetitive source files. With CSS, only the content is contained the html file, and a separate CSS stylesheet contains the rules for how the content should be presented. This is in line with a design principle known as “separation of concerns”, which dictates that each function of a computer program (or, in this case, website) should be represented by a distinct entity that controls only it. This allows that function to be more easily re-used, updated, debugged etc.
Once this stylesheet as been created, it can referred to the head section of the html file, like so:
<link rel="stylesheet" href="style.css">
In basic principle, CSS works by referring to elements of your html content by either name or type and declaring style rules for just those elements. For example, by default I want all the text in my resume to be dark grey in colour, and nicely separated vertically. I can do this by adding rules that refer to the “main-container” div that wraps all my content:
This styling will apply to all my text unless a different rule is specified at a more granular level, For example, I want all my <h2> and <h3>headings to to be in a dark blue. Once I set this rule, as below, it will supersede the broader rule, just for those page elements:
Next, I want the text to be in a nice, readable, modern looking font. One concern when using fonts on a website is that unless you’re using one that’s likely to be installed on a viewer’s machine (Arial, Times New Roman, Georgia etc), it’s possible that your text won’t always render as intended. We can get around this by using web fonts. With web fonts, rather than the browser relying on fonts stored locally on the user’s machine, it downloads the font from a third-party provider, such as Adobe Fonts, and Google Fonts (we’ll be using the latter here.) Once you’ve chosen your font, Google Fonts gives you a snippet of code to add to your html head section, and you can then refer to the font in your CSS file as normal:
The next thing I really want is a two column layout so that my basic info goes on the left, and my detailed job history goes on the right. I also want the columns to resize nice and responsively, whilst keeping the one with the detailed info bigger than the other one. For this, I’m going to use the layout model, CSS Flexbox. Flexbox is a big topic in and of itself but my needs here are relatively simple. I’ll declare that I’m using flex by adding the “display: flex” property to my main container. Just doing this will move my two columns side-by-side, since flexbox will render elements inline (ie continuously, in the available space), rather than block level (ie taking up a “row” each), by default.
I’m then going to add some “max-width” and “min-width” rules to my columns to ensure that they stay looking proportionate, and don’t stretch across the whole page.
Finally I’m going to use flex-grow values to ensure that, as the page is resized, the columns stretch and shrink proportionately.
So with a minimal amount of code:
…we have the page looking very close to what I’d intended:
One final thing, I already know that this two-column layout will be fine for desktop viewing but that it’s going to look bad (squashed / overspilled) on mobile. Fortunately, CSS can help here as well. What we need are media queries! Media queries allow you to specify CSS rules that only only apply on screens of a certain width. Specifically, what I want to do here is move to a differently styled, single column layout once the size of the displaying browser is under a certain width. This is done by nesting a new set of CSS rules within a media query tag:
One great way to test how this has worked is by going to Developer Tools in Chrome, and using the device toolbar to simulate different screen sizes by device name:
OK, actually all looking pretty good now. Next, up: getting this thing online…