CSS Classification

Introduction
This is part 8 of my series, Basics of CSS2. Classification deals with how and where an element is displayed.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Floating
If you have an inline element in a containing element, that inline element can be sent to the left or right end of the containing block in the line in which it was. If it is sent to the left, we say it has been floated left. If it is sent to the right, we say it has been floated right. When it is floated, the other inline elements (text) in the containing element reposition themselves on the sides of the floated element. An example of an inline element is the image.

If the element to float were in the first line of the containing element and it is floated left, then the other inline elements will be on its right and below it. If the element to float were floated right, then the other inline elements will be on its left and below it.

If the element to float were in some middle line of the containing element and it is floated left, then the other inline elements will be on its top, right and below it. If the element to float were floated right, then the other inline elements will be on its top, left and below it.

If the element to float were in the last line of the containing element and it is floated left, then the other inline elements will be on its right and above it. If the element to float were floated right, then the other inline elements will be on its left and above it.

Now, browsers may not respect the above three descriptions strictly; however, they do respect it reasonably. Floating is normally applied to inline elements, since a block-level element normally takes a whole horizontal width of the containing element.

To achieve floating, use the float property. To float an image right, you would have something like:

float:right

The two possible values for the float property are "right" and "left", for right floating and left floating respectively. Try the following code for right floating (use a small image of your own):

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

img {float:right}

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

The containing element above is the BODY element.

Examples of containing elements in which you can do floating are the BODY, DIV, FORM and Paragraph elements.

Displaying an Element
CSS has a property called the display property; its name is "display". This property has many values but the one that are very common in use are the "inline" and "block" values. The meanings of these values are as follows:

inline
This value converts a block-level element into an inline-level element.
block
This value converts an inline-level element into a block-level element.

Try the following code where two DIV elements have been converted to inline elements:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

First DIV Element.

Second DIV Element.

Visibility
You can make an element visible or hidden. The property for this has the property name, "visibility". It can have three values but I will talk only about the two common ones in use.

visible
With this value, an element is visible. This is the normal state of all elements.
hidden
With this value, you do not see the element, but the element still occupies space even though it is fully transparent. Under this condition, you see the elements around it.

Try the following example for a hidden image (use your own image); the image is in the middle of text in the code; remember that under normal conditions the height of the image determines the height of the text line in which the image belongs.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

img {visibility:hidden}

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

At this point, we have covered the basics of CSS Classification. There are other properties and other values to the properties mentioned above. You do not need these extra properties and values, just to make your web page presentable. The ordinary customer does not need these extra features. You need them for complex presentational aspects.

Strictly speaking, CSS2 does not have a topic as Classification. However, for the purpose of teaching I have grouped certain properties under this heading; CSS1 made this grouping in its specification.

We stop here and continue in the next part of the series.

Chrys