Cascading Style Sheet Quick Guide

 
 
This guide contains information how to create Cascading Style Sheets (CSS).

More information about CSS can be found at: http://www.w3.org/Style/CSS/

rss feed






Div style attribute.



Information
This table is based on the information found at:

Procedure

The attributes and properties are both used my Mozilla and IE browsers unless otherwise specified:
(1) Used by Mozilla
(2) Used by IE

Attribute property description
azimuth (1) azimuth (1) Enables different audio sources to be positioned spatially for aural presentation.
background background Is a shorthand for background-color, background-image, background-repeat, background-attachment and background-position.
background-attachment backgroundAttachment Sets or retrieves how the background image is attached to the object within the document.
background-color backgroundColor Sets or retrieves the color behind the content of the object.
background-image backgroundImage Sets or retrieves the background image of the object.
background-position backgroundPosition Sets or retrieves the position of the background of the object.
background-position-x (2) backgroundPositionX (2) Sets or retrieves the x-coordinate of the backgroundPosition property.
background-position-y (2) backgroundPositionY (2) Sets or retrieves the y-coordinate of the backgroundPosition property.
background-repeat backgroundRepeat Sets or retrieves how the backgroundImage property of the object is tiled.
behavior (2) behavior (2) Sets or retrieves the location of the Introduction to DHTML Behaviors.
border border Is a shorthand for border-width, border-style and border-color.
border-bottom borderBottom Is a shorthand for border-bottom-width, border-bottom-style and border-bottom-color.
border-bottom-color borderBottomColor Sets or retrieves the color of the bottom border of the object.
border-bottom-style borderBottomStyle Sets or retrieves the style of the bottom border of the object.
border-bottom-width borderBottomWidth Sets or retrieves the width of the bottom border of the object.
border-collapse (1) borderCollapse (1) Sets or retrieves a value that indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML.
border-color borderColor Sets or retrieves the border color of the object.
border-left borderLeft Is a shorthand for border-left-width, border-left-style and border-left-color.
border-left-color borderLeftColor Sets or retrieves the color of the left border of the object.
border-left-style borderLeftStyle Sets or retrieves the style of the left border of the object.
border-left-width borderLeftWidth Sets or retrieves the width of the left border of the object.
border-right borderRight Is a shorthand for border-right-width, border-right-style and border-right-color.
border-right-color borderRightColor Sets or retrieves the color of the right border of the object.
border-right-style borderRightStyle Sets or retrieves the style of the right border of the object.
border-right-width borderRightWidth Sets or retrieves the width of the right border of the object.
border-spacing (1) borderSpacing (1) Sets the space between cells in a table.
border-style borderStyle Sets or retrieves the style of the left, right, top, and bottom borders of the object.
border-top borderTop Is a shorthand for border-top-width, border-top-style and border-top-color.
border-top-color borderTopColor Sets or retrieves the color of the top border of the object.
border-top-style borderTopStyle Sets or retrieves the style of the top border of the object.
border-top-width borderTopWidth Sets or retrieves the width of the top border of the object.
border-width borderWidth Sets or retrieves the width of the left, right, top, and bottom borders of the object.
bottom bottom Sets or retrieves the bottom position of the object in relation to the bottom of the next positioned object in the document hierarchy.
caption-side (1) captionSide (1) Sets the position of a caption element within a table
clear clear Sets or retrieves whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.
clip clip Sets or retrieves which part of a positioned object is visible.
color color Sets or retrieves the color of the text of the object.
content (1) content (1) Is used to attach content before or after an element whilst using the ':before' or ':after' pseudo-elements.
counter-increment (1) counterIncrement (1) To increase the value of CSS Counters by a given value.
counter-reset (1) counterReset (1) To reset CSS Counters to a given value
cue (1) cue (1) Is a shorthand for cue-before and cue-after. These are used for audio devices to designate a sound to be played before or after an element.
cue-after (1) cueAfter (1) Is used in audio devices to play a sound after an element.
cue-before (1) cueBefore (1) Is used in audio devices to play a sound before an element.
cursor cursor Sets or retrieves the type of cursor to display as the mouse pointer moves over the object.
direction direction Sets or retrieves the reading order of the object.
display display Sets or retrieves whether the object is rendered.
elevation (1) elevation (1) Sets the acoustic source of the speaker's voice in the direction above/below.
empty-cells (1) emptyCells (1) Show the border from an empty cell.
filter (2) filter Sets or retrieves the filter or collection of filters applied to the object.
float styleFloat Sets or retrieves on which side of the object the text will flow.
font font Sets or retrieves a combination of separate font properties of the object. Alternatively,sets or retrieves one or more of six user-preference fonts.
font-family fontFamily Sets or retrieves the name of the font used for text in the object.
font-size fontSize Sets or retrieves a value that indicates the font size used for text in the object.
font-size-adjust (1) fontSizeAdjust (1) Sets the aspect value for an element that will preserve the x-height of the first-choice font.
font-stretch (1) fontStretch (1) Condenses or expands the current font-family horizontally.
font-style fontStyle Sets or retrieves the font style of the object as italic, normal, or oblique.
font-variant fontVariant Sets or retrieves whether the text of the object is in small capital letters.
  fontWeight Sets or retrieves the numeric weight of the font of the object.
font-weight fontWeight Sets or retrieves the weight of the font of the object.
  hasLayout Retrieves a value that indicates whether the object has layout.
height height Sets or retrieves the height of the object.
layout-flow (2) layoutFlow (2) Sets or retrieves the direction and flow of the content in the object.
layout-grid (2) layoutGrid (2) Sets or retrieves the composite document grid properties that specify the layout of text characters.
layout-grid-char (2) layoutGridChar (2) Sets or retrieves the size of the character grid used for rendering the text content of an element.
layout-grid-line (2) layoutGridLine (2) Sets or retrieves the gridline value used for rendering the text content of an element.
layout-grid-mode (2) layoutGridMode (2) Sets or retrieves whether the text layout grid uses two dimensions.
layout-grid-type (2) layoutGridType (2) Sets or retrieves the type of grid used for rendering the text content of an element.
left left Sets or retrieves the position of the object relative to the left edge of the next positioned object in the document hierarchy.
letter-spacing letterSpacing Sets or retrieves the amount of additional space between letters in the object.
line-break (2) lineBreak Sets or retrieves line-breaking rules for Japanese text.
line-height lineHeight Sets or retrieves the distance between lines in the object.
list-style (1) listStyle (1) Shorthand property for setting list-style-type, list-style-image, and list-style-position.
list-style-image (1) listStyleImage (1) Sets the image that will be used as the list item marker.
list-style-position (1) listStylePostion (1) Specifies the position of the marker box in the principal block box.
list-style-type (1) listStyleType (1) Specifies appearance of the list item marker.
margin margin Sets or retrieves the width of the top, right, bottom, and left margins of the object.
margin-bottom marginBottom Sets or retrieves the height of the bottom margin of the object.
margin-left marginLeft Sets or retrieves the width of the left margin of the object.
margin-right marginRight Sets or retrieves the width of the right margin of the object.
margin-top marginTop Sets or retrieves the height of the top margin of the object.
marker-offset (1) markerOffset (1) Sets the distance between the nearest border edges of a marker box (or bullet) and its associated principal box.
marks (1) marks (1) Set crop marks and cross marks on paged media.
max-height maxHeight Sets or retrieves the maximum height for displayable block level elements.
max-width maxWidth Sets or retrieves the maximum width for displayable block level elements.
min-height minHeight Sets or retrieves the minimum height for displayable block level elements.
min-width minWidth Sets or retrieves the minimum width for displayable block level element.
orphans (1) orphans (1) The minimum number of lines of content for the current element that must be left at the bottom of a page in a paged display environment.
outline (1) outline (1) Sets the outlines around elements.
outline-color (1) outlineColor (1) Sets the color of the outlines.
outline-style (1) outlineStyle (1) Sets the outlines styles.
outline-width (1) outlineWidth (1) Sets the outlines width.
overflow overflow Sets or retrieves a value indicating how to manage the content of the object when the content exceeds the height or width of the object.
overflow-x (2) overflowX (2) Sets or retrieves how to manage the content of the object when the content exceeds the width of the object.
overflow-y (2) overflowY (2) Sets or retrieves how to manage the content of the object when the content exceeds the height of the object.
padding padding Sets or retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border.
padding-bottom paddingBottom Sets or retrieves the amount of space to insert between the bottom border of the object and the content.
padding-left paddingLeft Sets or retrieves the amount of space to insert between the left border of the object and the content.
padding-right paddingRight Sets or retrieves the amount of space to insert between the right border of the object and the content.
padding-top paddingTop Sets or retrieves the amount of space to insert between the top border of the object and the content.
page-break-after pageBreakAfter Sets or retrieves a value indicating whether a page break occurs after the object.
page-break-before pageBreakBefore Sets or retrieves a string indicating whether a page break occurs before the object.
  pixelBottom Sets or retrieves the bottom position of the object.
  pixelHeight Sets or retrieves the height of the object.
  pixelLeft Sets or retrieves the left position of the object.
  pixelRight Sets or retrieves the right position of the object.
  pixelTop Sets or retrieves the top position of the object.
  pixelWidth Sets or retrieves the width of the object.
  posBottom Sets or retrieves the bottom position of the object in the units specified by the bottom attribute.
  posHeight Sets or retrieves the height of the object in the units specified by the height attribute.
page-break-inside (1) pageBreakInside (1) Sets the page-breaking behavior inside an element.
pause (1) pause (1) Is a shorthand property for specifying pauses in aural media.
pause-after (1) pauseAfter (1) Is used in aural media (audio) and sets a pause after an element.
pause-before (1) pauseBefore (1) Is used in aural media (audio) and sets a pause before an element.
pitch (1) pitch (1) Is used in aural media (audio) and sets the average pitch the speaking voice should have.
pitch-range(1) pitchRange (1) Is used in aural media (audio) and sets the pitch range the speaking voice should have.
play-during (1) playDuring (1) Is used in audio devices to play a sound in the background while element's content is being played/spoken.
position position Sets or retrieves the type of positioning used for the object.
  posLeft Sets or retrieves the left position of the object in the units specified by the left attribute.
  posRight Sets or retrieves the right position of the object in the units specified by the right attribute.
  posTop Sets or retrieves the top position of the object in the units specified by the top attribute.
  posWidth Sets or retrieves the width of the object in the units specified by the width attribute.
quotes (1) quotes (1) Sets the type of quotation marks for embedded quotations.
richness (1) richness (1) Is used in aural media (audio) and sets the richess of the spoken voice.
right right Sets or retrieves the position of the object relative to the right edge of the next positioned object in the document hierarchy.
scrollbar-3dlight-color (2) scrollbar3dLightColor (2) Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
scrollbar-arrow-color (2) scrollbarArrowColor (2) Sets or retrieves the color of the arrow elements of a scroll arrow.
scrollbar-base-color (2) scrollbarBaseColor (2) Sets or retrieves the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.
scrollbar-darkshadow-color (2) scrollbarDarkShadowColor (2) Sets or retrieves the color of the gutter of a scroll bar.
scrollbar-face-color (2) scrollbarFaceColor (2) Sets or retrieves the color of the scroll box and scroll arrows of a scroll bar.
scrollbar-highlight-color (2) scrollbarHighlightColor (2) Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
scrollbar-shadow-color (2) scrollbarShadowColor (2) Sets or retrieves the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
scrollbar-track-color (2) scrollbarTrackColor (2) Sets or retrieves the color of the track element of a scroll bar.
size (1) size (1) Is used in paged media to specify the size of the page.
speak (1) speak (1) Is used to specify that the text will be used for aural media.
speak-header (1) speakHeader (1) Is used in aural media to specify whether table headers are spoken before each cell, or only before each cell if that cell uses a different header to the previous cell.
speak-numeral (1) speakNumeral (1) Is used in aural media to specify how to speak numerals (numbers).
speak-punctuation (1) speakPunctuation (1) Is used in aural media and sets how punctuation (i.e. semi-colons etc) should be spoken.
speech-rate (1) speechRate (1) Is used in aural media (audio) to specify the speaking rate, in words per minute.
stress (1) stress (1) Is used in aural media (audio), and in conjunction with the pitch-range property, helps to specify peaks in the pitch of the voice.
table-layout (1) tableLayout (1) Fix the table layout so that the table renders much faster.
text-align textAlign Sets or retrieves whether the text in the object is left-aligned, right-aligned, centered, or justified.
text-align-last (2) textAlignLast (2) Sets or retrieves how to align the last line or only line of text in the object.
text-autospace (2) textAutospace (2) Sets or retrieves the autospacing and narrow space width adjustment of text.
text-decoration textDecoration Sets or retrieves a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations.
  textDecorationBlink Sets or retrieves a Boolean value that indicates whether the object's textDecoration property has a value of "blink."
  textDecorationLineThrough Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn through it.
  textDecorationNone Sets or retrieves the Boolean value indicating whether the textDecoration property for the object has been set to none.
  textDecorationOverline Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn over it.
  textDecorationUnderline Sets or retrieves whether the text in the object is underlined.
text-indent textIndent Sets or retrieves the indentation of the first line of text in the object.
text-justify (2) textJustify (2) Sets or retrieves the type of alignment used to justify text in the object.
text-kashida-space (2) textKashidaSpace (2) Sets or retrieves the ratio of kashida expansion to white space expansion when justifying lines of text in the object.
text-overflow (2) textOverflow (2) Sets or retrieves a value that indicates whether to render ellipses(...) to indicate text overflow.
text-shadow(1) textShadow (1) Sets shadows/drop-shadows, outer glows, and other shadow effects to text.
text-transform textTransform Sets or retrieves the rendering of the text in the object.
text-underline-position (2) textUnderlinePosition (2) Sets or retrieves the position of the underline decoration that is set through the textDecoration property of the object.
top top Sets or retrieves the position of the object relative to the top of the next positioned object in the document hierarchy.
unicode-bidi unicodeBidi Sets or retrieves the level of embedding with respect to the bidirectional algorithm.
vertical-align (1) verticalAlign (1) Specifies the vertical alignment of an inline or table-cell element.
visibility visibility Sets or retrieves whether the content of the object is displayed.
voice-family (1) voiceFamily (1) Is used in aural media (audio) to specify the voice family of the speaking voice.
volume (1) volume (1) Is used for specifying the median volume of the wave form.
white-space whiteSpace Sets or retrieves a value that indicates whether lines are automatically broken inside the object.
widows (1) widows (1) Is used in paged media to control line breaks by specifying the minimum number of lines in a paragraph that should be left at the top of the page.
width width Sets or retrieves the width of the object.
word-break (2) wordBreak (2) Sets or retrieves line-breaking behavior within words, particularly where multiple languages appear in the object.
word-spacing wordSpacing Sets or retrieves the amount of additional space between words in the object.
word-wrap (2) wordWrap (2) Sets or retrieves whether to break words when the content exceeds the boundaries of its container.
writing-mode (2) writingMode (2) Sets or retrieves the direction and flow of the content in the object.
z-index zIndex Sets or retrieves the stacking order of positioned objects.
zoom (2) zoom (2) Sets or retrieves the magnification scale of the object.