CODEWITHSUNDEEP
cssbackgroundhtml-lists
Hirose Akira
Hirose Akira

Reputation: 33

How to set <li> Background color?

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><a href="#tab1">PROGRAM</a></li>
     <li><a href="#tab2">PROC</a></li>
     <li><a href="#tab3">DDNAME</a></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.

Upvotes: 2

Views: 5975

Answers (7)

Ryan
Ryan

Reputation: 127

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

Upvotes: 0

Nick P
Nick P

Reputation: 377

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

Upvotes: 0

aWebDeveloper
aWebDeveloper

Reputation: 38432

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"><a href="#tab1">PROGRAM</a></li>
     <li><a href="#tab2">PROC</a></li>
     <li><a href="#tab3">DDNAME</a></li>
</ul>

Upvotes: 1

Daniel
Daniel

Reputation: 4173

If you want to for example add green to a <li> tag you can do the following:

<li style="background: green;"><a href="#tab1">PROGRAM</a></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/

Upvotes: 0

Carl0s1z
Carl0s1z

Reputation: 4723

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>

Upvotes: 2

Jesse Q
Jesse Q

Reputation: 1671

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.

Upvotes: 1

Paul Anderson
Paul Anderson

Reputation: 1180

This will make the first item have a red background:

<li style="background: red"><a href="#tab1">PROGRAM</a></li>

Upvotes: 0

Related Questions