SPS Home   >  Dgreath   >   Cascading Style Sheet Properties

CASCADING STYLE SHEET PROPERTIES

 General form:

Selector(s) {
   property1:            attribute;
   property2:            attribute;
}

Element Properties
Description Property Attributes
Set the element's background color. Default value is "#ffffff" background-color: attribute; Attribute ranges from #000000 (black) to #ffffff (white).
  • #ff0000 = red
  • #ffff00 = yellow
  • #00ff00 = green
  • #0000ff = blue
  • #00ffff = aqua
  • #ff00ff = fuscia
Set the element's foreground color. Default value is "#000000" color: attribute; Attribute ranges from #000000 (black) to #ffffff (white).
  • #ff0000 = red
  • #ffff00 = yellow
  • #00ff00 = green
  • #0000ff = blue
  • #00ffff = aqua
  • #ff00ff = fuscia
Set text element's alignment. Default value is normally "left" however child elements inherit from parent elements.  text-align: attribute; Attribute is as follows:
  • left = ragged right
  • right = ragged left
  • center = centered
  • justify = uniform line lengths (not well supported)
Set capitalization characteristics of a text element. Default value is "none" text-transform: attribute; Attribute is as follows:
  • none = no effect
  • capitalize = capitalize first letter of each word
  • lowercase = make all letters lowercase
  • uppercase = make all letters uppercase
Set various effects on a text element.  Default value is "none" Blink, underline, overline, and line-through attributes can be combined if desired. text-decoration: attribute(s); Attributes are as follows:
  • none = no effect
  • underline = single thin line under text
  • overline = single thin line over text
  • line-through = single thin line through text
  • blink = makes text blink (not well supported)
Set paragraph indention. Default value is "0" text-indent: attribute; Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set text shadowing.  Default value is "none" Horizontal offset controls the distance the shadow is moved to the left (-) or right (+) and is required.  Vertical offset controls the distance the shadow is moved above (-) or below (+) and is required. Blur controls the apparent fuzziness of the shadow and  is optional. Color controls the shadow color and is optional. (not well supported) text-shadow: horizontal vertical blur color; Horizontal, vertical, and blur values range from "0" to "∞" and can be expressed in the following units:
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Color ranges from #000000 (black) to #ffffff (white).
  • #444444 = dark gray
  • #999999 = medium gray
  • #cccccc = light gray
Set the spacing between characters within words in a text element. Default value is "normal" Positive (+) values expand the spacing, negative (-) values condense the spacing. letter-spacing: attribute; Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set the spacing between words in a text element.  Default value is "normal" Positive (+) values expand the spacing, negative (-) values condense the spacing. word-spacing: attribute; Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set the vertical alignment between elements.  Default value is "baseline" vertical-align: attribute; Attribute is as follows:
  • baseline
  • bottom
  • middle
  • subscript (sub)
  • superscript (super)
  • text-bottom
  • text-top
  • Percentage (%) where negative (-) lowers and positive (+) raises.
Set the leading (vertical linespacing) between lines of text.  Default value is "normal" The linespacing option renders single space for a "1" value, double spacing for a "2" value and so on. line-height: attribute: Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Linespacing
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Overrides normal element behavior. Block add a line break before and after, Inline removes the line breaks. None suppresses display of the item. The element can be made to function as a list or table item as well.  This property is how lists and tables are built using style instead of html tags. display: attribute: Attribute is as follows:
  • block
  • compact
  • inline
  • list-item
  • marker
  • none
  • run-in
  • table
  • inline-table
  • table-row-group
  • table-column
  • table-column-group
  • table-header-group
  • table-footer-group
  • table-row
  • table-cell
  • table-caption
Controls word wrapping. Normal allows, nowrap supresses. Pre uses formatting embedding in the text. white-space: attribute: Attribute is as follows:
  • normal
  • nowrap
  • pre
Sets configuration of an outline around a text element. Default value is "normal"  Invert color option auto chooses a contrasting color from the background. (Not well supported) outline: color style width; Color ranges from #000000 (black) to #ffffff (white).
  • invert
  • #ff0000 = red
  • #ffff00 = yellow
  • #00ff00 = green
  • #0000ff = blue
  • #00ffff = aqua
  • #ff00ff = fuscia
Style attribute is as follows:
  • none
  • dashed
  • dotted
  • double
  • groove
  • inset
  • outset
  • ridge
  • solid
Width ranges from "0" to"∞" and can be expressed in the following units or attributes:
  • thin
  • medium
  • thick
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)

Font Properties
Description Property Attributes
Set font face.  If not specified, the value is inherited. If local fonts are specified, include a generic at the end of the list. font-family: attribute;  Attribute is as follows:
  • sans-serif
  • serif
  • cursive
  • fantasy
  • monospace
  • any local font
Set font size. The default is "medium" If not specified, the value is inherited. font-size: attribute;  Attribute ranges from "0" to"∞" and can be expressed in the following units or attributes:
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller
  • larger
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set font weight. The default is "normal" font-weight: attribute; Attribute is as follows:
  • lighter
  • 100
  • 200
  • 300
  • 400 or normal
  • 500
  • 600
  • 700
  • 800
  • 900 or bold
  • bolder
Set font style. If not specified, the value is inherited. font-style: attribute;  Attribute is as follows:
  • normal
  • italic
  • oblique
Set font variant. If not specified, the value is inherited. font-variant: attribute; Attribute is as follows:
  • normal
  • small caps

Padding Properties
Description Property Attributes
Set spacing between the element and its surrounding border. Padding is never inherited and if not set defaults to zero. Padding area renders in background color. This is the abbreviated form. t denotes top pad, l denotes left pad, r denotes right pad, and b denotes bottom pad. padding: t&r&b&l;
padding: t&b l&r;
padding: t l&r b;
padding: t r b l;		 Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set spacing between the element and its surrounding border. Padding is never inherited and if not set defaults to zero. Padding area renders in background color. padding-bottom: attribute;
padding-left: attribute;
padding-right: attribute;
padding-top: attribute;		 Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)

Border Properties
Description Property Attributes
Set properties of the border region between the padding and surrounding margin on all four sides as a group. The border renders in the element's foreground color by default unless otherwise set. Default width is medium width with style set to none.

A variety of options follow that allow properties to be configured in a variety of ways.

 border: color style width; Color ranges from #000000 (black) to #ffffff (white).
  • invert
  • #ff0000 = red
  • #ffff00 = yellow
  • #00ff00 = green
  • #0000ff = blue
  • #00ffff = aqua
  • #ff00ff = fuscia
Style attribute is as follows:
  • none
  • dashed
  • dotted
  • double
  • groove
  • inset
  • outset
  • ridge
  • solid
Width ranges from "0" to"∞" and can be expressed in the following units or attributes:
  • thin
  • medium
  • thick
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set spacing for the region between the padding and surrounding margin in various combinations. The border renders in the element's foreground color by default unless otherwise set. Default width is medium width with style set to none. This is an abbreviated form. t denotes top border, l denotes left border, r denotes right border, and b denotes bottom border. border-width: t&r&b&l;
border-width: t&b l&r;
border-width: t l&r b;
border-width: t r b l;
border-top-width: t;
border-right-width: r;
border-bottom-width: b;
border-left-width: l;		 t, r, b, & l ranges from "0" to"∞" and can be expressed in the following units or attributes:
  • thin
  • medium
  • thick
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set color for the region between the padding and surrounding margin in various combinations. The border renders in the element's foreground color by default unless otherwise set. This is an abbreviated form. t denotes top border, l denotes left border, r denotes right border, and b denotes bottom border. border-color: t&r&b&l;
border-color: t&b l&r;
border-color: t l&r b;
border-color: t r b l;
border-top-color: t;
border-right-color: r;
border-bottom-color: b;
border-left-color: l;		 t, r, b, & l  range from #000000 (black) to #ffffff (white).
  • invert
  • #ff0000 = red
  • #ffff00 = yellow
  • #00ff00 = green
  • #0000ff = blue
  • #00ffff = aqua
  • #ff00ff = fuscia

 

Set style for the region between the padding and surrounding margin in various combinations. The default setting is none.  This is an abbreviated form. t denotes top border, l denotes left border, r denotes right border, and b denotes bottom border. border-style: t&r&b&l;
border-style: t&b l&r;
border-style: t l&r b;
border-style: t r b l;
border-top-style: t;
border-right-style: r;
border-bottom-style: b;
border-left-style: l;		 t, r, b, & l  attributes are as follows:
  • none
  • dashed
  • dotted
  • double
  • groove
  • inset
  • outset
  • ridge
  • solid

 

Set properties for the region  between the padding and surrounding margin on individual sides. The border renders in the element's foreground color by default unless otherwise set. Default width is medium width with style set to none. Use of these four properties allows precise control of element borders. border-bottom: clr styl wdth;
border-left:  clr styl wdth;
border-top: clr styl wdth;
border-right: clr styl wdth;		 Clr ranges from #000000 (black) to #ffffff (white).
  • invert
  • #ff0000 = red
  • #ffff00 = yellow
  • #00ff00 = green
  • #0000ff = blue
  • #00ffff = aqua
  • #ff00ff = fuscia
Styl attribute is as follows:
  • none
  • dashed
  • dotted
  • double
  • groove
  • inset
  • outset
  • ridge
  • solid
Wdth ranges from "0" to"∞" and can be expressed in the following units or attributes:
  • thin
  • medium
  • thick
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)

Margin Properties
Description Property Attributes
Set spacing between the border and the outside of the virtual box. Margin is never inherited and if not set defaults to zero. Margin area always renders transparently. This is the abbreviated form. t denotes top pad, l denotes left pad, r denotes right pad, and b denotes bottom pad. margin: t&r&b&l;
margin: t&b l&r;
margin: t l&r b;
margin: t r b l;		 Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Auto (browser default)
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set spacing between the border and and the outside of the virtual box. Margin is never inherited and if not set defaults to zero. Margin area always renders transparently. margin-bottom: attribute;
margin-left: attribute;
margin-right: attribute;
margin-top: attribute;		 Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Auto (browser default)
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)

Position Properties
Description Property Attributes
Set the element's height. Will scale the element to fit.  When set to "auto," the element's normal height will be used. To maintain aspect ratio, width must be set to auto. height: attribute; Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Auto
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Set the element's width. Will scale the element to fit.  When set to "auto," the element's normal width will be used. To maintain aspect ratio, height must be set to auto. width: attribute; Attribute ranges from "0" to"∞" and can be expressed in the following units:
  • Auto
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Suppresses other elements from floating  beside the specified element. The default value is "none" which allows elements to float on both sides. "Both" suppresses floating elements on either side. "Left"  suppress floating elements on the left side and "right" suppresses them on the right side. clear: attribute;  Attribute is as follows:
  • none
  • both
  • left
  • right
Overrides the normal flow of  element rendering. The default value is "none" which allows elements to render normally. "Left"  causes the other elements to wrap to the right and "right" causes them to wrap to the left.. float: attribute;  Attribute is as follows:
  • none
  • left
  • right

Background Properties
Description Property Attributes
Set the element's background color. Default value is "#ffffff"

background-color: attribute;

 Attribute ranges from #000000 (black) to #ffffff (white).
  • #ff0000 = red
  • #ffff00 = yellow
  • #00ff00 = green
  • #0000ff = blue
  • #00ffff = aqua
  • #ff00ff = fuscia
Set the universal resource  locator (url) for the image to be rendered on top of the background color. Files should be either jpg or gif for browser compatibility.

background-image: attribute;

 Attribute is as follows:
  • none
  • url( doman/path/file )
Controls whether the background image remains at a fixed location relative to the page or moves with the scrollbar. The default value is "scroll"

background-attachment:
                                 attribute;

  Attribute is as follows:
  • fixed
  • scroll
Positions the image within its containing box. The horizontal and vertical axes are individually specified either by value or keyword. Default is "top left"

background-position: vert horz;

  Vert is as follows:
  • top
  • center
  • bottom
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)
Horz is as follows:
  • left
  • center
  • right
  • Centimeters (cm)
  • Point size of font (em)
  • Inches (in)
  • Millimeters (mm)
  • Picas [1/6 inch] (pc)
  • Pixels (px)
  • Points (pt)
  • Percentage (%)

 

Controls pattern repetition of the background image. Default value is "repeat" where the pattern repeats both ways until the containing box is full.  No-repeat suppresses on both axes. Repeat-x  allows horizontal repetition only, Repeat-y allows vertical repetition only.

background-repeat: attribute;

  Attribute is as follows:
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat

List Properties
Description Property Attributes
 Configure the properties of a list. Shortcut method. If you associate the property with a list item (ol ul) it applies to the entire list, if you associate it with  list items, it applies only to those items.  Thus, a fairly complex outline structure can be constructed.

list-style: img pos type;

 See below. Any combination of the following attributes will work.
Specify a universal resource locator (url) to use as a bullet. Best to use a gif already presized to the exact size needed as there is no scaling feature. Default value is "none"

list-style-image: img;

  Img is as follows:
  • none
  • url( doman/path/file )
Specify positioning of the bullet. Inside indents the bullet, outside positions it to the left of the item as an outdent. The default value is "outside"

list-style-position: pos;

  Pos is as follows:
  • inside
  • outside
Specify standard list types. Setting list-style-image will override these standard options. Setting the type attribute to none will suppress all bullets.

list-style-type: type;

  Type is as follows:
  • none
  • circle
  • disc
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • lower-alpha
  • upper-alpha
  • armenian
  • cjk-ideographic
  • georgian
  • hebrew
  • hiragana
  • hiragana-iroha
  • katakana
  • katakana-iroha

 

NOTES:
• A style sheet consists of one or more defined styles.
• A style consists of one or more selectors associated with one or more property-attribute pairs.
• A selector can be any valid html tag (element), defined class, ID, or pseudoclass.
• Tags are indicated without the enclosing angle marks.   e.g.  <p> becomes p. In this form, the style is associated with all tags of that type.
• Classes are indicated by a preceding period.   e.g. .myclass When presented in this form, the style can be used with any tag. The html tag would reference this with the class="myclass" property.
• IDs are indicated by a preceding hash mark.   e.g. #myId This allows the style to be applied to ONE specific element. The target html tag would be identified with the id="myId" property.
• Pseudoclasses are identified with a colon separating the element and pseudoclass.   e.g. a:hover
• Classes can be linked to specific html tags and are indicated as follows: e.g. p.myclass1 p.myclass2. Thus, p.myclass is a different style from h1.myclass.