. refers to a class. <span class="one" /> could be selected with .one.
# refers to an ID. <span id="one" /> could be selected with #one.
You should be using classes when there could be more than one of a given element, and IDs when you know there will only be one. #navigation-bar would be using an ID because you will only have one navigation bar in your layout, but .navigation-link would be using a class name because you will have multiple navigation links. (It’d be better practice to use #navigation-bar a:link to get the navigation links, but you get my point.)