Adobe Tutorials

Microsoft Tutorials

Language Tutorials

Information Systems

CSS stands for Cascading Style Sheets. It allows you to style your pages globally. CSS provides a set of formatting rules that contain the styling and formatting information. The styles define how to display HTML elements and describe how a document should be presented on the Web.

Styles are usually saved in external .css files. External style sheets allow you to change the appearance and layout of all the pages in a Web site from a single file.

So let’s get started learning CSS.

 
 

 

Cascading Style Sheet (CSS) Commands

General commands

background-color

Specifies background color. Hex value or color name or transparent.

background-image

Sets url of background image.

background-repeat

Sets repeat (default), repeat-x (repeats along the x-axis), repeat-y (repeats along y-axis) or no-repeat. background Any or all of the above

Font-related commands

font-weight

Specifies the weight of the font. Values: Normal, bold, bolder, lighter, 100, 200,[...],900.

font-size

Specifies size of font, measured in pixels, points, ems, xms or xx-small, x-small, small, medium, large, x-large, xx-large.

font-family

Specifies which font to display. It's always wise to include standard Windows and Mac fonts here, to be sure that they display somewhat correctly in different browsers.

font-variant

Normal or small-caps

font-style

Specifies font style: Normal, italic or oblique

font

Any or all of the above

color

Specifies color of font

Text-related commands

text-decoration

Specifies text-decoration: none, underline, overline, line-through, blink.

text-transform

Manipulates text into one of the following: none, capitalize, uppercase, lowercase.

text-align

Specifies how the text should be aligned: left, right, center, justify

text-indent

Specifies how much the text should indent. Measurement(px, pt, %).

text

Any or all of the above

vertical-align

baseline, super, sub, top, text-top, middle-bottom, text-bottom.

letter-spacing

Specifies space between letters. Measurement (px, pt, %)

word-spacing

Specifies space between words. Measurement (px, pt, %)

color

Specifies color of text

Link-related commands

:hover

This is placed in your class or ID tag, for example a:hover, a.link:hover. Specifies which attributes to apply to selection when user moves his or her mouse moves over it.

:visited

Placed in the same way as :hover, specifies the color of visited links.

:active

Similar to the two above, specifies color of active link.

Box commands

border-width

Specifies width of border around your box. Measurement, thick, medium, thin.

border-color

Specifies color of your box.

border-style

Specifies style of border around your box. None, dotted, dashed, solid, double, groove, ridge, inset, outset.

border

Any or all of the above

width, height

Specifies width and height of your box in pixels.

margin-top, margin-left, margin-right, margin-bottom

Measurement. Specifies margins.

float

Placement of box - right, left, none

clear

Clear area of box - right, left, none, both

 

 

 


 

 

 
Share |

Visit our Flash video library

Featured video
Training Sessions from Hell

Training Sessions from Hell