CSS Cascading Style Sheets

Introduction
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the
layout of multiple Web pages all at once
External Style Sheets are stored in CSS files
 CSS Syntax
A CSS rule set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations
separated by semicolons.
Each declaration includes a property name and a value,
separated by a colon.
 CSS Selectors
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to "find" (or select) HTML elements based on their
id, class, type, attribute, and more

The element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will
be center-aligned, with a red text color)
 CSS Selectors
The id Selector
The id selector uses the id attribute of an HTML element to select a
specific element.
An id should be unique within a page, so the id selector is used if you want
to select a single, unique element.
To select an element with a specific id, write a hash character, followed by
the id of the element.
The style rule below will be applied to the HTML element with id="para1":
 CSS Selectors
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period character, followed
by the name of the class:
In the example below, all HTML elements with class="center" will be
center-aligned:

In the example below, all <p> elements with class="center" will be center-
aligned:
 CSS - How to Insert in HTML Page
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style

External Style Sheet

Each page must include a reference to the external style sheet file inside
the <link> element. The <link> element goes inside the head section:
 CSS - How to Insert in HTML Page
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the head
section of an HTML page:
 CSS - How to Insert in HTML Page
Inline Styles
An inline style may be used to apply a unique style for a single element.
An inline style loses many of the advantages of a style sheet.
To use inline styles, add the style attribute to the relevant tag. The style
attribute can contain any CSS property. The example shows how to change
the color and the left margin of a <h1> element:
 CSS - Backgrounds
The background-color property specifies the background color of an element.
The background-image property specifies an image to use as the background of an
element.
The background-repeat is used repeat Horizontally or Vertically
The position of the image is specified by the background-position property
Background - Shorthand property
As you can see ,there are many properties to consider when dealing with
backgrounds.
To shorten the code, it is also possible to specify all the properties in one single
property. This is called a shorthand property.
The shorthand property for background is simply "background":
 CSS Text
The color property is used to set the color of the text.
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
The text-decoration property is used to set or remove decorations from
text.
The text-decoration property is mostly used to remove underlines from links for design
purpose.
text-decoration: overline,line-through or underline
The text-transform property is used to specify uppercase and lowercase
letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the
first letter of each word.
The text-indent property is used to specify the indentation of the first line
of a text.
 CSS Font
The font-family property should hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the next font.
The font-style property is mostly used to specify italic text.
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
The font-size property sets the size of the text.
 CSS - Links
Links can be styled with any CSS property
(e.g. color, font-family, background, etc.).
In addition, links can be styled differently
depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
 CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout.
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 add a border around elements, and to define
space between elements.
The image below illustrates the box model:
 CSS Border
The CSS border properties allow you to specify the style, size, and color of
an element's border.
The border-style property specifies what kind of border to display.
None,dotted,solid,dashed
The border-width property is used to set the width of the border.
The border-color property is used to set the color of the border.
To shorten the code, it is also possible to specify all the individual border
properties in one property. This is called a shorthand property. They can
be specified through border property.
 CSS - Margin
The CSS margin properties define the space around elements.
The margin clears an area around an element (outside the border). The
margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently
using separate properties. A shorthand margin property can also be used,
to change all margins at once
 CSS - Padding
The CSS padding properties define the space between the element border
and the element content.
The 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.
 CSS - Dimension
The CSS dimension properties allow you to control the height and width of
an element.
The height and width properties are used to set the height and width of
an element.
The height and width can be set to auto (this is default. Means that the browser
calculates the height and width), or be specified in length values, like px, cm, etc., or in
percent (%) of the containing block.
The max-width property is used to set the maximum width of an element.
The max-height property is used to set the maximum height of an
element.
The min-width property is used to set the minimum width of an element.
The min-height property is used to set the minimum height of an element.
 CSS - Display
The display property specifies if/how an
element is displayed.
Every HTML element has a default display
value depending on what type of element it is.
The default display value for most elements
is block or inline.
 CSS - Float
The float property specifies whether or not an element should
float.
The float CSS property specifies that an element should be taken
from the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
Left - Is a keyword indicating that the element must float on the left
side of its containing block.
Right - Is a keyword indicating that the element must float on the right
side of its containing block.
None - Is a keyword indicating that the element must not float.
The clear property is used to control the behavior of floating
elements.
Elements after a floating element will flow around it. To avoid this, use
the clear property.
 CSS - inline-block
It has been possible for a long time to create a
grid of boxes that fills the browser width and
wraps nicely (when the browser is resized), by
using the float property.
However, the inline-block value of
the display property makes this even easier.
inline-block elements are like inline elements
but they can have a width and a height.
 CSS Image Sprites
An image sprite is a collection of images put
into a single image.
A web page with many images can take a long
time to load and generates multiple server
requests.
Using image sprites will reduce the number of
server requests and save bandwidth.
 Reference:
http://www.w3schools.com/css/default.asp