Creating a Dummy Site - CSS Styling

The Colour and the Shape

I've now created a "dummy" site's skeleton in HTML, and used some CSS to give it some kind of layout, rather than have each element sit in a vertical line. It's looking much better, but, until we give it a bit of colour and style it looks very old skool. Let's give it a bit of style!

Using CSS to implement a colour-scheme is really quite easy, however, for me, I find choosing a scheme that works to be quite difficult. Maybe I'm not cut out for a career in interior design, but, hey!

As this is (at the moment) a blog about Jekyll, I used the nicely designed Jekyllrb website as a guide to some colours to pick. I chose a pretty typical grey background, offset with a nice purple header, red footer and light grey text.

With all the colours picked, it's just a case of using the 'background' and 'color' properties to set the colours of the elements to what you want them to be. Again here, it took a bit of adjusting the layout CSS to make sure that the background filled the whole section I expected it to, again using the 'cf' class to make sure the parent containers didn't collapse due to floating elements.

I opted to use one selector to change the 'text-decoration' of all the links/anchor tags to none, and the ':hover' pseudoclass to underline links when they are moused over. I think this looks a lot more modern, especially compared to the very old fashioned blue underlined links that HTML provides us.

Box-shadow

A property that, for me, improves the look of a page very easily is the box-shadow property. It is a CSS3 property that, when applied delicately, can add a nice extra dimension to a page.

It can take 6 values, including horizontal and vertical positions, optional blur and spread distances, a color (default is black, but I like using rgba values to play with the opacity) and an optional inset argument that changes the shadow from an outer shadow (outset) to an inset shadow.

I applied these to my header, header image and images in the main content. Overuse of this can look tacky, but, in small doses, I think it works wonders.

Fonts and Webfonts

One of the most exciting new elements of CSS is building fonts into your pages, whether through the @font-family rules or linking to them (like the quick-use Google font links).

When I first realised that different users would see different fonts based on Operating System, browser, settings etc. it made me realise how adaptable web pages need to be. The way it appears on my monitor can be entirely different to how it appears on a friends phone or a strangers huge HD monitor.

However, embedding or linking to fonts gives us another tool in having some idea how it will display on another device.

Using Google's webfonts system is extremely easy, and, uses a link in the head of your HTML to link the user to the fonts you wish to use. This won't work for EVERY user, but, as long as you have some backup font rules written in, you can ensure that people will see at least something similar to what you intend them to.

Not such a dummy after all

After all this, I'm left with a site that looks like this:

It's looking a heck of a lot nicer with all the CSS, and, will be a great help when I come to create layouts and templates for my Jekyll site later.

Next up, I'm going to use my Dummy site to help inform my choices when it comes to making a site that Jekyll will help me to build!