The last time we saw the definitions of basic terms in a Cascading Style Sheet. We saw the structure of rules and we looked at properties and values for Fonts and Texts. In this discussion we will look at basic visual formatting, use of color, and table layout.
All document element generate a rectangular box known as the element box. The element box has a margin, border, and padding all of which can specified. The width of the element box is the length between inner left edge to the inner right edge. The height of the element box refers to the length between the inner top edge to the inner bottom edge.
For the element box you can set the property margin, the values are in length units or in percentages of the width of the containing block. The border has various properties - border-style, border-width, and border-color. There are various values for the border-style but the browsers are only required to support solid and none. The border-width could be thin, medium, or thick.
The property padding is given length units or in percentages of the width of the containing block.
Colors as we have seen can be expressed as the named known colors or in rgb or in hexadecimal notation. The property color implies foreground. The background color is set separately by the property background-color. One of the values for the background-color is transparent. When the background-color is set to transparent the background color of the ancestor element shows through. With the property background-attachment you declare the image to be fixed with respect to the viewing area and therefore not affected by scrolling.
You may also include background images through the property background-image. The image can be positioned through the property background-position or repeated in a tile pattern through the property background-repeat.
In the past it has been possible to float images using the align attribute. For instance <img src = "pict.gif" align = "left"> allowed the image to float to the left and the text to flow around it. With CSS you can float any element - images, paragraphs, lists, etc. The property name is float and the values are - left | right | none. The default is none. Margins around floated do not collapse. If you float a nonreplaced elements you must declare a width for that element.
If you have a document with sections, you may not want a floating element from one section to overlap into a another section. So you would like to clear the first element of the second section from any floating elements. The property is clear and the values are - left | right | both.
Positioning allows you to place an element box relative to its parent element, other elements, or to the browser window. The property position has these values:
There is the concept of a containing block which most times is the nearest block level ancestor. You can look upon the containing block as the positioning context. Offsets are in reference to the containing block. For example, the offset top says how much the top of the element's block be placed from the top edge of the containing block. Positive values for the offset move the element box interior to the containing block and negative values outside. The offsets are - top, right, bottom, and left. The values are expressed in length units or in percentages of the height of the containing block for top and bottom and percentages of the width of the containing block for right and left.
You can of course decide on the height and width of an element using those properties using length units or percentages of the containing element. You can also specify the minimum height and width with min-height and min-width or the maximum height and width with max-height and max-width.
If the element box has been given a predetermined size and its contents overflow. You can control the situation with the property overflow. The values are visible | hidden | scroll | auto.
The styles for both tables and lists maybe specified through various property-value pairs. Refer to the sample Cascading Style Sheet for a complete summary. The Cascading Style Sheet has the concept of an outline which is similar to a border yet not the same. An outline does not participate in the flow of the document and they can be non-rectangular.