13 April

Make links always stay the same colour
nav a, nav a:visited{
property:value;
}

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 */

Margin

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.


Property:Values

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

img{max-width:100%;}

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


Remove bullet point from list

property:value;
list-style:none;

Float

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.