join: new@juude

get alerts for new articles


join: new@juude

get alerts for new articles

css: casscading style sheets

CSS Basics w3c

intro | media-types | reset/setup
RULES:  css | cascading | @rules
SELECTORS: selectors | properties/values



The value for a unit (length) is formed by using a number and when necessary including the + or - sign in front of the number, then the type either em or px. There are no spaces between the unit value and its type: 1.5em (there should not be a space between the 5 and em). A value of an em is in relationship to the element's parent. For example if the <body> is the direct parent to an <h1> and the body is 16px then the h1 at 1.5em would be 24px.


Is the same as above except the percentage sign, % is used instead of em or px.


Positions allow you to position elements and also stack elements using the z-index. Elements are positioned using the top, bottom, left, and right properties
  • Static: the default the elements stays within the flow

  • Relative: position is within the flow and is relative to its inital position.

  • Absolute: completely out of the flow of the rest of the information. It is relative to its parent when the parent has a position other than static.

  • Fixed: completely out of the flow of the rest of the information.It is positioned relative to the browser's window and will be visable even when the user scrolls.


In order to have elements placed next to each other without using properties you need to use a float. Elements that are floated automatically become a block unless otherwise stated in the display property.
  • Elements can only be floated left or right, not up or down.
  • The floated element needs to be placed in the code before the element that you want it to float next to. For example when floating an image within text the image needs to go first


All elements after the floated element will flow around the floated element. This could include elements that you do not want to flow around the floated element. If you want to avoid this you need to use the clear property.


A color value is a keyword, name of a color or a numerical RGB specification which is either expressed as a hex number, rgb or the name of a color.Using the name of a color gives you a very limited palette which only includes:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

RGB as Hex Numbers

  • property: #ffff00;
    when using smart or web colors which are expressed in pairs as show above youcan just use the one digit from each pair
  • property: #ff0

RGB as Percentage

  • rgb(x,x,x)where x is an integer between 0 and 255 inclusive
    property: rgb(255,255,255);
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0


A URL value can be expressed as relative or absolute url
  • relative

  • absolute
Relative urls are relative to the style sheet not the html.