underlining

It's just an extra class in CSS. I'm not familiar with the code but I did do the project months ago, and it's probably adding a border-bottom to any list item with the class "on".

I do remember randy set that class using some PHP and a simple tag on each page to direct which list item received the extra class.

This takes advantage of CSS's cascading feature.

thanks. i'm trying to understand how just adding a '.on' to the 'li' tag is enough for the computer to know that the word 'on' has been added. it seems like the computer would think that any instance of 'on' would be what we were going after when actually, it is just a space and the word 'on.' I may be processing this wrong mentally.

The browser knows because of the CSS that is styled under the class of "on". The word "on" has no meaning other than we gave it meaning in the css.

Your HTML and your CSS work hand in hand together. CSS also has two neat things about it, that once you understand you can really use to your advantage.

One is the fact that CSS (cascading style sheet) cascades. What does that mean? CSS is read by the browser in a top to bottom fashion, meaning the styles at the bottom will override the styles at the top. An element can have more than one class, and if the styles conflict, the last style in the document will be the one rendered in the browser.

The other is specificity. Meaning I can zero in on my css, and actually give two different elements the same class of "ON" but they do not inherit the other's "on" styling because of specificity.

Here is a very simple codepen with some very simple to code to demonstrate what I'm talking about.

Does it help?

http://codepen.io/anon/pen/xbmyt

Whenever you see two words separated by a space inside of parenthesis as something like a class or id attribute, that tells the browser there are two classes two it, and both classes will be applied to that element.

In the case of

<div class="contact on"?</div>

That div will get the styles from both "contact" and "on" applied to it. Of course those rules must exist inside of the CSS document.

I could put many classes into a single div, which is often the case when using a framework. For instance I could have an element like

<div class="clearfix alpha grid-lg-9 grid-md-9 grid-sm-12 jumbotron">My div content </div>

And that element will have all of those classes from the CSS document applied to it. Now, this isn't always the most semantic way to do it, but it would work.

Does that answer your question? I'm not sure if I actually am or not.