lOMoARcPSD|45316467
lOMoARcPSD|45316467
Style Sheets Cheatsheet &66µ §
page 1 of 2
Font Properties
Font-Family


 !"#
Text Properties
Word-Spacing
$%
&'()"#
(*"#
Font-Style Letter-Spacing
+,
Denes an addional amount of space between characters.
-.,"#
-.(."#
"#

(."#
Font-Variant
/
01"#
Text-Decoration
0+%1

1 
0 0101+"#
Font-Weight
/
-.2(("#"#
Font-Size
/3
-.3"#3.*"#
4536(7"#
!89:3"#
Font
/
.*;.)!"#
Color and Background Properties
Color
+
-."#-*<((((2("#
Vertical-Align
/1
1
=
5':1"#
5':1>(7"#
+1"#
Text-Transform
03%
?3@3?@
?@
1?@
-.+"#
-*+3"#
Text-Align
/A+A
-.+"#
+A"#
Background-Color
 
B9$C "#
-. <((((2("#
Text-Indent
/
%+
+>"#
Background-Image
 
B9$C ?;;@"#
 
?;;;@"#
Background-Repeat
$% 
!+1
31
1
B9$C ?@"
 +"#
Background-Attachment
$% 
%+1
B9$C ?@"
 %+"#
Background
/ 
B9$C 
?;;;@"#
B49DE/9!& <FG)"#
 ?; ;@<(2G%+"#
!0B4& ?1A@
"#
Line-Height
/+
*((7"#
Classication Properties
List-Style-Type
% 

G
45,,"#
/4"#
94"#;H0B$&H;
9494"#;H.*I)>H;
949494"#;H11H;
List-Style-Image
%        
     
 %
/4 ?;45 ;  @"#
/445+?+@"#
List-Style-Position
$ 
51inside
 
outside
/4"#
lOMoARcPSD|45316467
Style Sheets Cheatsheet (CSS 1&2)
page 2 of 2
Box
Properties
Margin-Top


B9$C>"#
Margin-Right


>(7"#
Margin-Bottom


$!I"#
Margin-Left


0$$8&>(7"#
Margin
        
        

B9$C>"#;H>H;
*)"#;HJ*J)
H;
$5K.*I)"#
;H.*I)H;
Padding-Top
$

*(7"#
Padding-Right
$

*(+"#
Padding-Bottom
$

>"#
Padding-Left
$

.>"#
Padding


B49DE/9!&*)>)"#
Border-Top-Width
/=
*(7"#
Border-Right-Width
/=
*(7"#
Border-Bottom-Width
/=

*(7"#
Border-Left-Width
/=
*(7"#
Border-Width
/=?

@
*(7"#
.(+>+.(+>+"#
Border-Color
/=
<((((("#
Border-Style


"#
Border-Top
=

.(+"#
Border-Right
=

.(+"#
Border-Bottom
=

.(+"#
Border-Left
=

.(+"#
Border
=
.(+"#
Width
& 11
%

.>+"#
-.I>7"#
"#
Height
& 11
%
.>+"#
-.I>7"#
"#
Float
0+?
@
L"#
-.L"#
L"#
Clear
%L
?@
"#
-."#
"#

Preview text:

lOMoARcPSD|45316467 lOMoARcPSD|45316467
Style Sheets Cheatsheet &66µ § page 1 of 2 Font Properties Text Properties Font-Family Word-Spacing
Changes the font family of certain words,
Defines an additional amount of space between words. sentences, paragraphs, etc. P EM { word-spacing: 0.4em; }
P { font-family: "New Century Schoolbook", Times, serif; }
P.note { word-spacing: -0.2em; } Font-Style Letter-Spacing
Changes text: normal, oblique, and italics.
Defines an additional amount of space between characters. H1 { font-style: oblique; } H1 { letter-spacing: 0.1em; } P.note { letter-spacing: - P { font-style: normal; } 0.1em; } Font-Variant Text-Decoration
Used to display font in normal or small-caps.
Allows text to be decorated through one of five
SPAN { font-variant: small-caps; } properties:
underline, overline, line-through, blink, none.
A:link, A:visited, A:active { text-decoration: none; } Font-Weight
Used to specify the weight of the font. Vertical-Align
H1 { font-weight: 800; } or P { font-weight: normal; }
Used to alter the vertical positioning of an inline
element, relative to its parent element or to the Font-Size element's line.
Used to modify the size of the displayed font.
IMG.middle { vertical-align: middle; }
H1 { font-size: large; } or P { font-size: 12pt; } IMG { vertical-align: 50%; } LI { font-size: 90%; }
.exponent { vertical-align: super; } STRONG { font-size: larger; } Text-Transform Font
Allows for capitalizing the first letter of each word
Used to combine all properties of fonts.
(capitalize), capitalizing all letters of a word (uppercase),
P { font: italic bold 12pt/14pt Times, serif; }
using all small letters in each word(lowercase), and the inital value(none).
H1 { text-transform: uppercase; }
Color and Background Properties
H2 { text-transform: capitalize; } Color Changes the color of text. Text-Align
H1 { color: blue; } or H2 { color: #000080; }
Used to justify text left, center, right, and justify. H1 { text-align: center; }
P.newspaper { text-align: justify; } Background-Color Text-Indent
Sets the background color of an element.
Used to specify the amount of indentation prior to the
BODY { background-color: white; } first line of text.
H1 { background-color: #000080; } P { text-indent: 5em; }
Used to combine all properties of background. Background-Image BODY { background: white
Sets the background image of an element.
url(http://www.htmlhelp.com/foo.gif); }
BODY { background-image: url(/images/foo.gif); }
BLOCKQUOTE { background: #7fffd4; } P { background-image:
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed; }
url(http://www.htmlhelp.com/bg.png); }
TABLE { background: red url(leaves.jpg) no-repeat bottom right; } Background-Repeat
Determines how a specified background image is
repeated. The repeat-x value will repeat the image
horizontally while the repeat-y value will repeat the image vertically.
BODY { background: white url(candybar.gif); background-repeat: repeat-x; } Background-Attachment
Determines if a specified background image will scroll
with the content or be fixed with regard to the canvas.
BODY { background: white url(candybar.gif);
background-attachment: fixed; } Background
OL OL OL { list-style-type: lower-roman; } /* i ii iii iv v etc. */ Line-Height
Used to control the spacing between baselines of text. List-Style-Image P { line-height: 200%; }
Specifies the image that will be used as list-item
marker when image loading is turned on, replacing
Classification Properties
the marker specified in the list-style-type property.
UL.check { list-style-image: url(/LI-markers/checkmark.gif); } List-Style-Type
UL LI.x { list-style-image: url(x.png); }
Specifies the type of list-item marker, and is used if
list-style-image is none or if image loading is turned List-Style-Position off.
Determines where the marker is placed in regard to
LI.square { list-style-type: square; }
the list item. If the value inside is used, the lines will
UL.plain { list-style-type: none; }
OL { list-style-type: upper-alpha; } /* A B C D E etc. */
wrap under the marker instead of being indented.
OL OL { list-style-type: decimal; } /* 1 2 3 4 5 etc. */ outside is default.
UL { list-style-position: inside; } lOMoARcPSD|45316467
Style Sheets Cheatsheet (CSS 1&2) page 2 of 2 Box Properties Margin-Top Border-Left-Width
Sets the top margin of an element by specifying a
Used to specify the width of an element's left border. length or a percentage. P { border-left: 20%; } BODY { margin-top: 5pt; } Border-Width Margin-Right
Used to set the width of an element's border (either all
Sets the right margin of an element by specifying a
borders, or specifying top border, right border, bottom length or a percentage. border, left border).
P.narrow { margin-right: 50%; } P { border-width: 20%; }
P { border-width: 10px 5px 10px 5px; } Margin-Bottom
sets the bottom margin of an element by specifying a Border-Color length or a percentage.
Used to set the color of an element's border. DT { margin-bottom: 3em; } P { border-color: #00000; } Margin-Left Border-Style
sets the left margin of an element by specifying a
Sets style of a border - none, dotted, dashed, solid, length or a percentage. double. ADDRESS { margin-left: 50%; } P { border-style: dotted; } Margin Border-Top
Sets the margins of an element by specifying top,
Sets the width, style, and color of an element's top
bottom, left and right margins -- all either specifying border. length or percentage.
P { border-top: 10px, red, double; }
BODY { margin: 5em; } /* all margins 5em */
P { margin: 2em 4em; } /* top & bottom 2em, left & right 4em Border-Right */
Sets the width, style, and color of an element's right
DIV { margin: 1em 2em 3em 4em; } border.
/* top margin 1em, right 2em, bottom 3em, left 4em */
P { border-right: 10px, red, double; } Padding-Top Border-Bottom
Describes the amount of space between the top
Sets the width, style, and color of an element's bottom
border and the content of the selector. border. P { padding-top: 20%; }
P { border-bottom: 10px, red, double; } Padding-Right Border-Left
Describes the amount of space between the right
Sets the width, style, and color of an element's left
border and the content of the selector. border. P { padding-right: 20 px; }
P { border-left: 10px, red, double; } Padding-Bottom Border
Describes the amount of space between the
Sets the width, style, and color of an element's border.
bottom border and the content of the selector.
P { border: 10px, red, double; } P { padding-bottom: 5 em; } Width Padding-Left
Each block-level or replaced element can be given
Describes the amount of space between the left
a width, specified as a length, a percentage, or as
border and the content of the selector. auto. P { padding-left: 15 pt; } P { width: 15px; } H1 { width: 35%; } Padding .foo { width: auto; }
Shorthand for the padding-top, padding-right, padding-
bottom, and padding-left properties. Height
BLOCKQUOTE { padding: 2em 4em 5em 4em; }
Each block-level or replaced element can be given a
height, specified as a length or as auto. Border-Top-Width P { height: 15px; }
Used to specify the width of an element's top border. H1 { height: 35%; } P { border-top: 20%; } .foo { height: auto; } Border-Right-Width Float
Used to specify the width of an element's right border.
Allows text to wrap around an element (left, right, P { border-right: 20%; } none). P { float: left; } Border-Bottom-Width H1 { float: right; }
Used to specify the width of an element's bottom .foo { float: none; } border. P { border-bottom: 20%; } Clear
Specifies whether an element allows floating
elements to its sides (left, right, none). P { clear: left; } .foo { clear: none; } H1 { clear: right; }