Web design templates

Flash intro templates

Logo templates

Corporate Identity

PHP-Nuke Themes

Full site templates

Last added templates

Pages

  • Home
  • About

Category

  • HTML
  • Web Design

Archives

  • February 2008
  • November 2007

Blogroll

  • Alex
  • Donncha
  • Dougal
  • Matt
  • Michel
  • Mike
  • Ryan

Meta:

  • RSS
  • Comments RSS
  • Valid XHTML
  • XFN

Logo  
Logo Logo
 

CSS and Lists

February 27th, 2008 by tech3

CSS and HTML are a bit different in terms of lists. In CSS, there are only 2 types of lists as opposed to HTML, which has 3. CSS has numbered and bulleted types of lists and you can define the style of the bullets and numbers with CSS using list-style-type property.

Styling the List

 

This is used to style the bullets and numbering in different ways as allowed by CSS. For example, to have a list with square style bullets, we use the following code.

<ul style=”list-style-type: square;”>

<li>one</li>

<li>two</li>

<li>three</li>

the output is as follows

 

 

Usage of an Image as a Bullet

We can use an image as a bullet too, by making the necessary changes in the code. For example, to have an image as a bullet, we can use the following code.

<ul style=”list-style-image: url(image.gif);”>

<li>one</li>

<li>two</li>

<li>three</li>

Positioning of the Bullets

CSS also provides a powerful feature of governing the placement of the bullets and how the text will be displayed around them. For instance, consider the following code segment and the associated output with it.

<ul style=”list-style-position: inside;”>

<li>one</li>

<li>two</li>

<li>three</li>

 

 

Combining it one the Go

You can also combine all the tags present into one tag and use it for your styling. Consider the code below and its output.

<ol style=”list-style: alpha inside none;”>

<li>one</li>

<li>two</li>

<li>three</li>

 

 

In this way, you can design your custom styled bullets and numbering using the powerful features of CSS.


Posted in   HTML, Web Design |





Leave a Comment


Copyright © 2006-2007 Elegant Templates. All Rights reserved.