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:		sans-serif "Bitstream Vera Sans" Arial serif "Bitstream Vera Serif" "Times New Roman" monospace "Bitstream Vera Sans Mono" Courier ... etc. ...		;	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:		normal italic oblique		;	A slanted sans-serif font is called "oblique" instead of "italic".
font-weight:		normal bold		;	Other options exist; these are just the most common.
font-size:n		px pt mm cm		;	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
	color: background-color:			named_color aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow #rgb #rrggbb		;	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

border: border-left: border-right: border-top: border-bottom:

n

px pt mm cm

solid dashed dotted none groove ridge inset outset

named_color #rgb #rrggbb

;

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:		inline block none		;	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 ... links like this ... ... and this link ... and this link ... 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:		fixed absolute relative static				;	...
	left: top: right: bottom:		n		px pt mm cm		;	...
	width: height:		n		px pt mm cm		;	...
	margin: padding:		n		px pt mm cm		;	...

Background Image Properties
background-image:	url("url")			;	...
background-position:		nx ny top left top center top right center left center center center right bottom left bottom center bottom right		;	...
background-repeat:		repeat no-repeat repeat-x repeat-y		;	...
background-attachment:		fixed scroll		;	...