Nyhetsmatinger

CSS 1 Reference Table

CSS 1 Declarations - and how to use them

Font/Background

Font and Background Properties
Property	Valid Values	Example
font-family	[font name or type]	font-family:Verdana, Arial;
font-style	normal \| italic	font-style:italic;
font-variant	normal \| small-caps	font-variant:small-caps;
font-weight	normal \| bold	font-weight:bold;
font-size	[ xx-large \| x-large \| large \| medium \| small \| x-small \| xx-small ] \| [ larger \| smaller ] \| percentage \| length	font-size:12px;
font	[ font-style \| font-variant \| font-weight ] ? font-size [ / line-height ] ? font-family	font:bold 12px Arial;
Property	Valid Values	Example
color	color	color:red
background-color	color \| transparent	background-color:yellow
background-image	url \| none	background-image:url(house.jpg)
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	background-repeat:no-repeat
background-attachment	scroll \| fixed	background-attachment:fixed
background-position	[ position \| length ] \| {1,2} \| [ top \| center \| bottom ] \| [ left \| center \| right ]	background-position:top center
background	transparent \| color \|\| url \| repeat \| scroll \| position	background:silver url(house.jpg) repeat-y

Text

Text Properties
Property	Valid Values	Example
letter-spacing	normal \| length	letter-spacing:5px
text-decoration	none \| underline \| overline \| line-through	text-decoration:underline
vertical-align	sub \| super \|	vertical-align:sub
text-transform	capitalize \| uppercase \| lowercase \| none	text-transform:lowercase
text-align	left \| right \| center \| justify	text-align:center
text-indent	length \| percentage	text-indent:25px
line-height	normal \| number \| length \| percentage	line-height:15px

Box

Box Properties
Property	Valid Values	Example
margin-top	length \| percentage \| auto	margin-top:5px
margin-right	length \| percentage \| auto	margin-right:5px
margin-bottom	length \| percentage \| auto	margin-bottom:1em
margin-left	length \| percentage \| auto	margin-left:5pt
margin	length \| percentage \| auto {1,4}	margin: 10px 5px 10px 5px
padding-top	length \| percentage	padding-top:10%
padding-right	length \| percentage	padding-right:15px
padding-bottom	length \| percentage	padding-bottom:1.2em
padding-left	length \| percentage	padding-left:10pt; }
padding	length \| percentage {1,4}	padding: 10px 10px 10px 15px
border-top-width	thin \| medium \| thick \| length	border-top-width:thin
border-right-width	thin \| medium \| thick \| length	border-right-width:medium
border-bottom-width	thin \| medium \| thick \| length	border-bottom-width:thick
border-left-width	thin \| medium \| thick \| length	border-left-width:15px
border-width	thin \| medium \| thick \| length {1,4}	border-width: 3px 5px 3px 5px
border-top-color	color	border-top-color:navajowhite
border-right-color	color	border-right-color:whitesmoke
border-bottom-color	color	border-bottom-color:black
border-left-color	color	border-left-color:#C0C0C0
border-color	color {1,4}	border-color: green red white blue; }
border-top-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-top-style:solid
border-right-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-right-style:double
border-bottom-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-bottom-style:groove
border-left-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-left-style:none
border-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-style:ridge; }
border-top	border-width \| border-style \| border-color	border-top: medium outset red
border-right	border-width \| border-style \| border-color	border-right: thick inset maroon
border-bottom	border-width \| border-style \| border-color	border-bottom: 10px ridge gray
border-left	border-width \| border-style \| border-color	border-left: 1px groove red
border	border-width \| border-style \| border-color	border: thin solid blue
float	none \| left \| right	float:none
clear	none \| left \| right \| both	clear:left

Classification

Classification Properties
Property	Valid Values	Example
display	none \| block \| inline \| list-item	display:none
list-style-type	disk \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none	list-style-type:upper-alpha
list-style-image	url \| none	list-style-image:url(icFile.gif)
list-style-position	inside \| outside	list-style-position:inside
list-style	keyword \| position \| url	list-style: square outside url(icFolder.gif)

Positioning

Positioning Properties
Property	Valid Values	Example	Applies to
clip	shape \| auto	clip:rect(0px 200px 200px 0px)	all elements
height	length \| auto	height:200px	DIV, SPAN and replaced elements
left	length \| percentage \| auto	left:0px	absolutely and relatively positioned elements
overflow	visible \| hidden \| scroll \| auto	overflow:scroll	all elements
position	absolute\| relative \| static	position:absolute	all elements
top	length \| percentage \| auto	top:0px	absolutely and relatively positioned elements
visibility	visible \| hidden \| inherit	visibility:visible	all elements
width	length \| percentage \| auto	width:80%	DIV, SPAN and replaced elements
z-index	auto \| integer	z-index:-1	absolutely and relatively positioned elements

Printing

Printing Properties
Property	Valid Values	Example
page-break-before	auto \| always \| left \| right	page-break-before:always
page-break-after	auto \| always \| left \| right	page-break-before:auto

Pseudo Classes

Pseudo Classes
Property	Valid Values	Example
cursor	auto \| crosshair \| default \| hand \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help	{ cursor:hand; }
active, hover, link, visited	n/a	a:hover { color:red; }
first-letter, first-line	any font manipulating declaration	p:first-letter{ float:left;color:blue } .

More resources

This list has been published on trust-me.nu since 1996 together with alot of other resources for the web.
The rest of the resources from trust-me.nu will be updated to the current HTML standards, and placed here occasionally.

If you can't wait until it is published here, you will find all the web resources at home.trust-me.nu

Example of use in HTML document:
<font size="3" style="color:blue; text-decoration:none;">Some text</font>

Example of use in CSS stylesheet:
.classname {
color:green;
text-decoration:underline;
}

Top of page

No Comments.
You need to login or register to post comments.
Discuss this item on the forums. (0 posts)

Annonse:

Hovedmeny

Ressurser