HTML Markup | JavaScript | Java | 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.

Contents

Measurement Units

CSS Measurement Units
Absolutein, cm, mm, pt, pc (picas)
Relative%, ch, em, en, ex, px (pixels)

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.

Type selectors identify a specific element to style (eg h1).

Class selectors identify a group of elements. Class names are variable and begin with a dot and a letter.

Id selectors identify a specific element. Id names are variable and begin with a # and a letter.

Descendant selectors identify elements contained or nested within the specified element. The nesting can be several levels down. This super-selector is identified by whiteshace between two selectors (eg div li selects all li elements that are nested within a div element

Child selectors identify elements contained or nested within the specified element. The nesting must be at the next level. This super-selector is identified by an > between two selectors (eg. div>li selects all li elements that are nested immediately within a div element

Pseudo class selectors on anchor elements (eg. a:visited, a:link, a:hover and a:active) allow colors, fonts, and text-decoration to be associated with the appropriate hyperlink. Reflow is not garanteed!
Note: Define the pseudo class selectors in reverse alpha order to make sure hover works correctly!

Pseudo element selectors :first-line and :first-letter can be appended to any body element to produce effects such as bolded, intro lines and drop caps. Pseudo element selectors :before and :after allow access to the related content

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

The Properties

CSS Background/Color Properties
Property Value Example(s)
background mix of following red black/white URL(paper.gif)
background-attachment keyword fixed, scroll
background-color color_name|hex|keyword red, #FFCCFF, #FCF, transparent
background-image valid uri | none URL(paper.gif)
background-position keyword bottom right, top, center, left
background-repeat keyword repeat, repeat-x, repeat-y, no-repeat
color {of text} color_name|hexcode red, gray, #FF00FF, #cf9

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

CSS Font Properties
Property Value Example(s)
font {value order sensitive} mix of following [style] [variant] [weight] size family
font-family name of font Arial, serif, cursive, fantasy, Symbol
font-size abs unit|number|% 12pt, medium, large, +1, 120%
font-style name of style italic, normal, oblique
font-variant keyword normal, small-caps
font-weight number | strength 100, 200, light[er], normal, bold[er]

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"

CSS List Properties
Property Value Example(s)
list-style mix from below upper-alpha, inside
list-style-image valid uri | none URL(rightarrow.gif)
list-style-position keyword inside, outside
list-style-type keyword none, circle, disc, square, decimal, lower-roman

 

CSS Box Properties
Property Value Example(s)
border width||style||color 2px solid red
margin keyword|%|abs unit auto, 10%, 0.5in, 2em, 5mm
padding keyword|%|abs unit auto, 10%, 0.5in, 2em, 5mm
clear keyword left, right, none, both
float keyword left, right, none
height keyword|%|abs unit auto, 10%, 0.5in, 2em, 5mm
width keyword|%|abs unit auto, 10%, 0.5in, 2em, 5mm

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

CSS Text Properties
Property Value Example(s)
letter-spacing normal | <length> 5em, 2pt, normal
line-height normal|<length>|%|number 20pt, 120%, normal
text-align keyword left, right, center, justify
text-decoration keyword none, underline, overline, line-through, blink
text-indent number | percentage 2in, 5%, 3em, .5cm, 5mm
text-transform keyword capitalize, lowercase, uppercase, none
vertical-align keyword top, middle, bottom, sub, super, baseline
white-space keyword normal, nowrap, pre, pre-wrap, pre-line
word-spacing normal | <length> | inherit 5em, 2pt, normal

 

CSS Positioning Properties
Property Value Example(s)
bottom <length> 20px
clip keyword | shape auto
display keyword block, inline, inline-block, list-item, table, none
left <length> 20px
opacity <fraction> .50, .99
overflow keyword visible, hidden, scroll, auto, inherit
position keyword absolute, relative, fixed, static, inherit
right <length> 20px
top <length> 20px
visibility keyword visible, hidden, collapse, inherit
z-index keyword | <integer> auto, inherit, 20

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

CSS Cursor Shapes
PropertyValue Example(s)
cursorshape auto, crosshair, default, help, pointer, move, progress, text, wait

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}
             }


JR's HomePage | Comments [htmlcod1.htm:2014 08 26]