Question

I wrote this code:

CSS:

#header {
    margin: 0;
    background:gray;
}

#tabs {
    color:yellow;
    font-weight: bolder;
    display:inline;
}

HTML:

<div id="header"> 
     <h1>Tabs</h1>
     <ul id="tabs">
         <li id="tabs"><a href="#">This</a></li>
         <li id="tabs"><a href="#">That</a></li>
         <li id="tabs"><a href="#">The Other</a></li>
         <li id="tabs"><a href="#">Banana</a></li>
    </ul>
</div>

But the yellow font color is not being applied to the li items. Why is this happening? And how should I write this code in order to get correct output?

Answer 1

If you have multiple elements with the same ID, it’ll usually apply to only the first one. Elements should have unique IDs. Use classes instead.

From The global structure of an HTML document:

The id attribute assigns a unique identifier to an element

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances

So your code should look like this:

<li class="tabs"><a href="#">This</a></li>
<li class="tabs"><a href="#">That</a></li>
<li class="tabs"><a href="#">The Other</a></li>
<li class="tabs"><a href="#">Banana</a></li>

# for ID, . for class. Multiple elements can have the same class. You also want to change the link color of the lis so specify that in the CSS:

.tabs a
{
 color:yellow;
 font-weight: bolder;
 display:inline;
}