CSS3 Examples

Spacing, alignment, and positioning

CSS2 allows authors to control the visual placement of content on the page through text indentation, margins, floats, and absolute and relative positioning. By using CSS properties to achieve visual effects, authors can write simpler HTML and eliminate images and non-breaking spaces ( ) used for positioning.

The following properties give control over spacing, alignment, and positioning:

• 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. For example instead of writing "H E L L O" (which users generally recognize as the word "hello" but users of speech recognition tools would hear as individual letters), authors may create the same visual effect with the 'word-spacing' property applied to "HELLO".
• 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces ( ), which are non-standard mark-up, to create space around an element.
• 'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects. The positioning properties may be used to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more.
• The 'empty-cells' property allows users to leave table cells empty and still give them proper borders on the screen or on paper. A data cell that is meant to be empty should not be filled with white space or a non-breaking space just to achieve a visual effect.

No Comment | Posted in » Advance CSS3, css articles