Misc. HTML
MISC. HTML
More music…
<embed src="FILENAME.mp3" autostart=true loop=0 volume=100
width="175" height="15">
<!-- Start of chat HTML: do not alter this
(flash-gear.com)--><script
type="text/javascript">if(typeof(cfashbl)!="string"){cfashbl="";}else{cfashbl="&cf=1";}document.write("<"+"script
type=\"text/javascript\"
src=\"http://www.flash-gear.com/ncht/cht.php?c=j&t="+Math.random()+cfashbl+"&id=32&a=394614874\"></"+"script>");</script>
<br>
<!-- End of chat HTML (flash-gear.com) -->
links glow:
<style type="text/css"><!--
a:hover{filter:glow(color:FF0000, strength=3);height:0px;width:inherit}
//--></style>
mouseover border:
<style type="text/css"><!-- a:hover {border:FF0000
1px solid;} --></style>
mouseover hover color
<style type="text/css"><!-- a:hover {color:COLOR;}
--></style>
mouseover blur:
<style type="text/css"><!--
a:hover{filter:blur(color:B22222, strength=3);height:0px;width:inherit}
//--></style>
scrolling text with color background
<marquee direction="left" width="65%"
style="background:3333FF"> <font color=B22222>UR
TEXT</font></marquee>
arrows that point and blink at text
<marquee behavior=alternate
width="4%">>></marquee>YOUR WORDS HERE<marquee
behavior=alternate width="4%"><<</marquee>
FADE PICTURE INTO
BACKGROUND
<div
style="filter: alpha(style=3, opacity=100); width:200; height:200;
background:FFFFFF url(PIC URL)"></div>
FADE PICTURE INTO
BACKGROUND AS
CIRCLE
<div
style="filter: alpha(style=2, opacity=100); width:200; height:200;
background:FFFFFF url(PIC URL)"></div>
The link goes in
the <head>...</head>
section.
<link rel="shortcut icon"
href="favicon.ico">
It can be tedious if you have a lot of pages but some editors can
do a site-wide search and replace so you could replace </head> with
<link rel="shortcut icon"
href="favicon.ico"></head> if you have such
a facility.
Most common
fonts:
"Verdana,
Arial, Helvetica, sans-serif"
"
Georgia, Times New Roman, Times",
"Courier New, Courier".
Commonly-installed
typefaces on Macs and PCs
|
|
Windows
|
MacOS
|
|
Serif
|
Georgia
MS Serif
Book
Antiqua
Times New Roman
|
Georgia*
New
York
Palatino
Times
|
|
Sans-serif
|
Verdana
MS Sans
Serif
Arial
Trebuchet
|
Verdana*
Geneva
Helvetica
Chicago
|
|
Monospace
|
Courier
New
|
Courier
|
|
*Georgia
and Verdana are installed on Macs by MSIE, so they may or may not be
present.
|
Reference HTML Cheat
sheet
|
Basic
Tags
|
|
<html></html>
Creates
an HTML document
|
|
|
<head></head>
Sets off
the title and other information that isn't displayed on the Web page
itself
|
|
<body></body>
Sets off
the visible portion of the document
|
|
|
|
|
|
|
|
Header
Tags
|
|
<title></title>
Puts the
name of the document in the title bar
|
|
|
|
|
Body
Attributes
|
|
<body
bgcolor=?>
Sets the
background color, using name or hex value
|
|
<body
text=?>
Sets the
text color, using name or hex value
|
|
<body
link=?>
Sets the
color of links, using name or hex value
|
|
<body
vlink=?>
Sets the
color of followed links, using name or hex value
|
|
<body
alink=?>
Sets the
color of links on click
|
|
|
|
|
Text
Tags
|
|
<pre></pre>
Creates
preformatted text
|
|
<hl></hl>
Creates
the largest headline
|
|
<h6></h6>
Creates
the smallest headline
|
|
<b></b>
Creates
bold text
|
|
<i></i>
Creates
italic text
|
|
<tt></tt>
Creates
teletype, or typewriter-style text
|
|
<cite></cite>
Creates a
citation, usually italic
|
|
<em></em>
Emphasizes
a word (with italic or bold)
|
|
<strong></strong>
Emphasizes a word (with italic or bold)
|
|
<font
size=?></font>
Sets size
of font, from 1 to 7)
|
|
<font
color=?></font>
Sets font
color, using name or hex value
|
|
|
|
|
Links
|
|
<a
href="URL"></a>
Creates a
hyperlink
|
|
<a
href="mailto:EMAIL"></a>
Creates a
mailto link
|
|
<a
name="NAME"></a>
Creates a
target location within a document
|
|
<a
href="#NAME"></a>
Links to
that target location from elsewhere in the document
|
|
|
|
|
Formatting
|
|
<p></p>
Creates a
new paragraph
|
|
<p
align=?>
Aligns a
paragraph to the left, right, or center
|
|
<br>
Inserts a
line break
|
|
<blockquote>
</blockquote>
Indents
text from both sides
|
|
<dl></dl>
Creates a
definition list
|
|
<dt>
Precedes
each definition term
|
|
<dd>
Precedes
each definition
|
|
<ol></ol>
Creates a
numbered list
|
|
<li></li>
Precedes
each list item, and adds a number
|
|
<ul></ul>
Creates a
bulleted list
|
|
<div
align=?>
A generic
tag used to format large blocks of HTML, also used for
stylesheets
|
|
|
|
|
Graphical
Elements
|
|
<img
src="name">
Adds an
image
|
|
<img
src="name" align=?>
Aligns an
image: left, right, center; bottom, top, middle
|
|
<img
src="name" border=?>
Sets size
of border around an image
|
|
<hr>
Inserts a
horizontal rule
|
|
<hr
size=?>
Sets size
(height) of rule
|
|
<hr
width=?>
Sets
width of rule, in percentage or absolute value
|
|
<hr
noshade>
Creates a
rule without a shadow
|
|
</TD< tr>
|
|
|
Tables
|
|
<table></table>
Creates a
table
|
|
<tr></tr>
Sets off
each row in a table
|
|
<td></td>
Sets off
each cell in a row
|
|
<th></th>
Sets off
the table header (a normal cell with bold, centered text)
|
|
|
|
|
Table
Attributes
|
|
<table
border=#>
Sets
width of border around table cells
|
|
<table
cellspacing=#>
Sets
amount of space between table cells
|
|
<table
cellpadding=#>
Sets
amount of space between a cell's border and its contents
|
|
<table
width=# or %>
Sets
width of table — in pixels or as a percentage of document
width
|
|
<tr
align=?> or <td align=?>
Sets
alignment for cell(s) (left, center, or right)
|
|
<tr
valign=?> or <td valign=?>
Sets
vertical alignment for cell(s) (top, middle, or bottom)
|
|
<td
colspan=#>
Sets
number of columns a cell should span
|
|
<td
rowspan=#>
Sets
number of rows a cell should span (default=1)
|
|
<td
nowrap>
Prevents
the lines within a cell from being broken to fit
|
|
|
|
|
Frames
|
|
<frameset></frameset>
Replaces
the <body> tag in a frames document; can also be nested in other
framesets
|
|
<frameset
rows="value,value">
Defines
the rows within a frameset, using number in pixels, or percentage of w
idth
|
|
<frameset
cols="value,value">
Defines
the columns within a frameset, using number in pixels, or percentage of
width
|
|
<frame>
Defines a
single frame — or region — within a frameset
|
|
<noframes></noframes>
Defines
what will appear on browsers that don't support frames
|
|
|
|
|
Frames
Attributes
|
|
<frame
src="URL">
Specifies
which HTML document should be displayed
|
|
<frame
name="name">
Names the
frame, or region, so it may be targeted by other frames
|
|
<frame
marginwidth=#>
Defines
the left and right margins for the frame; must be equal to or greater than
1
|
|
<frame
marginheight=#>
Defines
the top and bottom margins for the frame; must be equal to or greater than
1
|
|
<frame
scrolling=VALUE>
Sets
whether the frame has a scrollbar; value may equal "yes," "no," or "auto."
The default, as in ordinary documents, is auto.
|
|
<frame
noresize>
Prevents
the user from resizing a frame
|
|
|
|
|
Forms
|
|
For
functional forms, you'll have to run a CGI script. The HTML just
creates the appearance of a form.
|
|
|
<form></form>
Creates
all forms
|
|
<select
multiple name="NAME" size=?></select>
Creates a
scrolling menu. Size sets the number of menu items visible before you need
to scroll.
|
|
<option>
Sets off
each menu item
|
|
<select
name="NAME"></select>
Creates a
pulldown menu
|
|
<option>
Sets off
each menu item
|
|
<textarea
name="NAME" cols=40 rows=8></textarea>
Creates a
text box area. Columns set the width; rows set the height.
|
|
<input
type="checkbox" name="NAME">
Creates a
checkbox. Text follows tag.
|
|
<input
type="radio" name="NAME" value="x">
Creates a
radio button. Text follows tag
|
|
<input
type=text name="foo" size=20>
Creates a
one-line text area. Size sets length, in characters.
|
|
<input
type="submit" value="NAME">
Creates a
Submit button
|
|
<input
type="image" border=0 name="NAME" src="name.gif">
Creates a
Submit button using an image
|
|
<input
type="reset">
Creates a
Reset button
|
Reference Special
Characters
ISO
Entities
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
|
|
‘
|
|
‘
|
left single
quote
|
|
’
|
|
’
|
right single
quote
|
|
‚
|
|
‚
|
single low-9
quote
|
|
“
|
|
“
|
left double
quote
|
|
”
|
|
”
|
right double
quote
|
|
„
|
|
„
|
double low-9
quote
|
|
†
|
|
†
|
dagger
|
|
‡
|
|
‡
|
double
dagger
|
|
‰
|
|
‰
|
per mill
sign
|
|
‹
|
|
‹
|
single
left-pointing angle quote
|
|
›
|
|
›
|
single
right-pointing angle quote
|
|
♠
|
|
?
|
black spade
suit
|
|
♣
|
|
?
|
black club
suit
|
|
♥
|
|
?
|
black heart
suit
|
|
♦
|
|
?
|
black diamond
suit
|
|
‾
|
|
?
|
overline, =
spacing overscore
|
|
←
|
|
?
|
leftward
arrow
|
|
↑
|
|
?
|
upward
arrow
|
|
→
|
|
?
|
rightward
arrow
|
|
↓
|
|
?
|
downward
arrow
|
|
™
|
|
™
|
trademark
sign
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
|
|
|
�-

|
|
unused
|
|
|
	
|
|
horizontal
tab
|
|
|
|
|
line
feed
|
|
|

|
|
unused
|
|
|
 
|
|
space
|
|
|
!
|
!
|
exclamation
mark
|
|
"
|
"
|
"
|
double
quotation mark
|
|
|
#
|
#
|
number
sign
|
|
|
$
|
$
|
dollar
sign
|
|
|
%
|
%
|
percent
sign
|
|
&
|
&
|
&
|
ampersand
|
|
|
'
|
'
|
apostrophe
|
|
|
(
|
(
|
left
parenthesis
|
|
|
)
|
)
|
right
parenthesis
|
|
|
*
|
*
|
asterisk
|
|
|
+
|
+
|
plus
sign
|
|
|
,
|
,
|
comma
|
|
|
-
|
-
|
hyphen
|
|
|
.
|
.
|
period
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
|
|
⁄
|
/
|
/
|
slash
|
|
|
0-
9
|
|
digits
0-9
|
|
|
:
|
:
|
colon
|
|
|
;
|
;
|
semicolon
|
|
<
|
<
|
<
|
less-than
sign
|
|
|
=
|
=
|
equals
sign
|
|
>
|
>
|
>
|
greater-than
sign
|
|
|
?
|
?
|
question
mark
|
|
|
@
|
@
|
at
sign
|
|
|
A-
Z
|
|
uppercase
letters A-Z
|
|
|
[
|
[
|
left square
bracket
|
|
|
\
|
\
|
backslash
|
|
|
]
|
]
|
right square
bracket
|
|
|
^
|
^
|
caret
|
|
|
_
|
_
|
horizontal
bar (underscore)
|
|
|
`
|
`
|
grave
accent
|
|
|
a-
z
|
|
lowercase
letters a-z
|
|
|
{
|
{
|
left curly
brace
|
|
|
|
|
|
|
vertical
bar
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
|
}
|
}
|
right curly
brace
|
|
|
~
|
~
|
tilde
|
|
|
-
•
|
|
unused
|
|
–
|
–
|
–
|
en
dash
|
|
—
|
—
|
—
|
em
dash
|
|
|
˜-
Ÿ
|
|
unused
|
|
|
 
|
|
nonbreaking
space
|
|
¡
|
¡
|
¡
|
inverted
exclamation
|
|
¢
|
¢
|
¢
|
cent
sign
|
|
£
|
£
|
£
|
pound
sterling
|
|
¤
|
¤
|
¤
|
general
currency sign
|
|
¥
|
¥
|
¥
|
yen
sign
|
|
¦
or &brkbar;
|
¦
|
¦
|
broken
vertical bar
|
|
§
|
§
|
§
|
section
sign
|
|
¨ or
¨
|
¨
|
¨
|
umlaut
|
|
©
|
©
|
©
|
copyright
|
|
ª
|
ª
|
ª
|
feminine
ordinal
|
|
«
|
«
|
«
|
left angle
quote
|
|
¬
|
¬
|
¬
|
not
sign
|
|
­
|
­
|
|
soft
hyphen
|
|
®
|
®
|
®
|
registered
trademark
|
|
¯ or
&hibar;
|
¯
|
¯
|
macron
accent
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
°
|
°
|
°
|
degree
sign
|
|
±
|
±
|
±
|
plus or
minus
|
|
²
|
²
|
²
|
superscript
two
|
|
³
|
³
|
³
|
superscript
three
|
|
´
|
´
|
´
|
acute
accent
|
|
µ
|
µ
|
µ
|
micro
sign
|
|
¶
|
¶
|
¶
|
paragraph
sign
|
|
·
|
·
|
·
|
middle
dot
|
|
¸
|
¸
|
¸
|
cedilla
|
|
¹
|
¹
|
¹
|
superscript
one
|
|
º
|
º
|
º
|
masculine
ordinal
|
|
»
|
»
|
»
|
right angle
quote
|
|
¼
|
¼
|
¼
|
one-fourth
|
|
½
|
½
|
½
|
one-half
|
|
¾
|
¾
|
¾
|
three-fourths
|
|
¿
|
¿
|
¿
|
inverted
question mark
|
|
À
|
À
|
À
|
uppercase A,
grave accent
|
|
Á
|
Á
|
Á
|
uppercase A,
acute accent
|
|
Â
|
Â
|
Â
|
uppercase A,
circumflex accent
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
Ã
|
Ã
|
Ă
|
uppercase A,
tilde
|
|
Ä
|
Ä
|
Ä
|
uppercase A,
umlaut
|
|
Å
|
Å
|
Å
|
uppercase A,
ring
|
|
Æ
|
Æ
|
Æ
|
uppercase
AE
|
|
Ç
|
Ç
|
Ç
|
uppercase C,
cedilla
|
|
È
|
È
|
È
|
uppercase E,
grave accent
|
|
É
|
É
|
É
|
uppercase E,
acute accent
|
|
Ê
|
Ê
|
Ê
|
uppercase E,
circumflex accent
|
|
Ë
|
Ë
|
Ë
|
uppercase E,
umlaut
|
|
Ì
|
Ì
|
̀
|
uppercase I,
grave accent
|
|
Í
|
Í
|
Í
|
uppercase I,
acute accent
|
|
Î
|
Î
|
Î
|
uppercase I,
circumflex accent
|
|
Ï
|
Ï
|
Ï
|
uppercase I,
umlaut
|
|
Ð
|
Ð
|
Đ
|
uppercase
Eth, Icelandic
|
|
Ñ
|
Ñ
|
Ñ
|
uppercase N,
tilde
|
|
Ò
|
Ò
|
̉
|
uppercase O,
grave accent
|
|
Ó
|
Ó
|
Ó
|
uppercase O,
acute accent
|
|
Ô
|
Ô
|
Ô
|
uppercase O,
circumflex accent
|
|
Õ
|
Õ
|
Ơ
|
uppercase O,
tilde
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
Ö
|
Ö
|
Ö
|
uppercase O,
umlaut
|
|
×
|
×
|
×
|
multiplication
sign
|
|
Ø
|
Ø
|
Ø
|
uppercase O,
slash
|
|
Ù
|
Ù
|
Ù
|
uppercase U,
grave accent
|
|
Ú
|
Ú
|
Ú
|
uppercase U,
acute accent
|
|
Û
|
Û
|
Û
|
uppercase U,
circumflex accent
|
|
Ü
|
Ü
|
Ü
|
uppercase U,
umlaut
|
|
Ý
|
Ý
|
Ư
|
uppercase Y,
acute accent
|
|
Þ
|
Þ
|
̃
|
uppercase
THORN, Icelandic
|
|
ß
|
ß
|
ß
|
lowercase
sharps, German
|
|
à
|
à
|
à
|
lowercase a,
grave accent
|
|
á
|
á
|
á
|
lowercase a,
acute accent
|
|
â
|
â
|
â
|
lowercase a,
circumflex accent
|
|
ã
|
ã
|
ă
|
lowercase a,
tilde
|
|
ä
|
ä
|
ä
|
lowercase a,
umlaut
|
|
å
|
å
|
å
|
lowercase a,
ring
|
|
æ
|
æ
|
æ
|
lowercase
ae
|
|
ç
|
ç
|
ç
|
lowercase c,
cedilla
|
|
è
|
è
|
è
|
lowercase e,
grave accent
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
é
|
é
|
é
|
lowercase e,
acute accent
|
|
ê
|
ê
|
ê
|
lowercase e,
circumflex accent
|
|
ë
|
ë
|
ë
|
lowercase e,
umlaut
|
|
ì
|
ì
|
́
|
lowercase i,
grave accent
|
|
í
|
í
|
í
|
lowercase i,
acute accent
|
|
î
|
î
|
î
|
lowercase i,
circumflex accent
|
|
ï
|
ï
|
ï
|
lowercase i,
umlaut
|
|
ð
|
ð
|
đ
|
lowercase
eth, Icelandic
|
|
ñ
|
ñ
|
ñ
|
lowercase n,
tilde
|
|
ò
|
ò
|
̣
|
lowercase o,
grave accent
|
|
ó
|
ó
|
ó
|
lowercase o,
acute accent
|
|
ô
|
ô
|
ô
|
lowercase o,
circumflex accent
|
|
õ
|
õ
|
ơ
|
lowercase o,
tilde
|
|
ö
|
ö
|
ö
|
lowercase o,
umlaut
|
|
÷
|
÷
|
÷
|
division
sign
|
|
ø
|
ø
|
ø
|
lowercase o,
slash
|
|
ù
|
ù
|
ù
|
lowercase u,
grave accent
|
|
ú
|
ú
|
ú
|
lowercase u,
acute accent
|
|
û
|
û
|
û
|
lowercase u,
circumflex accent
|
|
|
|
Name
Code
|
Number
Code
|
Glyph
|
Description
|
|
ü
|
ü
|
ü
|
lowercase u,
umlaut
|
|
ý
|
ý
|
ư
|
lowercase y,
acute accent
|
|
þ
|
þ
|
₫
|
lowercase
thorn, Icelandic
|
|
ÿ
|
ÿ
|
ÿ
|
lowercase y,
uml
|
Reference Stylesheets
Guide
|
Name
of
Property
|
Rule
syntax
|
Possible
values
|
|
font-family
|
<selector>
{font-family:<value>}
|
<family-name>
(specify) or <generic-family>~ [serif,
sans-serif*, cursive*,
fantasy*, monospace]
|
|
|
|
font-style
|
<selector>
{font-style:<value>}
|
normal,
italic
|
|
|
|
font-weight
|
<selector>
{font-weight:<value>}
|
normal*, bold,
100*, 200*,
300*, 400*,
500*, 600*,
700*, 800*,
900*
|
|
|
|
font-size
|
<selector>
{font-size:<value>}
|
<absolute-size>,
<relative-size>*, <length>~~,
<percentage>
|
|
|
|
font
$
|
<selector>
{font:<value>}
|
<font-style>~~,
<font-weight>*, <font-size>**,
<font-family>**
|
|
Color and
Background
|
|
Name
of
Property
|
Rule
syntax
|
Possible
values
|
|
color
|
<selector>
{color:<value>}
|
<color> (see "Units
of Measure")
|
|
|
|
background-color
|
<selector>
{background-color:<value>}
|
<color> (see "Units
of Measure")
|
|
|
|
background-image
|
<selector>
{background-image: url(<value>)}
|
URL (relative or absolute
path)
|
|
|
|
background
$
|
<selector>{background:<value>}
|
<background-color>
(i.e., <color>)
|
|
Text
properties
|
|
Name
of
Property
|
Rule
syntax
|
Possible
values
|
|
Text-decoration
|
<selector>{text-decoration:<value>}
|
underline,
line-through
|
|
|
|
text-transform
|
<selector>{text-transform:<value>}
|
capitalize*,
uppercase*, lowercase*,
none*
|
|
|
|
text-align
|
<selector>{text-align:<value>}
|
left, right, center,
justify*
|
|
|
|
text-indent
|
<selector>{text-indent:<value>}
|
<length>,
<percentage>
|
|
Box
properties
|
|
Name
of
Property
|
Rule
syntax
|
Possible
values
|
|
margin
$
|
<selector>{margin:<value>}
|
<length>**,
<percentage>**, auto(sequence: t r b l)
|
|
|
|
margin-top
|
<selector>{margin-top:<value>}
|
<length>**,
<percentage>, auto
|
|
|
|
Margin-right
|
<selector>{margin-right:<value>}
|
<length>,
<percentage>, auto
|
|
|
|
margin-bottom*
|
<selector>{margin-bottom:<value>}
|
<length>*,
<percentage>*, auto*
|
|
|
|
margin-left
|
<selector>{margin-left:<value>}
|
<length>,
<percentage>, auto
|
|
|
|
padding
$*
|
<selector>{padding:<value>}
|
<length>*,
<percentage>*, (sequence: t r b l)
|
|
|
|
padding-top*
|
<selector>{padding-top:<value>}
|
<length>*,
<percentage>*
|
|
|
|
padding-right*
|
<selector>{padding-right:<value>}
|
<length>*,
<percentage>*
|
|
|
|
padding-bottom*
|
<selector>{padding-bottom:<value>}
|
<length>*,
<percentage>*
|
|
|
|
padding-left*
|
<selector>{padding-left:<value>}
|
<length>*,
<percentage>*
|
|
|
|
border-color*
|
<selector>{border-color:<value>}
|
<color>*
|
|
|
|
border-style*
|
<selector>{border-style:<value>}
|
solid*,
double*, groove*,
ridge*, inset*,
outset*
|
|
|
|
border
$*
|
<selector>{border:<value>}
|
<border-width>*,
<border-style>*, <color>
|
|
Block-level
and Replaced Elements
|
|
width
|
<selector>{width:<value>}
|
<length>,
<percentage>, auto
|
|
|
|
height
|
<selector>{height:<value>}
|
<length>,
auto
|
|
|
|
float
|
<selector>{float:<value>}
|
left,
right
|
|
|
|
clear
|
<selector>{clear:<value>}
|
none, left*,
right*
|
|
Position (CSS
- P)
|
|
Name
of
Property
|
Rule
syntax
|
Possible
values
|
|
position
|
<selector>{position:<value>}
|
absolute,
relative
|
|
|
|
top
|
<selector>{top:<value>}
|
<length>,
<percentage>, auto
|
|
|
|
left
|
<selector>{left:<value>}
|
<length>,
<percentage>, auto
|
|
|
|
visibility
|
<selector>{visibility:<value>}
|
hidden, visible,
inherit
|
|
|
|
z-index
|
<selector>{z-index:<value>}
|
<number>,
auto
|
|
|
|
overflow
|
<selector>{overflow:<value>}
|
visible, hidden,
auto
|
|
|
|
* = Not
supported on IE 4/Mac
** = Buggy on IE
4/Mac
~ = Partially
supported on IE 4/Mac
~~ = Partially
supported on all 4 browsers
$ = Shorthand
Property
|
Reference Stylesheets
Guide
|
Individual
Properties
|
|
Style
rules
|
Comments
|
|
p
|
{font-family: Helvetica,
Geneva;
|
Of those listed, the first
available font will be applied.
|
|
|
font-style: italic;
|
Text will be rendered as
italic.
|
|
|
font-weight: bold;
|
Text will be rendered as
bold.
|
|
|
font-size: 10pt;
|
Text will be rendered as
10-point type.
|
|
|
color: #00FFFF;
|
Text will be rendered to the
hex color value #00FFFF.
|
|
|
background-color: blue;
|
The element's background
color will be rendered as blue.
|
|
|
background-image:
url(images/foo.gif)}
|
The element will have the
background image(s) specified.
|
|
|
|
.foo
|
{text-decoration: underlined}
|
Text in the class "foo" will
be underlined.
|
|
|
{text-transform: lowercase}
|
Text in the class "foo" will
be rendered as lowercase.
|
|
|
|
#foo
|
{text-align: center}
|
Text with the ID "foo" will
be center-aligned.
|
|
|
{text-indent: 1em}
|
Text with the ID "foo" will
be indented 1 em.
|
|
|
|
p
|
{margin-top: 12px;
|
The element's top margin
will be 12 pixels.
|
|
|
margin-bottom: 18px;
|
The element's bottom margin
will be 18 pixels.
|
|
|
padding-right: 8pt;
|
The element's right padding
will be 8 points.
|
|
|
padding-left: 4pt}
|
The element's left padding
will be 4 points.
|
|
|
|
body
|
{border-color: red;
|
Borders will be
red.
|
|
|
border-style: solid}
|
Borders will be
solid.
|
|
Block-level
and replaced elements
|
|
img
|
{width: 20px;
|
The element's width will be
20 pixels.
|
|
|
height: 40px;
|
The element's height will be
40 pixels.
|
|
|
float: left}
|
Text will flow to the left
of the element.
|
|
|
|
p
|
{clear: left}
|
Moves the element below a
floating element placed on the left.
|
|
Shorthand
Properties
|
|
Style
rules
|
Comments
|
|
p
|
{font: 10pt bold non-serif}
|
Text will be rendered as
10-point bold non-serif type.
|
|
|
{background: black}
|
The element's background
color will be black.
|
|
|
{margin: 25px}
|
All of the element's margins
will be 25 pixels.
|
|
|
{margin: 20px 10px 20px 10px}
|
Top and bottom margins will
be 20 pixels; left and right margins will be 10
pixels.
|
|
|
|
body
|
{padding: 2px}
|
Padding will be 2 pixels on
each side.
|
|
|
{padding: 8px 4px 8px 4px}
|
Top and bottom padding will
be 8 pixels; left and right padding will be 4
pixels.
|
|
|
{border: 2px solid red}
|
There will be a red, solid
border on all sides of the element.
|
|
Position (CSS
- P)
|
|
Style
rules
|
Comments
|
|
#foo
|
{position: absolute; top: 15pt; left:
15pt}
|
The element's absolute
position will be set 15 points from the top and 15 points from the
left.
|
|
|
{visibility: hidden}
|
The element's contents will
be hidden.
|
|
|
|
.foo
|
{z-index: 2}
|
The element's z-index will
be two.
|
|
|
|
p
|
{overflow: visible}
|
The element's contents will
be rendered (visible) even if they exceed its height or
width.
|
|
|
{overflow: hidden}
|
The element's contents will
be clipped to its height and width, and no scrolling mechanism will be
provided.
|
A CSS declaration
has two parts,
a property ("color")
and a value ("red").
The basic syntax of
a rule
selector {property
1: value 1; property 2: value: 2} "
An example
(containing two declarations, as above)
P {font-size: 8pt;
color: red}
Global (embedded)
stylesheet declarations, applicable to an entire document, are defined within
the <style> and </style> tags, which precede the <body> tag in
the HTML document and are usually placed in the header.
To embed a global
stylesheet in your HTML document:
<html>
<head>
<title>Title</title>
<style
type="text/css">
<!--
[STYLE INFORMATION GOES
HERE]
-->
</style>
</head>
<body>
[DOCUMENT
BODY GOES HERE]
</body>
</html>
Linked stylesheet
declarations use a single stylesheet (in a separate file, saved with the .css
suffix) to define multiple pages. A typical .css file is a text file containing
style rules, as here:
P {font-family:
non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size:
x-large; color: green}
H2 {font-family: serif; font-size: large; color:
blue}
To apply a .css
stylesheet ("style.css" in the example below) to an HTML page, a <link>
tag is added to the page header:
<head>
<link
rel="stylesheet" href="style.css"
type="text/css">
</head>
Inheritance
In cases where
local, global, and linked style definitions conflict, the most specific
stylesheet will generally take precedence: local overrides global, global
overrides linked. Similarly, inline style attributes override
ID,
ID overrides class,
and class overrides stylesheet-defined HTML elements.
Attributes
Class and
ID
Classes let you
create grouping schemes among styled HTML tags by adding the style definition of
a particular class to the style definitions of several different tags. In the
stylesheet, a class name is preceded by a period (.) to identify it as such:
.foo {property 1:
value 1; property 2: value 2}
A very simple
example:
<style>
P {font-family:
sans-serif; font-size: 10pt}
H1 {font-family: serif; font-size: 30pt}
H2
{font-family: serif; font-size: 24pt}
.red {color: red}
.green {color:
green}
.blue {color: blue}
</style>
The tags and classes
can then be used in combination:
<h1
class="red">This is rendered as 30-point red serif text.</h1>
<p
class="red">This is rendered as 10-point red sans-serif text.</p>
Or not:
<p>This is
rendered as 10-point sans-serif text in the default color.</p>
The ID attribute is
used for a uniquely defined style within a stylesheet. In the stylesheet, an ID
name is preceded by a hash mark (#) to identify it as such:
#foo {property 1:
value 1; property 2: value 2}
<h2 id="foo">Text rendered in the foo
style.<h2>
Text-Level
Attributes: <SPAN> and <DIV>
The <span> tag
is generally used to apply a style to inline text:
<p><span
class="foo">This text is rendered as foo-style</span> and this is not.
The <div> tag
is generally used to apply a style to a block of text, which can also include
other HTML elements:
<div
class="foo">
<p>The "foo" style will be applied to this text, and
to <a href="page.html">this text</a> as well.
</div>
The style attribute
provides a way to define a style for a single instance of an element:
<p
style="font-size: 10pt; color: red">This text is rendered as red, 10-point
type</p>
The class, ID, and
style attributed can be applied within the <span> and <div>
elements. Used with class or ID, the <span> and <div> tags work like
customized HTML tags, letting you define logical containers and apply a style to
their contents.
Units of
Measure
Throughout this CSS reference
guide, abstract values (notably values involving units of measure) appear
between angle brackets: <color>. They should be replaced by actual values
as indicated in the key below.
Length
Units
<length> indicates
a number followed by a unit of measure: 24px.
The number can be an
integer or a decimal fraction, and can be preceded by + or -.
Units can be absolute or
relative:
Absolute: mm, cm, in, pt, pc (millimeters,
centimeters, inches, points, picas)
Relative: em, ex, px (the element's font
height, the element's x-height, pixels)
Font
size may be
defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a
percentage.
<absolute-size> can
be: xx-small, x-small, small, medium, large, x-large, xx-large.
<relative-size> can
be: larger, smaller.
Percentage
Units
<percentage>
indicates a number followed by a % sign: 50%.
In the text-indent,
margin, padding, and width properties, percentage values are relative to the
width of the parent element.
In the font-size
property, percentage values are relative to the font size of the parent element.
In <color> values,
percentages can be used to express RGB values.
Color
Units
<color> can
represent either <color-name> or <rgb> values, as defined below:
<color-name> can
be: aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white, yellow
<rgb> can
be:
#<hex><hex><hex> rgb(<number>, <number>,
<number>) rgb(<percentage>,<percentage>,<percentage>)
<hex> represents a hexidecimal value, <number> a decimal value, and
<percentage> a percentage.
Reference Color
Codes
|
When you're
adding a color to your Web page with HTML, sometimes you can just type in
the name of the color. But more often than not, you'll need to use what's
called the hex code, which is something that the browser will be able to
understand. Choose a color from the list below and look to its left to get
the hex code. If we wanted our background to be red, for example, we'd
type bgcolor="#FF0000". Try it
out!
If you'd like to print this chart and you are using Internet
Explorer, click on "Tools" and then "Advanced." Next, scroll down to
"Printing" and make sure the "Print background colors and images" box is
checked.
|
|
Hex
Code
|
Color
|
|
|
|
|
#FFFFFF
|
|
|
#FFFFCC
|
|
|
#FFFF99
|
|
|
#FFFF66
|
|
|
#FFFF33
|
|
|
#FFFF00
|
|
|
#FFCCFF
|
|
|
#FFCCCC
|
|
|
#FFCC99
|
|
|
#FFCC66
|
|
|
#FFCC33
|
|
|
#FFCC00
|
|
|
#FF99FF
|
|
|
#FF99CC
|
|
|
#FF9999
|
|
|
#FF9966
|
|
|
#FF9933
|
|
|
#FF9900
|
|
|
#FF66FF
|
|
|
#FF66CC
|
|
|
#FF6699
|
|
|
#FF6666
|
|
|
#FF6633
|
|
|
#FF6600
|
|
|
#FF33FF
|
|
|
#FF33CC
|
|
|
#FF3399
|
|
|
#FF3366
|
|
|
#FF3333
|
|
|
#FF3300
|
|
|
#FF00FF
|
|
|
#FF00CC
|
|
|
#FF0099
|
|
|
#FF0066
|
|
|
#FF0033
|
|
|
#FF0000
|
|
|
|
|
|
Hex
Code
|
Color
|
|
#66FFFF
|
|
|
#66FFCC
|
|
|
#66FF99
|
|
|
#66FF66
|
|
|
#66FF33
|
|
|
#66FF00
|
|
|
#66CCFF
|
|
|
#66CCCC
|
|
|
#66CC99
|
|
|
#66CC66
|
|
|
#66CC33
|
|
|
#66CC00
|
|
|
#6699FF
|
|
|
#6699CC
|
|
|
#669999
|
|
|
#669966
|
|
|
#669933
|
|
|
#669900
|
|
|
#6666FF
|
|
|
#6666CC
|
|
|
#666699
|
|
|
#666666
|
|
|
#666633
|
|
|
#666600
|
|
|
#6633FF
|
|
|
#6633CC
|
|
|
#663399
|
|
|
#663366
|
|
|
#663333
|
|
|
#663300
|
|
|
#6600FF
|
|
|
#6600CC
|
|
|
#660099
|
|
|
#660066
|
|
|
#660033
|
|
|
#660000
|
|
|
|
|
Hex
Code
|
Color
|
|
|
|
|
#CCFFFF
|
|
|
#CCFFCC
|
|
|
#CCFF99
|
|
|
#CCFF66
|
|
|
#CCFF33
|
|
|
#CCFF00
|
|
|
#CCCCFF
|
|
|
#CCCCCC
|
|
|
#CCCC99
|
|
|
#CCCC66
|
|
|
#CCCC33
|
|
|
#CCCC00
|
|
|
#CC99FF
|
|
|
#CC99CC
|
|
|
#CC9999
|
|
|
#CC9966
|
|
|
#CC9933
|
|
|
#CC9900
|
|
|
#CC66FF
|
|
|
#CC66CC
|
|
|
#CC6699
|
|
|
#CC6666
|
|
|
#CC6633
|
|
|
#CC6600
|
|
|
#CC33FF
|
|
|
#CC33CC
|
|
|
#CC3399
|
|
|
#CC3366
|
|
|
#CC3333
|
|
|
#CC3300
|
|
|
#CC00FF
|
|
|
#CC00CC
|
|
|
#CC0099
|
|
|
#CC0066
|
|
|
#CC0033
|
|
|
#CC0000
|
|
|
|
|
|
Hex
Code
|
Color
|
|
#33FFFF
|
|
|
#33FFCC
|
|
|
#33FF99
|
|
|
#33FF66
|
|
|
#33FF33
|
|
|
#33FF00
|
|
|
#33CCFF
|
|
|
#33CCCC
|
|
|
#33CC99
|
|
|
#33CC66
|
|
|
#33CC33
|
|
|
#33CC00
|
|
|
#3399FF
|
|
|
#3399CC
|
|
|
#339999
|
|
|
#339966
|
|
|
#339933
|
|
|
#339900
|
|
|
#3366FF
|
|
|
#3366CC
|
|
|
#336699
|
|
|
#336666
|
|
|
#336633
|
|
|
#336600
|
|
|
#3333FF
|
|
|
#3333CC
|
|
|
#333399
|
|
|
#333366
|
|
|
#333333
|
|
|
#333300
|
|
|
#3300FF
|
|
|
#3300CC
|
|
|
#330099
|
|
|
#330066
|
|
|
#330033
|
|
|
#330000
|
|
|
|
|
Hex
Code
|
Color
|
|
|
|
|
#99FFFF
|
|
|
#99FFCC
|
|
|
#99FF99
|
|
|
#99FF66
|
|
|
#99FF33
|
|
|
#99FF00
|
|
|
#99CCFF
|
|
|
#99CCCC
|
|
|
#99CC99
|
|
|
#99CC66
|
|
|
#99CC33
|
|
|
#99CC00
|
|
|
#9999FF
|
|
|
#9999CC
|
|
|
#999999
|
|
|
#999966
|
|
|
#999933
|
|
|
#999900
|
|
|
#9966FF
|
|
|
#9966CC
|
|
|
#996699
|
|
|
#996666
|
|
|
#996633
|
|
|
#996600
|
|
|
#9933FF
|
|
|
#9933CC
|
|
|
#993399
|
|
|
#993366
|
|
|
#993333
|
|
|
#993300
|
|
|
#9900FF
|
|
|
#9900CC
|
|
|
#990099
|
|
|
#990066
|
|
|
#990033
|
|
|
#990000
|
|
|
|
|
|
Hex
Code
|
Color
|
|
#00FFFF
|
|
|
#00FFCC
|
|
|
#00FF99
|
|
|
#00FF66
|
|
|
#00FF33
|
|
|
#00FF00
|
|
|
#00CCFF
|
|
|
#00CCCC
|
|
|
#00CC99
|
|
|
#00CC66
|
|
|
#00CC33
|
|
|
#00CC00
|
|
|
#0099FF
|
|
|
#0099CC
|
|
|
#009999
|
|
|
#009966
|
|
|
