As I continue my studying of web design, CSS, etc, I found a moment this morning that taught me something about the order of operations in CSS and applying design to HTML documents.
I was going through a lesson, building a navigation bar, in which the home screen is blue. What this means of course is that the design for that un-ordered list item must conform to something different than the other items in the list.
I jumped ahead and thought, “ooh, ooh, this makes sense. I can do this.”
So, I went right on and added a <span> tag for the text content that would become the items in the navigation bar. All is fine, correct?
Nope!
I added the <span> tag with a class = “navbutton” to separate it from the class = “navhome,” but I did it at a different level of the element. Note above that where the class = “navhome,” is added, it is added within the <a> tag (which is here we put information for links/URLS/etc). But for the other items in the list, the class = “navbutton” is added within the <span> tag. Now, this is just a learning exercise, and I thought I understood what was going on, but I had jumped too fast. The reason I can make this observation is that when I made decisions to apply some CSS to classes that are associated with <a> tags, and in this case, hovering, that style failed because I had not applied the same level of class to the same tags.
I think this is what I did wrong here because the tags are themselves nested within other tags, and the order of operations for applying style applies to what is most external in the nesting – and whatever is inside that nesting, inherits what is ‘above’ it hierarchically.
My current navigation bar for this exercise looks like this:
Just a simple thing, but educational none-the-less. One can see from the HTML at the top of the post that this is just can exercise (noted by the href = “#” – meaning, that more than one page does not actually link to another one). I still found this lesson informative. I am learning, and look forward to continue to do so.
PHANTOM LANDSCAPES 