HTML Markup | JavaScript | Java | Computer Sci | Home & Links

CSS Quick Reference Guide

This page is guide of the most commonly used CSS measurements, properties and values, selectors and media types. For the definitive specification of CSS refer to the W3 consortium website. CSS 2.1 is the current recommendation.

Measurement Units

Note 1: ch, em, en, and ex are typographical terms and refer to the size of the characters '0'(ZERO), 'm', 'n', and 'x' respectively.

Note 2: px refers to pixels (picture elements) and is dependent on the monitor's screen resolution.

Note 3: Be very careful when using relative sizing, especially within tables. Some browsers recalculate (or recurse) % width property to extremes. em measure is sometimes calculated on current block font size rather than pending block font size so indentations after titles are often too wide. Avoid the problem by using absolute measure or pixels (px).

Properties and Values

The complete list of properties and values permitted by CSS is very long. Refer to w3.org for the complete list or to the small chart below which has many of the useful properties.

Note 1: Property lists use semicolons as separators. Value lists within a property use no list separators.

Note 2: Use extreme caution when assuming default settings. Browser creators are very loose in their methods here. For example always set the bullet shapes for unordered lists if you are trying for consistency between browsers.

Note 3: URI references are relative to where the rule is located. This is very important when subfolders are used for stylesheets and/or images.

CSS Selectors

Selectors allow identifying groups or specific elements to be styled.

NOTE: For more detailed information on CSS selectors refer to CSS 2.1 selectors

Cursor Shapes

The shape of a cursor can be redefined with the cursor:shapeType rule. Commonly used shapeTypes are: crosshair, default, hand, pointer, text, wait and help.

Media Dependent Styles

Style rules can be made dependent on the media used. CSS uses the @media mediaType {...} rule to set these properties. mediaType can be one of: aural, print, projection, screen, etc. For example:

@media print {
  body{margin:0px;border:0px;padding:0px}
  h2{padding:0px}  pre{color:#000}
  .zone{position:absolute;top:5px;visibility:hidden}
  .toc{font-size:2pt;position:relative;top:5px;visibility:hidden}
  div#clear{clear:both} div#col1{margin-left:0px}
             }

---

The Properties

NOTE: Color_name must be one of the 140 X11|SVG colors (CSS3 addition).

Note 1: The font property is EXTREMELY value order sensitive!

Note 2: Not all font families exist on all platforms (operating systems). Always include a 'generic' font family (one of serif, sans-serif, cursive, fantasy or monospace) to ensure that what is rendered is what you anticipate. For example if you specify Arial, also specify sans-serif as in body {font-family: Arial, sans-serif}

Note 3: Font families with spacing must be quoted as in "Times New Roman"

 

Note 1: The box model consists of shells around the contents of an element. Innermost is the padding shell. Surrounding it is the border shell. The outermost shell is the margin.

Note 2: Margin, border and padding can take the suffices -bottom, -top, -left or -right to define actions on a specific edge. A second shorthand is a list of measures after the property. For example margin:5px 10px will give 5 px margins bottom and top, 10 px margins on left and right.

Note 3: Style can be any one of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset or outset

 

Note: visibility:hidden and display:none are not equivalent. Visibility does not remove the element from the box model flow. Display does!