Having trouble referencing elements in my styling sheet

Question

I'm trying to style my unordered list, but I can't seem to reference the items in my CSS. I've tried referencing the class name, and referencing the element by doing ul li i, using #divname, etc. Right now I'm simply styling the list directly in the HTML page, but it looks horrible.

I can't seem to reference theses html elements in my CSS - how can I properly reference these elements in my CSS? more importantly I'd like to understand how to know what to write down in my styling sheets so I can understand the concept.

Here's my html:

 <div class="navbar-container"> <ul class="navbar-items" style="display: block; margin-left: auto; margin-right: 57%; margin-top: 11px;"> <li class="nav-item"> <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Home" asp-action="Index">Home</a> </li> <li class="nav-item"> <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </li> <li class="nav-item"> <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Course" asp-action="Index">Courses</a> </li> <li class="nav-item"> <a class="nav-link text-dark" style="text-decoration:none; color: #333333;" asp-area="" asp-controller="Professor" asp-action="Index">Professors</a> </li> </ul> </div>

Answer 1

Do you have an example of your CSS code? Link it with the following in the head section of the html;

<link rel="stylesheet" href="#">

You can select them with the following;

.navbar-container {} 
ul {}
.navbar-items {} 
.nav-items {}
li {}
.nav-link {}
.text-dark {}

Then the following;

.nav-item {
  color: blue;
}

.nav-item:hover {
  color: red;
}