26 February 2008

Classification properties in CSS – an overview

Posted by: admin in Uncategorized

When you take classification properties in CSS, many different types of them are available. They include:

Display
Whitespace
List style type
List style image
List style

Let us see the syntax and usage of each one of them.
Display: You can use this particular classification property with any of the following four values:

inline
block
list-item
none

Inline:

Used when you do not require a line break either before or after an element.

Block:

Used when you wish to have a line break before and after an element.

List-item:

Performs a similar function as that of Block classification property; however, a list-item marker is added.

None:

Used when you require no display.

How would you use it? Let me give you an example for inline:

<html><head><style type=”text/css”>p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>hi</p>
<div>And this div section is not displayed!</div>
</body>
</html> Example for block:<html><head><style type=”text/css”>span
{
display: block
}
</style>
</head>
<body>
<span>hi.</span>
</body>
</html>
Whitespace: This particular classification property determines how whitespaces has to be treated. It takes up the following three values:

normal pre nowrap

Output will be like this:

Hi, This is Thompson. How are you? Hi, This is Thompson. How are you? Hi, This is Thompson. How are you? Hi, This is Thompson. How are you?

list style: Using this classification property, you can set the properties for a list in one declaration. Various possible values that it can take are:

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none

An example demonstrating all list-style variables:

<html><head><style type=”text/css”>ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ul class=”disc”>
<li>Disc type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”circle”>
<li>Circle type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”square”>
<li>Square type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”none”>
<li>The “none” type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”decimal”>
<li>Decimal type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”decimal-leading-zero”>
<li>Decimal-leading-zero type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”lower-roman”>
<li>Lower-roman type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”upper-roman”>
<li>Upper-roman type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”lower-alpha”>
<li>Lower-alpha type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
<ul class=”upper-alpha”>
<li>Upper-alpha type</li>
<li>CD</li>
<li>Video tape</li>
</ul>
</body>
</html>

Output will be like this:

Disc type
CD
Video tape
Circle type
CD
Video tape
Square type
CD
Video tape
The “none” type
CD
Video tape
Decimal type
CD
Video tape
Decimal-leading-zero type
CD
Video tape
Lower-roman type
CD
Video tape
Upper-roman type
CD
Video tape
Lower-alpha type
CD
Video tape
Upper-alpha type
CD
Video tape

list-style image:

This property will specify which image has to replace the list-item maker. It takes two values.
url noneurl refers to the path of the image.

A small example:

<html><head><style type=”text/css”>ul
{
list-style-image: url(’bullet.gif’)
}
</style>
</head>
<body>
<ul>
<li>CD</li>
<li>Video tape</li>
<li>DVD</li>
</ul>
</body>
</html>

Output will look like this:

CD
Video tape
DVD

list-style position: This property decides the position of the list-item marker. It takes two values, namely inside and outside.Example:
<html>
<head><style type=”text/css”>
ul.inside
{list-style-position: inside
}
ul.outside{
list-style-position: outside
}</style>
</head>
<body>
<p>This list has a list-style-position with a value of “inside”:</p>
<ul class=”inside”>
<li>CD</li>
<li>DVD</li>
<li>Video tape</li>
</ul>
<p>This list has a list-style-position with a value of “outside”:</p>
<ul class=”outside”>
<li>CD</li>
<li>DVD</li>
<li>Video tape</li>
</ul>
</body>
</html>

Output:This list has a list-style-position with a value of “inside”:

CD
DVD
Video tape

This list has a list-style-position with a value of “outside”:

CD
DVD
Video tape

Tags: Classification properties in CSS – an overview

Uncategorized,

Subscribe,

(No Ratings Yet)

138 views

This entry was posted on 26 February 2008 at 8:33 PM and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.