Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

CSS Examples

/skill level/
/viewed/
0 Times



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.

Suggested readings

Retrieved from "http://www.webmonkey.com/reference/CSS_Examples"
Edit this article
Reddit Digg
 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year