|
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 |
|
