Question

I have made a navigation bar using <ul> and <li>

I would like to customize each tab with border, gradient etc.

Where should it be applied?

My CSS styling tend to affect only the letters, not anything else.

CSS

#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}

#nav ul {
padding: 12px 0px 12px 0px;
border-top: solid black 1px;
border-bottom: solid black 1px;
}

#nav ul li {
display: inline;
margin-left: 50px;
font-weight: bold;
    background-color: grey;
}

HTML

<div id="nav">
    <ul>    
        <li>Home</li>
        <li>Files</li>
        <li>Info</li>
        <li>About</li>
    </ul>
</div>

Answer 1

‘a’ tags inside of a styled tag (such as an ‘li’ tag) will not pick up any of the styles you set. They want their own styles. You will need to move all the ‘li’ styles to the ‘a’ tag and then put a display:block; on the ‘a’ tag.