January 2009 Meeting Notes: Pseudo-Classes

The January meeting was about using CSS to style links. We started with the HTML attributes for the body tag that allow you to set the colors of a link when it is unvisited, active, and visited. Of course, CSS gives you that and more, so we moved on to using CSS to style links.

First, we saw that the anchor tag can be styled the same way as any selector, but the result does not differentiate between states of the link. There is more flexibility in using pseudo-classes.

The pseudo-classes that apply to anchors let you style four states of links: unvisited, hover, active, and visited. (There are other pseudo-classes, but they do not come into play with the anchor tag.)

We noted that the preferred order of these pseudo-classes in a style sheet is link, visited, hover, active. "LoVe HA" will help you remember. Changing this order can result in one declaration being overridden by another declaration, rendering some of your styles ineffective.

January Meeting Announcement

The next session of the PACS CSS Workshop will be Saturday, January 17, at our usual 9 - 10 hour.

We will continue our review of styling the anchor tag, so as to create interesting navigation menus with CSS. We talked about the HTML of links last month. This month, we will get into adding style to those links and discuss the concept of the pseudo-class.

Along the way we will also consider LoVe, HA! Seriously.

December 2008 Meeting Notes: The Anchor Tag

At the December meeting, we went through the basics of the HTML anchor tag. We talked about some of the attributes of the tag, like title and target. We spent some time discussing how to style the title of an anchor, using an example from the Code: qTip website. We also discussed linking to named anchors within a page and to named anchors within another page.

As an example of how creative one can be in creating navigation menus with CSS, we looked at two examples from Stu Nicholls' site, A Circular Menu and A Circular Menu with Sub Menus.