Loading...
 

CSS Examples

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.