CSS3 Classification

CSS3 Basics - Part 7

Forward: Classification deals with how and where an element is displayed. That is what we look at in this tutorial.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 7 of my series, CSS3 Basics. Classification deals with how and where an element is displayed. That is what we look at in this tutorial.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

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):

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        img {float:right}
    </style>
</head>
<body>
    text text text text text <img src="myImage.gif">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</body>
</html>

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:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <div style="display:inline; border:solid 1px red">
        First DIV Element.
    </div>
    <div style="display:inline; border:solid 1px red">
        Second DIV Element.
    </div>
</body>
</html>

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.

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        img {visibility:hidden}
    </style>
</head>
<body>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <img src="myImage.gif"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</body>
</html>

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, CSS3 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

Broad Network

CSS3 Classification

CSS3 Basics - Part 7

Introduction

Related Links

Comments