Advance Digital Studio 4 - Spring 2003

Selected CSS Properties and Syntax

             view general CSS Rule Syntax

For the exhaustive list of all CSS2 properties see: Appendix F. Property index in the W3C's CSS2 Specification
http://www.w3.org/TR/REC-CSS2/propidx.html

Font properties
Property Name Rule Syntax Possible Values
see 'color' below

font-family <selector> { font-family:<value>; }

examples:
p { font-family: Arial, Helvetica, sans-serif; }
.mono { font-family: Courier, Courier New, monospace; }
A comma separated list of font names.
The first item available on the users computer will be used.
The last item on the list should always be a generic family name: serif, sans-serif, monospace, cursive, fantasy
*
font-style <selector> { font-style:<value>; } normal, italic
*
font-weight <selector> { font-weight:<value>; } UNITS
RELATIVE
: normal, bold, lighter, bolder
ABSOLUTE: 100, 200, 300, 400, 500, 600, 700, 800, 900
*
font-size <selector> { font-size:<value>; } UNITS of Linear Distance
RELATIVE: px* | em** | ex
ABSOLUTE: pt | pc | cm | mm | in

RELATIVE:  smaller | larger
"ABSOLUTE" (similar to <font size="3">):
xx-small | x-small | small | medium | large | x-large | xx-large
PERCENTAGE:  150% **

* see article: Give Me Pixels or Give Me Death
note: 10px is functionally the smallest acceptable, cross platform pixel size.

** see the opposing view: How Do I Size Fonts?

line-height <selector> { line-height:<value>; } relative or absolute units of linear distance.
*
letter-spacing <selector> { letter-spacing:<value>; } relative or absolute units of linear distance.
*
word-spacing <selector> { word-spacingt:<value>; } relative or absolute units of linear distance.

Font SHORTHAND: combines multiple properties in one definition:
font <selector> { font: <font-style> <font-weight> <font-size>/<line-height> <font-family>; }

example :
p { font: normal 800 18px/18px Arial, Verdana, sans-serif; }
no commas separate the values for the various properties, except for the list of font-family values.

Text properties
Property Name Rule Syntax Possible Values
text-decoration <selector> { text-decoration:<value>; } none, underline, overline, line-through
*
text-transform <selector> { text-transform:<value>; } capitalize, uppercase, lowercase, none
*
text-align <selector> { text-align:<value>; } left, right, center, justify
*
text-indent <selector> { text-indent:<value>; } relative or absolute units of linear distance.

meaning:
indentation allotted for first line of paragraph. 

The Anchor Pseudo Classes: Styling Links
Property Rule Syntax Possible Values
Normal Link a:link { <declaration> } any combination of CSS definitions
*
Hover: mouse is over the link a:hover { <declaration> } any combination of CSS definitions
*
Active: mouse is pressed on a link a:active { <declaration> } any combination of CSS definitions
*
Visited Link a:visited { <declaration> } any combination of CSS definitions
Multiple Link Styles
You can apply more than one kind of link style. Define all of the anchor pseudo classes for another CLASS, e.g., "nav":

a.nav:link { color:#336699; text-decoration:none; }
a.nav:hover{ color:#336699; text-decoration:underline; }
a.nav:active { color:#996633; }
a.nav:visited { color:#ffcc33; }

This style definition would apply to the following example:

<a href="http://nukes.org/" class="nav">nukeville</a>

Color and Background
Property Name Rule Syntax Possible Values
color <selector> { color:<value>; } hex color or color name [see colorhell ]

alternatively:
rgb(<r>,<g>,<b>)
where the values are from 0 to 255

background-color <selector> { background-color:<value>; } hex value or color name [see colorhell ]
rgb(<r>,<g>,<b>)

background-image <selector> { background-image: url(<value>); } URL (<relative or absolute path>)
*
background-repeat <selector> { background-repeat: <value>; } repeat, no-repeat, repeat-x, repeat-y
*
background-position <selector> { background-position: <x value> <y value>; }

example:
body { background-position: 30px 20px; }
pixel values, percentage values,
left | center | right
top | center | bottom
note: if only one value is specified it applies to the verical value
*
background-attachment <selector> { background-attachment: <value>; } fixed, scroll

The Box Model
see illustration of the box model
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
Property Name Rule Syntax Possible Values
padding <selector> { padding:<value>; } relative or absolute units of linear distance.
*
padding-top
padding-right
padding-bottom
padding-left
<selector> {
        padding-top: <value>;
        padding-right: <value>;
        padding-bottom: <value>;
        padding-left: <value>;
}
relative or absolute units of linear distance.
Padding SHORTHAND: combines multiple properties in one definition:
padding

<selector> { padding: <padding-top> <padding-right> <padding-bottom> <padding-left>; }

example :
p { padding: 2px 5px 10px 8px; }

<selector> { padding: <padding-top and padding-bottom> <padding-right and padding-left>; }

example :
p { padding: 20px 5px; }

no commas separate the values for the various properties.


The mnemonic for remembering the order of the definition is:
TRouBLe
that is: Top, Right, Bottom, Left

This shorthand also applies to "margin" and "border" properties.

margin <selector> { margin:<value>; } relative or absolute units of linear distance.
*
margin-top
margin-right
margin-bottom
margin-left
<selector> {
        margin-top: <value>;
        margin-right: <value>;
        margin-bottom: <value>;
        margin-left: <value>;
}
relative or absolute units of linear distance.

border

also:
border-width
<selector> { border: <value>; } relative or absolute units of linear distance,
or none (for "border property only).
*

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

also:
border-left-width

<selector> {
        border-top: <value>;
        border-right: <value>;
        border-bottom: <value>;
        border-left: <value>;
}
relative or absolute units of linear distance.

border-color <selector> { border-color: <value>; } hex value or color name [see colorhell ]
rgb(<r>,<g>,<b>)
*
border-top-color
border-right-color
border-bottom-color
border-left-color
<selector> {
        border-top-color: <value>;
        border-right-color: <value>;
        border-bottom-color: <value>;
        border-left-color: <value>;
}
hex value or color name [see colorhell ]
rgb(<r>,<g>,<b>)

border-style <selector> { border-style: <value>; } solid, dotted, dashed, groove, double, ridge, inset, outset
*
border-top-style 
border-right-style 
border-bottom-style 
border-left-style 
<selector> {
        border-top-style : <value>;
        border-right-style : <value>;
        border-bottom-style : <value>;
        border-left-style : <value>;
}
 

Border SHORTHAND: combines multiple properties in one definition:
border

<selector> { border: <border-width> <border-style> <border-color>; }

example :
p { border: 5px solid #003366; }

no commas separate the values for the various properties.

see also: overflow and clipping
http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping
 
Postioning
Property Name Rule Syntax Possible Values
position <selector> { position:<value>; } absolute, relative, (fixed)

meaning:
"absolute" means that the element is placed based on the location of it's parent element. It is measured from the top left corner of that element.
"relative" means the element is shifted from where it would otherwise be placed. This leaves a blank space where the element would have been placed in the normal flow of the document.

top
left
(right, bottom)
<selector> { top: <value>; left: <value>; } relative or absolute units of linear distance.

z-index <selector> { z-index:<value>; } a positive integer.

meaning:
"z-index" indicates the depth of stacking, the illusion of "in front" and "behind" in two dimensions.

float <selector> { float:<value>; } left, right, none
Positioning Example
  example of normal use :
#main {
         position: absolute;
         top: 20px;
         left: 200px;
         z-index: 2;
}

this would apply to the following element:
<div id="main">hello...</div>
 


Advance Digital Studio 4 - Spring 2003