Thursday, April 7, 2011

www.w3schools.com CSS Basics

CSS Syntax;  A CSS rule has two main parts: a selector, and one or more declarations the selector is normally the HTML element you want to style.Each declaration consists of a property and a value

ID and Class;  n addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".  The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#". The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. The class selector uses the HTML class attribute, and is defined with a "."

Styling Backgrounds; 
the background-color property specifies the background color of an element.The background color can be specified by:
  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • Hex - a hex value, like "#ff0000"
 The background-image property specifies an image to use as the background of an element. You can repeat and background image or set the postion to no repeat

Styling TEXT;
The color property is used to set the color of the text. The color can be specified by:
  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • Hex - a hex value, like "#ff0000"
 Text can be centered, or aligned to the left or right, or justified.  The text-transform property is used to specify uppercase and lowercase letters in a text

Box Model;  
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.
  Border;  The border-style property specifies what kind of border to display.

Margin Padding;
he margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.t he padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.