Tag: css

CSS use EM as a relative font-size, instead of PX

It goes back to Internet Explorer 3.0, but EMs are still the better way to define font-sizes. It takes a small learning curve to get the hang of it, but when it comes to quick changes in overall font-size, this is the way to go. Default font-size for most common browsers is 16 pixels. There are only three articles you need to read to tame that size with relative ems.

1em = 12pt = 16px = 100%

Useful reads

The EM formula

Child pixels / Parent pixels = Size in EM

Not good at calculating? Use the EM calculator

Still targeting Internet Explorer 6?

While Internet Explorer handles EM, it does so only when the base font is set to a percentage!

body { font-size: 62.5%; }
body wrapper { font-size: 1em; }

CSS shorthand

Margin & padding

/* top, right, bottom, left */
.ex1 { margin: 0 0 0 0; }
/* top, right & left, bottom */
.ex2 { margin: 0 10px 0; }
/* top bottom, left right */
.ex3 { margin: 0px 10px }
/* top left right bottom */
.ex4 { margin: 0; }

Font

Opgelet: als je shorthand gerbuikt, worden alle ‘niet gebruikte’ paramters op ‘normal’ gezet

/* font-style, font-variant, font-weight, font-size, line-height, font-family [sans serif, serif] */
/* font-family uses "" when font-name is more than one word */
body{ font: italic, small-caps, normal, 12px/14px "Times New Roman", serif; }
/* in onderstaand voorbeeld verliest h1, ... 'bold' font-weight */
body{ font: 1.4em Verdana;}

Border

Minimum style & color definiëren. Bij shorthand is 3px de ‘normal’ value

/* volledige shorthand */
.border{ border: 1px solid red;}
/* ok */
.border { border: solid red;}
/* fout */
.border { border: red;}

Lists

/* list-style-image, list-style-position, list-style-type */
.list { lists: disc outside none; }

Background

/*
  background-color: color || #hex || (rgb / % || 0-255);
  background-image:url(URI);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
*/
background: #fff url(image.jpg) no-repeat 10px 100px fixed;