CSS Style Properties

This section summarizes the five style properties of supported by Cascading Style Sheets. Scroll through the file or click on one of the style properties below.

by DEVX Staff

Jan 1, 2000

he symbol

means that the style property is not supported by Netscape Navigator 4.0.

The symbol

means that the style property is not supported by Internet Explorer 3.0.

The symbol

means that the style property is not supported by Internet Explorer 4.0.

If the symbol has an * after it, that means that the style property is only partially supported. Those values with a corresponding asteryx in front of them are the ones that don't work.

NOTE: Netscape 4.0 does NOT support classes defined in the style declaration in the header when you set the class as a number, i.e. p.1 {font-size: 15pt} but it will work if the class is a letter. Don't ask.

Netscape versions 3.0 and earlier support no style sheets. Keep in mind, though, that these discrepancies are contantly changing. Furthermore, the limitations that we list here are only the result of some preliminary testing on our part, and may not be correct in every case. P>

Text Properties
General Comments: These properties let you control basic text formatting. Some of these can also be applied to non-text elements.
Property	Description	Values	Example
`text-transform`	Set the case of the text.	`capitalize uppercase lowercase none`	`p {text-transform: capitalize}` Capitalizes the first character of each word in the paragraph. `H2 {text-transform: uppercase}` Displays all level two headlines in all uppercase characters.
`vertical-align`	Aligns the element vertically to the baseline. Can be very useful with images.	`baseline sub super top text-top middle bottom text-bottom`	`img {vertical-align: middle}` Places the image in the middle of the baseline.
`text-align`	Aligns the element horizontally across the page or within division	`left right center justify`	`H3 {text-align: center}` Centers all level three headlines.
`text-indent`	Sets the amount of indent for the first line of a text block	`XX units %`	`p {text-indent: 2em}` Indents the first line of the paragraph 2 em spaces.
`line-height`	Also known as "leading" or "line space." Specifies the distance between baselines of consecutive lines of text.	`normal XX units %`	`p {line-height: 12pt}` Sets 12 points of space from baseline to baseline in paragraph.
`word-spacing`	Lets you control the space between words.	`normal XX units`	`p {word-spacing:1pt}` Puts an extra 1 point of space between each word in the paragraph
`letter-spacing`	Lets you control the space between letters.	`normal XX units`	`p {letter-spacing: 0}` Prevents any extra space from being added between letters in a paragraph.
`text-decoration`	Sets underlining, overlining, strike-through, or blink attributes for the element. Vendors may be adding their own text decoration formats, as well.	`underline``overline line-through``blink none`	`H1 {text-decoration: blink}` Make all level one headlines blink. We don't recommend that you use blink at all! (and apparently, neither does Microsoft, which doesn't support it.)

Font Properties
General Comments: These properties let you control basic font characteristics.
Property	Description	Values	Example
`font-family`	Specifies the font family, or typeface, to use for the element. You can specify a series of names and the first available font is used.	`family name generic name: serif sans-serif cursive fantasy monospace`	`p {font-family: futura, helvetica, arial, sans-serif}` Display the paragraph in Futura, if available. If not, try Helvetica, Arial, and finally, any sans-serif display.
`font-style`	Specifies the style of type to use for the element.	`normal italic oblique`	`H2 {font-family: futura, helvetica, arial; font-style: italic}` Uses the italic variation of the typeface for all level two headlines.
`font-variant`	Lets you select the small caps style of the typeface.	`normal small-caps`	`H2 {font-family: futura, helvetica, arial; font-variant: small-caps}` Uses the small-caps variation of the typeface for all level two headlines.
`font-weight`	Lets you select the weight or boldness of the font.	`lighter normal bold bolder 100 200 300 ... 900`	`blockquote {font-weight: bold}` Makes the blockquote bold.
`font-size`	Let you select the size of the type in the font. Font size may be specified in absolute units or relative to the "current" size.	`XX units % larger smaller xx-small x-small small medium large x-large xx-large`	`p{font-size: 12pt}` displays the paragraph in 12 point type. `H1 {font-size: 150%}` Displays all level one headlines at 150% of their normal size.

Color and Background Properties
General Comments: These properties let you control the color and background of elements.
Property	Description	Values	Example
`color`	Sets the color of the element.	`color name hex value` `rgb(R%, G%, B%)` `rgb(R, G, B)`	`p {color: red}` Displays the paragraph text in red.
`background-color`	Sets the color for the background of the element.	`color name hex value rgb(R%, G%, B%) rgb(R, G, B)`	`H1 {background-color: green}` Displays the background area of all level one headlines in green. (The effect is like having a green bar behind the headline.)
`background-image`	Specifies an image to use for the background of an element.	`url(URLname)`	`blockquote {background-image: url(..images/sand.gif)}` Displays the image "sand.gif" in the background area of the blockquote.
`background-repeat`	Specifies how and if a background image is repeated.	`repeat repeat-x repeat-y no-repeat`	`blockquote {background-image: url(..images/sand.gif); background-repeat: repeat}` Displays the image "sand.gif" in the background area of the blockquote and repeats the image vertically and horizontally to fill the entire background area.
`background-attachment`	Lets you attach the background image so that it doesn't scroll.	`scroll fixed`	`blockquote {background-image: url(../images/sand.gif); background-attachment: fixed}` Displays the image "sand.gif" in the background area of the blockquote and prevents the image from scrolling.
`background-position`	Sets the initial position of the background image.	`vertical % horizontal % top center bottom left center right`	`body {background-image: url(..images/sand.gif); background position: center center}` Centers the background image vertically and horizontally on the initial body screen.

Placement Properties
General Comments: These properties let you specify where an element gets placed within its "box."
Property	Description	Values	Example
`margin-top` **	Places the top margin of the element; you can use negative values. *NOTE: For some reason, IE4.0 treats this style command like Netscape 4.0 treats the padding properties, i.e. it will add space to the top of every cell*if done with a table. With <div> the property works normally.	`XX units % auto`	`div {margin-top: 2em}` Displays the top margin of the division 2 em spaces down the page.
`margin-bottom` **	Places the bottom margin of the element; you can use negative values. **See the note for `margin-top`	`XX units % auto`	`div {margin-bottom: 10%}` Places the bottom margin of the div element 10 percent down the page and diplays the element from the bottom up.
`margin-left`	Places the left margin of the element; you can use negative values.	`XX units % auto`	`div {margin-top: 6em}` Displays the left margin of the division 6 em spaces from the left of the page.
`margin-right`	Places the right margin of the element; you can use negative values.	`XX units % auto`	`div {margin-right: 1em}` Displays the right margin of the division 1 em space from the right edge of the page.
`padding-top`	Inserts padding at the top of the element. (Theoretically. We have only been able to make `padding-top` along with its related properties, work with tables.)	`XX units % auto`	`Table {padding-top: 12pt}` Inserts 12 points of space at the top of every cell in the table.
`padding-bottom`	Inserts padding at the bottom of the element.	`XX units % auto`	`Table {padding-bottom: 12pt}` Inserts 12 points of space at the bottom of every cell in the table.
`padding-left`	Inserts padding along the left side of the element.	`XX units % auto`	`Table {padding-left: 2em}` Inserts 2 em spaces at the left margin of every cell in the table.
`padding-right`	Inserts padding along the right side of the element.	`XX units % auto`	`Table {padding-right: 2em}` Inserts 2 em spaces at the right margin of every cell in the table.

A quick note about tables and the following border properties. As far as we could tell, only IE 4.0 would support border styles with its tables. However, the way it supported the tags is far from intuitive. If you put a border around a table, say `table {border: thick double red}` then the resulting table in IE4.0 will have a double thick red border around it and a double thick border, though not red, around each cell in the table. So, the table cells themselves only copy the width and style properties of the `table` property, not the color. The same thing happens when you specify a property for indivdual rows. That is, the width and style can be changed for the entire row, but for some reason, the color cannot be changed. Finally, in a surprising turn of events, using individual properties for table data works very well. In other words, `td.a {border: thin double red}` creates a nice double red border around any particular cell with `class=a`. Once again, though, this only works in IE4.0.
`border-width` **	Sets the width of the element's border. **NOTE: for some reason, the straight `border-width` tag does not produce a border in IE4.0. Other combinations of tags do, though.	`thin medium thick none`	`div {border-width: thin}` Displays a thin border around the division.
`border-style`	Sets the style of the element's border.	`none` `dotted` `dashed solid double groove ridge inset outset`	`table {border-style: dashed}` Displays a dashed border around the table.
`border-color`	Sets the color of the element's border.	`color name hex value rgb(R%, G%, B%) rgb(R, G, B)`	`table {border-color: red}` Displays a red border around the table.
`border border-top border-bottom border-left border-right`	Sets the width, color, and style of the border simultaneously	`width value style value color value`	`table {border: thick double red}` Displays a thick, double, red border around the table. `table {border-top: thin dashed red}` Diplays a thin, dashed, red border at the top of the table.
`height` **	Sets the height of the element. **Note: We have had limited success (with Netscape; no success in IE3.0) applying width and height to <div> tags, and no success with images.	`XX units`	`img.button {height: 70px}` Sets all button class images to be 70 pixels high.
`width` **	Sets the width of the element. ** See note for height.	`XX units`	`img.button {width: 100px}` Sets all button class images to be 100 pixels wide.
`float`	Places the element to the left or right and flows text around it.	`right left none`	`img.button {float: left}` Places a button class image to the left margin and flows text around it.
`clear`	Prevents text from flowing around an element.	`right left none`	`img.button {clear: left}` Places a button class image to the left margin and prevents any text or other elements from flowing beside it.

Classification Properties
General Comments: These properties let you classify elements by object type and assign characteristics based on these object types.
Property	Description	Values	Example
`display`	Specifies the category of object an element belongs to: a block element, like a heading or paragraph; an inline element, like emphasis or anchors; or a list-item element. If the category is `none`, the content of the element should not be displayed at all.	`none "" block inline list-item`	`p {display: none}` Hides the content of the paragraph. `p {display: ""}` Display the contents of the paragraph. `p {display: block}` Treats the paragraph as a block element, which can be positioned separately using the positioning attributes.
`white-space`	Describes how white space should be handled within the block elements.	`normal pre nowrap`	`p {white-space: no-wrap}` The paragraph will break only with a specific <br> tag.
`list-style-type`	Sets the type of symbol that appears in front of a list item.	`disc circle square decimal lower- roman upper- roman lower- alpha upper alpha`	`ul {list-style-type: square}` Unordered list items will use a square bullet.
`list-style-image`	Selects a specific image to serve as a bullet in front of list items.	`url(URLname)`	`ul {list-style-image: url(../images/smiley.gif)}` Unordered list items will use the image "smiley.gif" as a bullet.
`list-style-position`	Describes how the bullet marker and text in a list line up with each other.	`inside outside`	`ul {list-style-position: outside}` Creates the effect of a hanging indent `ul {list-style-position: inside}` The bullet and the second line of text are flush left.

0 Comments (click to add your comment)

Comment and Contribute