Hexxa and Decima's Web Workshop CSS Reference

This reference sheet is not intended to be a complete reference to the W3C CSS standards. Instead, it is intended to introduce you to some of the most common and most useful CSS properties. Once you have mastered the use of the CSS properties on these tables, you will be well on your way to creating beautiful CSS-based web pages.

Remember, this guide is intended for beginners, not experts, so we have tried to avoid introducing unecessary complexity ...

Font Properties
font-family: left bracket sans-serif
"Bitstream Vera Sans"
Arial
serif
"Bitstream Vera Serif"
"Times New Roman"
monospace
"Bitstream Vera Sans Mono"
Courier
... etc. ...
right bracket ; Font names that consist of two or more words must be enclosed in quotation marks as shown here. Common sans-serif fonts are Bitstream Vera Sans and Arial. Common serif fonts are Bitstream Vera Serif and Times New Roman. Therefore, typical CSS font declarations are "font-family:"Bitstream Vera Sans",Arial,sans-serif;" for a sans-serif layout and "font-family:"Bitstream Vera Serif","Times New Roman",serif;" for a serif layout. You can of course specify any fonts you want, but keep in mind that what viewers of your web site will actually see depends on what fonts they have installed on their computers.
font-style: left bracket normal
italic
oblique
right bracket ; A slanted sans-serif font is called "oblique" instead of "italic".
font-weight: left bracket normal
bold
right bracket ; Other options exist; these are just the most common.
font-size:n left bracket px
pt
mm
cm
right bracket ; Using "px" (pixels) is recommended to obtain consistent on-screen results across different browsers and operating systems. Other options not shown here exist.
Color Properties
left bracket color:
background-color:
right bracket left bracket named_color
aqua black blue
fuchsia gray green
lime maroon navy
olive purple red
silver teal white yellow
#rgb
#rrggbb
right bracket ; There are only 16 named colors. Therefore, it is now normal to use a color picker from software such as the Gimp or Photoshop, or an online color picker, such as our nifty color picker or this color picker to choose web colors. As most modern computer displays are now capable of displaying tens of thousands of colors, it is no longer necessary to be too concerned about "web safe" colors chosen from a limited palette of available colors. Now a days, you can usually pick any color you want. But remember to pick colors that contrast well so that all visitors to your web site, even color blind and low-vision visitors will be able to read your site easily.
Border Properties
left bracket border:
border-left:
border-right:
border-top:
border-bottom:
right bracket n left bracket px
pt
mm
cm
right bracket left bracket solid
dashed
dotted
none
groove
ridge
inset
outset
right bracket left bracket named_color
#rgb
#rrggbb
right bracket ; Border widths are best expressed in pixels, px. See our note above about color properties. Note that not all browsers support groove, ridge, inset, or outset properties. It usually safer to stick with solid, although dashed and dotted can be used in some contexts.
Display Properties
display: left bracket inline
block
none
right bracket ; Individual words in a paragraph are inherintly inline, while paragraphs themselves are inherintly block. CSS gives you the flexibility to change the default display properties of elements. This can be quite useful. For example, the anchor tag, <a>, displays inline by default so that you can create links like this in your text. However, if we want to create a tabular menu of links or a table of contents, it is handy to set the <a> tag's display property to block instead, so that we get ... ... instead. The other handy display property is none. A common technique in modern DHTML is to make an element on a web page appear or disappear (when clicked, for example) by using Javascript to change the display property from block to none and back again. For example, try clicking here .
Position and Size Properties
  position: left bracket fixed
absolute
relative
static
right bracket ; ...
left bracket left:
top:
right:
bottom:
right bracket n left bracket px
pt
mm
cm
right bracket ; ...
left bracket width:
height:
right bracket n left bracket px
pt
mm
cm
right bracket ; ...
left bracket margin:
padding:
right bracket n left bracket px
pt
mm
cm
right bracket ; ...
Background Image Properties
background-image: url("url") ; ...
background-position: left bracket nx ny
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
right bracket ; ...
background-repeat: left bracket repeat
no-repeat
repeat-x
repeat-y
right bracket ; ...
background-attachment: left bracket fixed
scroll
right bracket ; ...