At our April meeting, we started by looking at a page from CSS Tricks on the different options for setting type size in CSS. There are some nice visuals there to illustrate the different units of measure. For another article on fonts from a different perspective, check out Typeface Inspired by Comic Books Has Become a Font of Ill Will.
We then returned to looking at Internet Explorer 8, which will shortly be added to the Microsoft update system. We looked at the new update/bookmark utility called Web Slices. For information, see the Microsoft IE8 site and New Features To Slice, Store, And Accelerate Your Web Applications.
We then discussed compatibility with earlier browsers, a topic that is covered in How Do I Fix My Site Today?
Finally, we looked at more of the standards that Internet Explorer now complies with, including list style types, borders, generated content, and paged media attributes.
April 18, 2009
April 16, 2009
April Meeting Announcement
The next session of the PACS CSS Workshop will be held this Saturday, April 18, at our usual 9 - 10 hour.
We have been working this year on styling links and creating navigation menus with CSS. Last month, we took a side trip to look at the new Internet Explorer 8 and its claim of full support for current CSS standards.
We had a few leftover topics to look at regarding IE8, and this month, we will finish up with those and then head back to navigation. Along the way, I will give you a philosophical question to ponder as you back up your hard drives next week.
We have been working this year on styling links and creating navigation menus with CSS. Last month, we took a side trip to look at the new Internet Explorer 8 and its claim of full support for current CSS standards.
We had a few leftover topics to look at regarding IE8, and this month, we will finish up with those and then head back to navigation. Along the way, I will give you a philosophical question to ponder as you back up your hard drives next week.
March 22, 2009
March 2009 Meeting Report:
Online CSS Utilities; Internet Explorer 8
At our March meeting, we first looked at an online site for creating CSS declarations. The site lets you use drop down menus for various properties and then copy and paste into the head of a webpage. The site is CSS Mate. There are other sites out there that do the same thing -- just do a search.
We also looked at a couple of sites that create color palettes. One was Color Blender. You can also try Color Mixers. Again, there are other sites out there like these, just do a search.
We then looked at Internet Explorer 8 and its support for CSS properties that were not supported before or were not completely supported. Information is at Microsoft's IE8 page. There is a separate page on CSS Improvements in Internet Explorer 8.
We also looked at a couple of sites that create color palettes. One was Color Blender. You can also try Color Mixers. Again, there are other sites out there like these, just do a search.
We then looked at Internet Explorer 8 and its support for CSS properties that were not supported before or were not completely supported. Information is at Microsoft's IE8 page. There is a separate page on CSS Improvements in Internet Explorer 8.
March 19, 2009
March Meeting Announcement
The next session of the PACS CSS Workshop will be this Saturday at 9 - 10 am.
We will continue on the subject of styling menus, but I hope to take a slight detour as well. I just downloaded Internet Explorer 8, which was released today, and I hope to be able to show what might be new in IE8 as far as CSS support. For those interested, the download page is at http://www.microsoft.com/windows/internet-explorer/default.aspx. You will notice that versions 6 and 7 are available on that same page. Install them in a virtual machine, and you can test your sites like its 2001 all over again.
We will continue on the subject of styling menus, but I hope to take a slight detour as well. I just downloaded Internet Explorer 8, which was released today, and I hope to be able to show what might be new in IE8 as far as CSS support. For those interested, the download page is at http://www.microsoft.com/windows/internet-explorer/default.aspx. You will notice that versions 6 and 7 are available on that same page. Install them in a virtual machine, and you can test your sites like its 2001 all over again.
February 22, 2009
February 2009 Meeting Notes:
Extending Pseudo-Classes
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.
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 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.
Subscribe to:
Posts (Atom)