join: new@juude



get alerts for new articles






CLOSE WINDOW

join: new@juude



get alerts for new articles






CLOSE WINDOW
css: casscading style sheets

CSS Basics w3c


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

Measurements


Length


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.

Percentages


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

Position


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.

Float


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

Clear


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.

Color


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
    property:rgb(0%,0%,100%);

URLs


A URL value can be expressed as relative or absolute url
  • relative
    property:url(name.png);

  • absolute
    property:url(http://www.name.com/name.png);
Relative urls are relative to the style sheet not the html.