Home / ASP.NET Wiki / CSS / Changing the color of HTML un ordered list.

Changing the color of HTML un ordered list.

 Rate It (0)

It's a hot topic among web developers that is it possible to change the color of HTML bulletin list? Well, as many says, it's impossible, there is a very simple way to deal with it. Following is the full code to change the size and change the color.

<ul style="font-size:20px">
<li style="color:Red" ><span style="color:Black; font-size:12px">1</span></li>
</ul>

Let's see one by one what exactly the code do.

 <ul style="font-size:20px">

By setting the font-size for the whole list you can change the size of the bullet. It applies for both text and the bullet. So later, we have to include the text within a span tag and define the style for the text itself.

 <li style="color:Red" >

By setting the color, you can specify what color the bullet should take.

 <span style="color:Black; font-size:12px">

Since the color and font-size applies for the text also, you need to include the text within span tags to separate it from the bullets so you can specify a separate style for the text. 

I tested it with latest FF, IE and Chrome web browsers and it works like a charm!

Revision number 2, Saturday, December 24, 2011 9:01:32 AM by codenickel

Comments

Shortcuts

Table of Contents

Top Wiki Contributors

(last 30 days)

  1. francissvk (1)
  2. deepeshsp (1)