13 April

Make links always stay the same colour
nav a, nav a:visited{

nav a: visited is a pseudo-class. This is not a real class, but rather it is a state the element can be put into under the right condition.

pseudo-class - other classes visited and hover

Add comments
/* like this */


0px auto; T/B L/R
-5px 0 0; T L/R B
0 0 0 0; T R B L

Add fonts

  • Pick font from google.com/fonts
  • Copy link code & place it into index.html, below normalize.css and above custom.css sheets.

Change font size

Better to use em rather than px. Em is relative and is used as a multiplier rather than a definitive.


font-family | font-weight | text-align | margin | font-size | line-height | padding | clear

clear:both; allows you to prevent any elements from taking the space to the right or left of an element.

border-radius:100% lets you make a round picture

Fix images width


This allows you to fill the width always to the parent container.

Remove bullet point from list



Allows an element to be taken out of the normal flow & placed to L/R of its parent container. Text & other inline elements will wrap around it.

Make horizontal nav

li {display:inline-block;}

Center image

using display:block allows us to use margin:auto to center the image. It is more flexible than text-align.

Show Comments

Get the latest posts delivered right to your inbox.