At our February meeting, we took pseudo-class selectors to a new level by employing combined declarations and by using classes.
A combined selector looks like this -- a:hover:visited. It would define the hover style of a link after it has been visited.
So in the below example, the link hover will be overlined when not visited, but underlined after being visited:
a:hover {color:red; text-decoration: overline;}
a:hover:visited {color:red; text-decoration: underline;}
Adding a class to a pseudo-class selector will let you apply the styling to specific links, and that will be useful for defining the style of navigation links. The syntax is familiar:
a:link.nav {color:green;} -- the style declaration
<a href="PACS_Home.htm" class="nav"> PACS HOME</a> -- the link that will now have the text color green
We ended by looking at two proposed tags, <nl> and <nav>, which, if either is adopted, will make it easier to define and style navigation links.
February 22, 2009
February 16, 2009
February Meeting Announcement
The next meeting of the PACS CSS Workshop will be this Saturday, February 21, at the usual 9 - 10 hour.
We will continue on the subject of styling links, with the goal of developing interesting navigation menus. We worked last month with the pseudo-classes that can be used with the anchor tag, emphasizing the correct order to be used in order for the links to be styled properly.
This month, we will finish off some loose ends relating to that discussion and then get into compound declarations that can give you more power to style links in different ways on the same page.
Along the way, I will show you a couple of HTML tags that I can almost guarantee you have never heard of.
We will continue on the subject of styling links, with the goal of developing interesting navigation menus. We worked last month with the pseudo-classes that can be used with the anchor tag, emphasizing the correct order to be used in order for the links to be styled properly.
This month, we will finish off some loose ends relating to that discussion and then get into compound declarations that can give you more power to style links in different ways on the same page.
Along the way, I will show you a couple of HTML tags that I can almost guarantee you have never heard of.
January 18, 2009
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.
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 15, 2009
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.
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.
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.
December 14, 2008
December Meeting Announcement
The next session of the PACS CSS Workshop will be Saturday, December 20, at our usual 9 - 10 hour.
My thanks to Reed Gustow for handling last month's meeting. This month we will jump back to the topic that we started in October, using CSS to create navigation menus. In October, we talked a little bit about philosophies of navigation and interfaces in general. On that topic, members might be interested in a book from O'Reilly, Designing Web Navigation, by James Kalbach, http://oreilly.com/catalog/9780596528102/index.html.
We will continue looking at the HTML behind links and then move on to the CSS that can be applied to the anchor tag. We will be on this topic in future sessions as well.
And just in time for the holidays, we have a book from O'Reilly that we will raffle: CSS: The Missing Manual, http://oreilly.com/catalog/9780596526870/index.html.
Check the PACS website for details on the rest of what will be a very full day at PACS.
My thanks to Reed Gustow for handling last month's meeting. This month we will jump back to the topic that we started in October, using CSS to create navigation menus. In October, we talked a little bit about philosophies of navigation and interfaces in general. On that topic, members might be interested in a book from O'Reilly, Designing Web Navigation, by James Kalbach, http://oreilly.com/catalog/9780596528102/index.html.
We will continue looking at the HTML behind links and then move on to the CSS that can be applied to the anchor tag. We will be on this topic in future sessions as well.
And just in time for the holidays, we have a book from O'Reilly that we will raffle: CSS: The Missing Manual, http://oreilly.com/catalog/9780596526870/index.html.
Check the PACS website for details on the rest of what will be a very full day at PACS.
November 22, 2008
November 2008 Meeting Notes:
Multi-Column Layouts
The November meeting was organized and conducted by Reed Gustow. The topic was multi-column layouts with CSS. The techniques can get tricky, particularly if you want the columns to be of equal height.
Reed demonstrated some techniques found on A List Apart, a fantastic resource for web designers.
Reed provided his notes and samples, and they can be downloaded by clicking here and saving this file, and then extracting the examples.
Reed demonstrated some techniques found on A List Apart, a fantastic resource for web designers.
Reed provided his notes and samples, and they can be downloaded by clicking here and saving this file, and then extracting the examples.
November 19, 2008
CSS Book Giveaway from Sitepoint
For a limited time, Sitepoint is giving away for download a free copy of The Art & Science of CSS. We have used this book to organize a few meetings over the past couple of years. It is an intermediate level work that covers specific aspects of a web page and shows how to style each in different ways.
Sitepoint actually calls this a Twitaway, i.e., a Twitter giveaway, but it is not necessary to use Twitter to take advantage of the promotion. Full instructions and more information are at this page of the Sitepoint website.
Sitepoint actually calls this a Twitaway, i.e., a Twitter giveaway, but it is not necessary to use Twitter to take advantage of the promotion. Full instructions and more information are at this page of the Sitepoint website.
November 13, 2008
November Meeting Announcement
The next meeting of the PACS CSS Workshop will be this Saturday, November 15, at 9 - 10 am. I will be out of town, and Reed Gustow has graciously volunteered to cover this month's session.
Reed will cover multi-column layouts, emphasizing some good techniques for making equal-height columns, something that can be very tricky. It is an important topic for developing professional looking webpages that are easy to maintain, so don't miss it.
Reed will cover multi-column layouts, emphasizing some good techniques for making equal-height columns, something that can be very tricky. It is an important topic for developing professional looking webpages that are easy to maintain, so don't miss it.
September Meeting Notes
Reed Gustow, who was good enough to cover the September meeting of the CSS Workshop, sent me the examples he used for that meeting. The topic for September was advanced layout techniques, and Reed demonstrated a 3-column page format using CSS. I have uploaded a zipped folder of the examples for those who want to review their notes. Click and save this file, and extract it to retrieve the files.
Subscribe to:
Posts (Atom)