Differing CSS tag properties

Question

I'm working on a webpage currently whilst going through the Odin Course and have created a navigation bar at the top of my page using html lists, however I would still like to be able to use list's normally throughout the page.

Is there a way to call a set of CSS properties only within a set area, like how div tags work for class calling in HTML?

Heres the HTML and CSS in jsfiddle or below.

HTML:

<ul>
    <li><a class="active" href="#home">Home</a>
</li>
    <li><a href="#music">Music</a></li>
    <li><a href="#writing">Writing</a></li>
    <li style="float:right"><a href="#about">About</a></li>
</ul>

<div class="mainBody">
    <h1>aeaeae</h1>

    <p>A collection of work by.</p>
</div>

<ul>
    <li><a href="#2016">2016</a></li>
</ul>

CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #bf5f5b;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #c46561;
}

I apologise if this is a simple question, but i searched around and couldn't find and answer.

Answer 1

You can add an id attribute to your navigation bar <ul> tag, then put the id before each li class in your CSS to only select those tags.

Eg.

<ul id="navbar">
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#music">Music</a></li>
    <li><a href="#writing">Writing</a></li>
    <li style="float:right"><a href="#about">About</a></li>
</ul>

ul#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #bf5f5b;
}

ul#navbar li {
    float: left;
}

ul#navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul#navbar li a:hover {
    background-color: #c46561;
}

The ul#navbar selector will only select a <ul> tag that has an id attribute of "navbar".

The ul#navbar li selector will only select a <li> tag that is a child of a <ul> tag that has an id attribute of "navbar".

See here for more information on CSS selectors: https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors