Webmonkey » Cheat Sheets

Webmonkey » Cheat Sheets http://www.webmonkey.com The Web Developer's Resource Fri, 05 Apr 2013 20:20:46 +0000 en-US hourly 1 http://wordpress.org/?v=3.4.2 HTML Cheatsheet http://www.webmonkey.com/2010/02/html_cheatsheet/ http://www.webmonkey.com/2010/02/html_cheatsheet/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=387

Keep this cheatsheet handy — it contains the most common HTML tags and their proper syntax.

Contents

Basic Tags
Body Attributes
Text Tags
Links
Formatting
Tables
Table Attributes
Frames
Frames Attributes
Forms

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

Body Attributes

<body bgcolor="pink"> Sets the background color, using name or hex value

<body text="black"> Sets the text color, using name or hex value

<body link="blue"> Sets the color of links, using name or hex value

<body vlink="#ff0000"> Sets the color of followed links, using name or hex value

<body alink="#00ff00"> Sets the color of links on click

<body ondragstart="return false" onselectstart="return false"> Disallows text selection with the mouse and keyboard

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="3"></font> Sets size of font, from 1 to 7

<font color="green"></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 href="URL"><img src="URL"> </a> Creates an image/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="left"> Aligns a paragraph to the left (default), 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

<ul></ul> Creates a bulleted list

<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected

<div align="left"> A generic tag used to format large blocks of HTML, also used for stylesheets

<img src="name"> Adds an image

<img src="name" align="left"> Aligns an image: left, right, center; bottom, top, middle

<img src="name" border="1"> Sets size of border around an image

<hr /> Inserts a horizontal rule

<hr size="3" /> Sets size (height) of rule

<hr width="80%" /> Sets width of rule, in percentage or absolute value

<hr noshade /> Creates a rule without a shadow

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="1"> Sets width of border around table cells

<table cellspacing="1"> Sets amount of space between table cells

<table cellpadding="1"> Sets amount of space between a cell’s border and its contents

<table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width

<tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)

<tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan="2"> Sets number of columns a cell should span (default=1)

<td rowspan="4"> 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 width

<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="value"> Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight="value"> 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="noresize"> Prevents the user from resizing a frame

Forms

For functional forms, you’ll have to run a 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 name> 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="NAME" size=20> Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME"> Creates a Submit button

<button type="submit">Submit</button> Creates an actual button that is clicked

<input type="image" border=0 name="NAME" src="name.gif"> Creates a Submit button using an image

<input type="reset"> Creates a Reset button

]]> http://www.webmonkey.com/2010/02/html_cheatsheet/feed/ 70 Special Characters http://www.webmonkey.com/2010/02/special_characters/ http://www.webmonkey.com/2010/02/special_characters/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=395

To make special characters and accented letters show up on your pages, use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

The most common character entities have been collected by the International Organization for Standardization and compiled in the ISO Latin Alphabet No. 1 table, which includes special characters, letters with diacritical marks (accents, umlauts, etc.), and scientific and currency symbols. The Latin-1 table contains 255 characters.

ISO Entities

Name Code	Number Code	Glyph	Description
‘		‘	left single quote
’		’	right single quote
&sbquo;		‚	single low-9 quote
“		“	left double quote
”		”	right double quote
&bdquo;		„	double low-9 quote
&dagger;		†	dagger
&Dagger;		‡	double dagger
&permil;		‰	per mill sign
&lsaquo;		‹	single left-pointing angle quote
&rsaquo;		›	single right-pointing angle quote
&spades;		♠	black spade suit
&clubs;		♣	black club suit
&hearts;		♥	black heart suit
&diams;		♦	black diamond suit
&oline;		‾	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
&frasl;	/	/	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 &die;	¨	¨	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, umlaut

]]> http://www.webmonkey.com/2010/02/special_characters/feed/ 115 Color Charts http://www.webmonkey.com/2010/02/color_charts/ http://www.webmonkey.com/2010/02/color_charts/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=397

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!

Colors

Hex Code	Color
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF66CC
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3399
#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	DeepSkyBlue
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999	DarkCyan
#009966	Teal
#009933
#009900	Green
#0066FF
#0066CC
#006699
#006666
#006633
#006600	Dark Green
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF	Blue
#0000CC	Med. Blue
#000099	Dark Blue
#000066	Navy
#000033
#000000	Black

]]> http://www.webmonkey.com/2010/02/color_charts/feed/ 109 Windows Browser Chart http://www.webmonkey.com/2010/02/windows_browser_chart/ http://www.webmonkey.com/2010/02/windows_browser_chart/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=406

Windows

layout engine

browsers

java

plug -ins

Add-Ons

css 1.0

css 2.0

css 3

gif89

png

acid2

acid3

dhtml

HTML5

i-frame

XML

RSS

Trident

Explorer 8*

X

X

X

X

s

X

X

X

X

X

X

X

Explorer 7

X

X

X

X

s

X

X

X

X

X

X

Explorer 6

X

X

X

X

X

s

X

X

X

Explorer 5.5

X

X

X

X

X

X

X

X

Explorer 5.0

X

X

X

X

X

X

s

Explorer 4

X

X

X

X

X

Gecko

Firefox 3.5

X

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Firefox 3

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Firefox 2

X

X

X

X

s

X

X

X

X

X

X

Firebird

X

X

X

X

X

X

X

X

Mozilla 1.31

X

X

X

X

X

X

X

X

Mozilla 1.0

X

X

X

X

X

X

X

X

Netscape 7.0

X

X

X

X

X

X

X

X

Netscape 6.1

X

X

X

X

X

X

X

X

Webkit

Chrome

X

X

X

X

X

s

X

X

X

s

X

X

X

X

X

Safari 4.0

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Safari 3.1

X

X

X

X

X

X

X

s

X

s

X

X

X

Safari 3.0

X

X

X

X

X

X

X

X

X

X

X

Presto

Opera 10.5

X

X

X

X

s

X

X

X

X

X

X

X

X

X

Opera 10

X

X

X

X

X

X

X

X

X

X

X

X

X

Opera 9

X

X

X

X

X

X

X

X

s

X

X

X

Opera 8

X

X

X

X

X

X

X

X

X

Opera 7.x

X

X

X

X

X

X

X

Netscape

Navigator 4.7

X

X

X

X

X

X

Navigator 4.5

X

X

X

X

X

X

Elektra

Opera 6.0

X

X

X

X

X

X

X

Opera 5.11

X

X

X

X

X

X

X

Opera 4.02

X

s

X

X

X

X

Key
supported	X
sort-of supported	s
not supported

]]> http://www.webmonkey.com/2010/02/windows_browser_chart/feed/ 3 Mac Browser Chart http://www.webmonkey.com/2010/02/mac_browser_chart/ http://www.webmonkey.com/2010/02/mac_browser_chart/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=408

Mac OSX

Layout Engine

Browser

java

plug -ins

Add-Ons

CSS 1

CSS 2

CSS 3

gif89

png

acid2

acid3

DHTML

HTML5

i-frame

XML

RSS

Tasman

Explorer 5.0

X

X

X

X

X

X

s

Gecko

Firefox 3.7

X

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Firefox 3.5

X

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Firefox 3*

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Firefox 2

X

X

X

X

s

X

X

X

X

X

X

Netscape 7.0

X

X

X

X

X

X

X

X

Netscape 6.1

X

X

X

X

X

X

X

X

Netscape 6.0

X

X

X

X

X

X

X

X

Webkit

Chrome

X

X

s

X

X

s

X

X

X

s

X

X

X

X

X

Safari 4.0

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Safari 3.1

X

X

X

X

X

X

X

X

s

X

X

X

Safari 3.0

X

X

X

X

X

X

X

X

X

X

X

Presto

Opera 10.5

X

X

X

X

X

X

X

X

X

X

X

X

X

X

Opera 10

X

X

X

X

X

X

X

X

X

X

X

X

X

Opera 9

X

X

X

X

X

X

X

X

X

s

X

X

X

Opera 8

X

X

X

X

X

X

X

X

X

X

Opera 7.x

X

X

X

X

X

X

X

Netscape

Navigator 4.7

X

X

X

X

X

X

Navigator 4.5

X

X

X

X

X

X

Key
supported	X
sort-of supported	s
not supported

]]> http://www.webmonkey.com/2010/02/mac_browser_chart/feed/ 0 Game Console Browser Chart http://www.webmonkey.com/2010/02/game_console_browser_chart/ http://www.webmonkey.com/2010/02/game_console_browser_chart/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=412

Wii

layout engine

browsers

java

plug
-ins

Add-Ons

css 1.0

css 2.0

css 3.0

gif89

png

acid2

acid3

dhtml

html 5.0

i-frame

XML

RSS

Presto

Opera 9

X

X

X

X

X

X

X

X

s

X

X

X

Key
supported	X
sort-of supported	s
not supported

]]> http://www.webmonkey.com/2010/02/game_console_browser_chart/feed/ 0 Mobile Browser Chart http://www.webmonkey.com/2010/02/mobile_browser_chart/ http://www.webmonkey.com/2010/02/mobile_browser_chart/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=414

Mobile

Layout Engine

Browser

Java

Plug -ins

Add-Ons

CSS 1

CSS 2

CSS 3

gif89

png

acid2

acid3

DHTML

HTML5

i-frame

XML

RSS

Gecko

Mobile Firefox

X

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Trident

Explorer 7

X

X

X

X

s

X

X

X

X

X

X

Webkit

Android

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Mobile Safari

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Presto

Opera Mobile

X

X

X

X

X

s

X

X

X

s

X

s

X

X

X

Opera Mini

X

X

X

s

X

X

s

s

s

s

X

X

X

Key
supported	X
sort-of supported	s
not supported

]]> http://www.webmonkey.com/2010/02/mobile_browser_chart/feed/ 0 Inline Stylesheet Code http://www.webmonkey.com/2010/02/inline-stylesheet-code/ http://www.webmonkey.com/2010/02/inline-stylesheet-code/#comments Thu, 04 Feb 2010 00:42:04 +0000 Webmonkey Staff http://origin.prod2.webmonkey.com/?p=46227

If you want to use stylesheets to format one particular piece of content on a web page, you can apply an inline style.

Here’s the code:

<a href="http://www.webmonkey.com" style="font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 1px 0; border: 1px solid #000; background: #31757B; color: #fff; text-decoration: none; font-weight:bold" title="">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em; font-weight:bold;">Go To</span> Webmonkey!</a>

]]> http://www.webmonkey.com/2010/02/inline-stylesheet-code/feed/ 1 CSS Properties http://www.webmonkey.com/2010/02/css-properties/ http://www.webmonkey.com/2010/02/css-properties/#comments Wed, 03 Feb 2010 23:58:50 +0000 Webmonkey Staff http://origin.prod2.webmonkey.com/?p=46219

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>}	, , ,
Color and Background
Name of Property	Rule syntax	Possible values
color	<selector> {color:<value>}	<color>

background-color	<selector> {background-color:<value>}	<color>

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

$ = Shorthand Property

From the series

Stylesheets Guide
How CSS Works
Linking Stylesheets
CSS Units of Measure
CSS Attributes
CSS Properties
CSS Examples

]]> http://www.webmonkey.com/2010/02/css-properties/feed/ 1 CSS Attributes http://www.webmonkey.com/2010/02/css-attributes/ http://www.webmonkey.com/2010/02/css-attributes/#comments Wed, 03 Feb 2010 23:57:31 +0000 Webmonkey Staff http://origin.prod2.webmonkey.com/?p=46216

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>This text is rendered as foo-style 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.

From the series

Stylesheets Guide
How CSS Works
Linking Stylesheets
CSS Units of Measure
CSS Attributes
CSS Properties
CSS Examples

]]> http://www.webmonkey.com/2010/02/css-attributes/feed/ 0