Posted by De Web Times in
Design on 04 30th, 2009 |
no responses | 1,487 views
|
SYNTAX
|
| Syntax |
| selector {property: value;} |
| External Style Sheet |
| <link rel=”stylesheet” type=”text/css” href=”style.css” /> |
| Internal Style |
| <style type=”text/css”>
selector {property: value;}
</style> |
| Inline Style |
| <tag style=”property: value”> |
|
|
GENERAL
|
| Class |
String preceded by a period |
| ID |
String preceded by a hash mark |
| div |
Formats structure or block of text |
| span |
Inline formatting |
| color |
Foreground color |
| cursor |
Appearance of the cursor |
| display |
block; inline; list-item; none |
| overflow |
How content overflowing its box is handled visible, hidden, scroll, auto |
| visibility |
visible, hidden |
|
|
FONT
|
| font-style |
Italic, normal |
| font-variant |
normal, small-caps |
| font-weight |
bold, normal, lighter, bolder, integer (100-900) |
| font-size |
Size of the font |
| font-family |
Specific font(s) to be used |
|
|
TEXT
|
| letter-spacing |
Space between letters |
| line-height |
Vertical distance between baselines |
| text-align |
Horizontal alignment |
| text-decoration |
blink, line-through, none, overline, underline |
| text-indent |
First line indentation |
| text-transform |
capitalize, lowercase, uppercase |
| vertical-align |
Vertical alignment |
| word-spacing |
Spacing between words |
|
|
BORDER
|
| border-width |
Width of the border |
| border-style |
dashed; dotted; double; groove; inset; outset;
ridge; solid; none |
| border-color |
Color of the border |
|
|
POSITION
|
| clear |
Any floating elements around the element?
both, left, right, none |
| float |
Floats to a specified side
left, right, none |
| left |
The left position of an element
auto, length values (pt, in, cm, px) |
| top |
The top position of an element
auto, length values (pt, in, cm, px) |
| position |
static, relative, absolute |
| z-index |
Element above or below overlapping elements?
auto, integer (higher numbers on top) |
|
|
BACKGROUND
|
| background-color |
Background color |
| background-image |
Background image |
| background-repeat |
repeat, no-repeat, repeat-x, repeat-y |
| background-attachment |
Background image scroll with the element?
scroll, fixed |
| background-position |
(x y), top, center, bottom, left, right |
|
|
LIST
|
| list-style-type |
Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman;
upper-roman; lower-alpha; upper-alpha; none |
| list-style-position |
Position of the bullet or number in a list
inside; outside |
| list-style-image |
Image to be used as the bullet in a list |
|
|
Shorthand*
background
border
border-bottom
border-left
border-right
border-top
font
list-style
margin
padding
Comments
/* Comment */
Pseudo Selectors
:hover
:active
:focus
:link
:visited
:first-line
:first-letter
Media Types
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv
Units
Length
%
em
pt
px
Keywords
bolder
lighter
larger
* The properties for each selector
are in the order they should appear when using shorthand notation.
Share this article!
Share it your friends & colleagues and help us spread it to the World.