How to set <li> Background color? - css

Question

I believe it's simple, but since I'm new to this I don't have a clue of how to do it. I just want to change the background color of a li tag - just for fashioning, nothing else.
This is my HTML:
<ul id="abas">
<li>PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
Sorry for being a noob but, this is the css part right?
#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
I noticed that here>>> "background-color:3B31FF;" is where I change the
color of the background, but doing this, changes all the background colors of course
... I only need 1 "li" tab to change and any html tutorial would be nice too.

Answer 1

Css code:
#abas li {
background-color: ... ;
}
fill in color code where dots are, like this:
background-color:#000000; //color black
Single tag:
Css code:
li.selected {
background-color: ... ;
}
Html code:
<ul>
<li></li>
<li class="selected"></li>
<li></li>
</ul>

Answer 2

First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part do this
CSS
#abas li {
background-color: #xxxxxx ;
//your other style goes here
}
#abas li.current {
background-color: #xxxxxx ;
//your other style goes here
}
HTML
<ul id="abas">
<li class="current">PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>

Answer 3

To change the background color simply style it:
<li style="background-color:blue;">Program</li>
You will likely also want to set some height and width parameters.

Answer 4

This will make the first item have a red background:
<li style="background: red">PROGRAM</li>

Answer 5

If you want to for example add green to a <li> tag you can do the following:
<li style="background: green;">PROGRAM</li>
But this isn't really best practice because normally you want to keep your HTML and CSS separated. So in CSS you would do it like this:
li { background: green; }
or use hex color codes:
li { background: #00ff00; }
If you only want to change one specific <li> tag you can add a class to it:
<li class="precious">
and then apply a css rule to this class:
.precious { background: #00ff00; }
and only this <li> tag with the .precious class is going to get styled.
Live Example: http://jsfiddle.net/pulleasy/WEdmt/

Answer 6

You can also make your life a whole lot easier with the border-radius element. for what you are doing it would be:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
This will give you the same result. Also for example sake, you will need to add a height and a width to get some sort of result. so if that were the case you would need to do this:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
height: 100px;
width: 100px;
}
This will give you the result that I think you were looking for. If you are looking to use pixels instead of percents for a fluid layout, the you will need to use this. (Note this is only for the width, height and positioning).
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
height: 10%;
width: 10%; /*Replace these percentiles with your width and height*/
}
I will assume that you know how to make the

Answer 7

An alternative to using hex code is using RGB / RGBA:
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);
This gives you even more control over your color by adding alpha and transparency support, but unfortunately, it's not supported by some browsers (IE, namely, although I don't know about IE 10).