| Miscellaneous |
|
| Style Object |
|
| The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. |
|
| Syntax for using the Style object properties: |
| document.getElementById("id").style.property="value" |
|
| The Style object property categories: |
- Background
- Border and Margin
- Layout
- List
- Misc
- Positioning
- Printing
- Scrollbar
- Table
- Text
- Standard
|
|
| IE: |
| Internet Explorer, M: Mac IE only, W: Windows IE only, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard). |
|
|
| Background properties: |
|
| Property | Description | IE | F | O |
| background | Sets all background properties in one | 4 | 1 | 9 |
| backgroundAttachment | Sets whether a background-image is fixed or scrolls with the page | 4 | 1 | 9 |
| backgroundColor | Sets the background-color of an element | 4 | 1 | 9 |
| backgroundImage | Sets the background-image of an element | 4 | 1 | 9 |
| backgroundPosition | Sets the starting position of a background-image | 4 | No | No |
| backgroundPositionX | Sets the x-coordinates of the backgroundPosition property | 4 | No | No |
| backgroundPositionY | Sets the y-coordinates of the backgroundPosition property | 4 | No | No |
| backgroundRepeat | Sets if/how a background-image will be repeated | 4 | 1 | 9 |
|
|
|
| Border and Margin properties: |
|
| Property | Description | IE | F | O |
| border | Sets all properties for the four borders in one | 4 | 1 | 9 |
| borderBottom | Sets all properties for the bottom border in one | 4 | 1 | 9 |
| borderBottomColor | Sets the color of the bottom border | 4 | 1 | 9 |
| borderBottomStyle | Sets the style of the bottom border | 4 | 1 | 9 |
| borderBottomWidth | Sets the width of the bottom border | 4 | 1 | 9 |
| borderColor | Sets the color of all four borders (can have up to four colors) | 4 | 1 | 9 |
| borderLeft | Sets all properties for the left border in one | 4 | 1 | 9 |
| borderLeftColor | Sets the color of the left border | 4 | 1 | 9 |
| borderLeftStyle | Sets the style of the left border | 4 | 1 | 9 |
| borderLeftWidth | Sets the width of the left border | 4 | 1 | 9 |
| borderRight | Sets all properties for the right border in one | 4 | 1 | 9 |
| borderRightColor | Sets the color of the right border | 4 | 1 | 9 |
| borderRightStyle | Sets the style of the right border | 4 | 1 | 9 |
| borderRightWidth | Sets the width of the right border | 4 | 1 | 9 |
| borderStyle | Sets the style of all four borders (can have up to four styles) | 4 | 1 | 9 |
| borderTop | Sets all properties for the top border in one | 4 | 1 | 9 |
| borderTopColor | Sets the color of the top border | 4 | 1 | 9 |
| borderTopStyle | Sets the style of the top border | 4 | 1 | 9 |
| borderTopWidth | Sets the width of the top border | 4 | 1 | 9 |
| borderWidth | Sets the width of all four borders (can have up to four widths) | 4 | 1 | 9 |
| margin | Sets the margins of an element (can have up to four values) | 4 | 1 | 9 |
| marginBottom | Sets the bottom margin of an element | 4 | 1 | 9 |
| marginLeft | Sets the left margin of an element | 4 | 1 | 9 |
| marginRight | Sets the right margin of an element | 4 | 1 | 9 |
| marginTop | Sets the top margin of an element | 4 | 1 | 9 |
| outline | Sets all outline properties in one | 5M | 1 | 9 |
| outlineColor | Sets the color of the outline around an element | 5M | 1 | 9 |
| outlineStyle | Sets the style of the outline around an element | 5M | 1 | 9 |
| outlineWidth | Sets the width of the outline around an element | 5M | 1 | 9 |
| padding | Sets the padding of an element (can have up to four values) | 4 | 1 | 9 |
| paddingBottom | Sets the bottom padding of an element | 4 | 1 | 9 |
| paddingLeft | Sets the left padding of an element | 4 | 1 | 9 |
| paddingRight | Sets the right padding of an element | 4 | 1 | 9 |
| paddingTop | Sets the top padding of an element | 4 | 1 | 9 |
|
|
|
| Layout properties |
|
| Property | Description | IE | F | O |
| clear | Sets on which sides of an element other floating elements are not allowed | 4 | 1 | 9 |
| clip | Sets the shape of an element | 4 | 1 | 9 |
| content | Sets meta-information | 5M | 1 | |
| counterIncrement | Sets a list of counter names, followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default is 1 | 5M | 1 | |
| counterReset | Sets a list of counter names, followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0 | 5M | 1 | |
| cssFloat | Sets where an image or a text will appear (float) in another element | 5M | 1 | 9 |
| cursor | Sets the type of cursor to be displayed | 4 | 1 | 9 |
| direction | Sets the text direction of an element | 5 | 1 | 9 |
| display | Sets how an element will be displayed | 4 | 1 | 9 |
| height | Sets the height of an element | 4 | 1 | 9 |
| markerOffset | Sets the distance between the nearest border edges of a marker box and its principal box | 5M | 1 | |
| marks | Sets whether cross marks or crop marks should be rendered just outside the page box edge | 5M | 1 | |
| maxHeight | Sets the maximum height of an element | 5M | 1 | 9 |
| maxWidth | Sets the maximum width of an element | 5M | 1 | 9 |
| minHeight | Sets the minimum height of an element | 5M | 1 | 9 |
| minWidth | Sets the minimum width of an element | 5M | 1 | 9 |
| overflow | Specifies what to do with content that does not fit in an element box | 4 | 1 | 9 |
| verticalAlign | Sets the vertical alignment of content in an element | 4 | 1 | No |
| visibility | Sets whether or not an element should be visible | 4 | 1 | 9 |
| width | Sets the width of an element | 4 | 1 | 9 |
|
|
|
| List properties |
|
| Property | Description | IE | F | O |
| listStyle | Sets all the properties for a list in one | 4 | 1 | 9 |
| listStyleImage | Sets an image as the list-item marker | 4 | 1 | No |
| listStylePosition | Positions the list-item marker | 4 | 1 | 9 |
| listStyleType | Sets the list-item marker type | 4 | 1 | 9 |
|
|
|
| Misc properties |
|
| Property | Description | IE | F | O |
cssText
| | 4 | 1 | |
|
|
|
| Positioning properties |
|
| Property | Description | IE | F | O |
| bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element | 5 | 1 | 9 |
| left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element | 4 | 1 | 9 |
| position | Places an element in a static, relative, absolute or fixed position | 4 | 1 | 9 |
| right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element | 5 | 1 | 9 |
| top | Sets how far the top edge of an element is above/below the top edge of the parent element | 4 | 1 | 9 |
| zIndex | Sets the stack order of an element | 4 | 1 | 9 |
|
|
|
| Printing properties |
|
| Property | Description | >IE | F | O |
| orphans | Sets the minimum number of lines for a paragraph that must be left at the bottom of a page | 5M | 1 | 9 |
| page | Sets a page type to use when displaying an element | 5M | 1 | 9 |
| pageBreakAfter | Sets the page-breaking behavior after an element | 4 | 1 | 9 |
| pageBreakBefore | Sets the page-breaking behavior before an element | 4 | 1 | 9 |
| pageBreakInside | Sets the page-breaking behavior inside an element | 5M | 1 | 9 |
| size | Sets the orientation and size of a page | | 1 | 9 |
| widows | Sets the minimum number of lines for a paragraph that must be left at the top of a page | 5M | 1 | 9 |
|
|
|
| Scrollbar properties (IE-only) |
|
| Property | Description | IE | F | O |
| scrollbar3dLightColor | Sets the color of the left and top sides of the arrows and scroll boxes | 5W | No | No |
| scrollbarArrowColor | Sets the color of the arrows on a scroll bar | 5W | No | No |
| scrollbarBaseColor | Sets the base color of the scroll bar | 5W | No | No |
| scrollbarDarkShadowColor | Sets the color of the right and bottom sides of the arrows and scroll boxes | 5W | No | No |
| scrollbarFaceColor | Sets the front color of the scroll bar | 5W | No | No |
| scrollbarHighlightColor | Sets the color of the left and top sides of the arrows and scroll boxes, and the background of a scroll bar | 5W | No | No |
| scrollbarShadowColor | Sets the color of the right and bottom sides of the arrows and scroll boxes | 5W | No | No |
| scrollbarTrackColor | Sets the background color of a scroll bar | 5W | No | No |
|
|
|
| Table properties |
|
| Property | Description | IE | F | O |
| borderCollapse | Sets whether the table border are collapsed into a single border or detached as in standard HTML | 5 | 1 | 9 |
| borderSpacing | Sets the distance that separates cell borders | 5M | 1 | 9 |
| captionSide | Sets the position of the table caption | 5M | No | No |
| emptyCells | Sets whether or not to show empty cells in a table | 5M | 1 | 9 |
| tableLayout | Sets the algorithm used to display the table cells, rows, and columns | 5 | No | No |
|
|
|
| Text properties |
|
| Property | Description | IE | F | O |
| color | Sets the color of the text | 4 | 1 | 9 |
| font | Sets all font properties in one | 4 | 1 | 9 |
| fontFamily | Sets the font of an element | 4 | 1 | 9 |
| fontSize | Sets the font-size of an element | 4 | 1 | 9 |
| fontSizeAdjust | Sets/adjusts the size of a text | 5M | 1 | No |
| fontStretch | Sets how to condense or stretch a font | 5M | No | No |
| fontStyle | Sets the font-style of an element | 4 | 1 | 9 |
| fontVariant | Displays text in a small-caps font | 4 | 1 | 9 |
| fontWeight | Sets the boldness of the font | 4 | 1 | 9 |
| letterSpacing | Sets the space between characters | 4 | 1 | 9 |
| lineHeight | Sets the distance between lines | 4 | 1 | 9 |
| quotes | Sets which quotation marks to use in a text | 5M | 1 | |
| textAlign | Aligns the text | 4 | 1 | 9 |
| textDecoration | Sets the decoration of a text | 4 | 1 | 9 |
| textIndent | Indents the first line of text | 4 | 1 | 9 |
| textShadow | Sets the shadow effect of a text | 5M | 1 | |
| textTransform | Sets capitalization effect on a text | 4 | 1 | 9 |
| unicodeBidi | | 5 | 1 | |
| whiteSpace | Sets how to handle line-breaks and white-space in a text | 4 | 1 | 9 |
| wordSpacing | Sets the space between words in a text | 6 | 1 | 9 |
|
|
|
| Standard Properties |
|
| Property | Description | IE | F | O |
| dir | Sets or returns the direction of text | 5 | 1 | 9 |
| lang | Sets or returns the language code for an element | 5 | 1 | 9 |
| title | Sets or returns an element's advisory title | 5 | 1 | 9 |
|
|
|
|
|
|
| Web Standard |
|
| Web standards and Validation |
|
| W3C is the World Wide Web Consortium, which is an independent organization that manages code standards on the web (e.g. HTML, CSS, XML and others such web technologies). Microsoft, The Mozilla Foundation and many others are a part of W3C and agree upon the future developments of the standards. |
|
| If you have been working just a bit with web design, you probably know how a webpage is presented across different browsers and that there can be a big differences on different browsers. It can be very frustrating and time-consuming to create a webpage which can be viewed in Mozilla, Internet Explorer, Opera and all the rest of the existing browsers. |
|
| The idea of having standards is to agree upon a common denominator on how to use web technologies. A web developer has a certainty, by observing the standards, that what he or she does will work in a more appropriate manner across different platforms. |
|
We therefore recommend that you back up the work carried out by the W3C and validate your CSS in order to observe the standard.
|
|
|
| CSS validator |
|
| W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validat; to make it easier to observe the CSS standard. |
|
| To make it easier for you to validate your stylesheet, you can do it directly from this webpage. Simply replace the URL with the URL of your stylesheet below and click to validate. You will then be informed by the W3C site if there are any errors found. |
|
|
|
|
|
|
|
0 comments: