New Typefaces

Following on our meetings about using Google Fonts, I have changed the typefaces on the workshop blog. The top-level heading (h1) now uses the font called JustMeAgainDownHere. Second level headings (h2) use JustAnotherHand. More information on these are at the Google Font Directory.

December 2010 Meeting Report: Browser Resets

At the December meeting, we started on the topic of browser resets. We watched two videos from Sitepoint that are part of an online course called Practical CSS. The videos are Practical CSS - lesson01: CSS resets and Practical CSS - lesson01: Exercise part 1. The specific reset file used in the videos is available at A Comprehensive Guide to CSS Resets. Scroll down to the heading Simple Reset. Russ Weakley, the creator of that reset, is the person who did the videos.

We will continue on this topic next month.

December 2010 Meeting Announcement

Following our theme this year of website makeovers, we finished with the @font attribute in November. This month, we will look at what are known as "browser resets," a topic that we did not get to last month.

Many times, the first step in starting or revising a site is to replace the default styles that browsers use and load some basic style declarations to give you a blank slate to work with. We will show some videos on resets and look at some examples, and then consider whether resets are a good idea.

For a little background on this topic, check these articles from Six Revisions that just happened to come out this month.

• A Comprehensive Guide to CSS Resets
• The History of CSS Resets

November 2010 Meeting Report: Font Makeover

At our November meeting, we updated the headings of this workshop's website by using Google Fonts. This new technology combines cloud computing with the @font-face attribute to let us use fonts that are not available on most computers. The top level heading on the site (H1) now renders with Reenie Beanie, and secondary headings (H2) render with Philosopher. The H1 font deploys properly across browsers, but H2 does not render properly on the iPad. Google's documentation states, "The Google Font API is not currently supported on iPhone, iPad, iPod, or Android."

For more on Google Fonts, check the Google Font Directory, and follow developments at the Google Web Font Blog.

In line with our theme this year of website makeovers, we also looked at Giving Your Older Web Designs a Refresh, an article with suggestions on what to look for when giving your site a new design.

November 2010 Meeting Announcement

This month, we will finish up briefly with Google Fonts. In line with this year's theme of makeovers, we will use Google Fonts to change the headings on the workshop's website.

We will then move on to CSS resets. We have touched on this topic before, in both the workshop and at Web Design, but we have not looked closely at what goes into a reset. This month, I will use a video and some actual examples to show how a reset might be the first place to start if you are doing a website makeover.

If time permits, we can also look at some new sources of CSS information on the web.

And as usual, there is a full lineup of meetings this month, starting at 8 am with the Social Media SIG. Be sure to check the first project of that SIG, the new PACS Facebook page.

October 2010 Meeting Report: Google Fonts

At our October meeting, we finished up on the @fonts selector by doing a live demonstration of how to incorporate a font into your page and then serve the font to your reader. We highlighted Font Squirrel, a site that is a source for fonts in multiple formats plus the style sheets to load the fonts into your pages.

We then looked at Google Fonts, a new technique for serving up fonts. Google Labs has an introduction to this technology at Google Font API. Another good introduction is A Guide to Google Font API at Six Revisions. To see the fonts available, go to the Google Font Directory.

October 2010 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, October 16, at our usual 9-10 am hour.

Following our theme this year of website makeovers, we will continue on the topic of fonts. Last month we looked at the @font selector, a CSS way to supply fonts to a user's browser. This month, we will finish up with @font, including a look at some sites for downloadable fonts. We will then move on to a new technology from Google for downloading fonts to a user's browser.

Depending on time, we will also check out some new websites that have useful information or tutorials relating to CSS.

September 2010 Meeting Report: The @font Tag

At the first meeting of this season, we looked at techniques for avoiding the limitations of web-safe fonts. Generally, we can't use a particular font on a webpage unless we have confidence that users have the font on their computers.

We reviewed some font replacement techniques that have their own limitations. We then looked at the @font tag, which allows the web developer to upload fonts to the server to be downloaded by the user with the page itself. The obvious limitation is that one has to have the rights to use a font in that manner, and the tag can be tricky to use across browsers.

Some sites about @font that might be of interest are:

• CSS 3 Font Face | Zen Elements
• @font-face - MDC
• How to use CSS @font-face

We also looked at a site suggested by Don Arrowsmith for checking on browser compatibility for new web technologies like CSS3 and HTML5: When can I use....

September 2010 Meeting Announcement

Last year we had a running theme throughout the year -- styling navigation menus. This year, with CSS3 and HTML5 becoming increasingly important and even mainstream, our theme for much of the year will be makeovers – how to take advantage of the new technologies to bring our sites up to date and even push the envelope.

We will start this month with fonts. Adding style to text has bedeviled webmasters since the early days of browsers. We will look at some new ways to define fonts for more variety without using graphics.

Depending on time, we will also look at some new online resources for learning more about CSS.

June 2010 Meeting Report: Advanced Menu Styling

At our June meeting, we put together the elements of menu styling that we have been working on all year and looked at how to create an advanced, graphic-rich menu. We followed the tutorial at Web Designer Wall and stepped through that style sheet to show how the CSS elements worked together.

For some more advanced navigation menus, check Website Navigation Menu Toolbox at DesignM.ag.

PACS is off for the summer. The next meeting is September 25.

June 2010 Meeting Announcemenrt

The next meeting of the PACS CSS Workshop will be this Saturday, June 19, at our usual 9 – 10 am time slot. The June meeting is the last for this season.

During the year, we have been looking at the bulding blocks of navigation menus. This month we will put the blocks together to create an imaginative and creative menu using CSS.

May 2010 Meeting Report: More CSS3 and Sprites

At the May meeting, we again looked at some sites about CSS3 that we had briefly reviewed in April. This time, we were able to spend a little more time with them. Links are below:

• Opera Logo with CSS
• CSS3 Generator

We then discussed font properties in CSS and how to use the font shortcut properly.

We ended with a look at a simple CSS sprite. For more on sprites, and to see some great examples, take a look at The Mystery Of CSS Sprites.

May 2010 Meeting Announcement

The next session of the PACS CSS Workshop will be this Saturday, May 15, at the 9 - 10 hour.

This month we will follow up on some items from the April meeting, including navigation, a subject we have been tracking all year. We also have some topics that were suggested by members, and we will try to hit some more CSS3.

Google Search Result Rankings Include Page Speed

Don Arrowsmith was good enough to pass along an article called Google Search Result Rankings Include Page Speed. The article indicates that Google has made this policy official.

We discussed that possibility at our April meeting. It might be a good idea to start checking how our pages load -- check the April notes for an online utility that does just that.

April 2010 Meeting Report: Fixed Position and CSS3

At our April meeting, we looked at websites relating to some of the topics we have been covering recently, and then we followed up on items from last month's meeting.

We started with a site called Pagetest that lets you measure the download speed of a webpage. The site give feedback on where a page slows down when it is loading. This information might be relevant to a page's Google ranking, see this article at GigaOM.

Next, we touched on the CSS properties of :focus and outline by looking at an article entitled Whenever you use :hover, also use :focus.

We then discussed CSS3, using these sites as demonstrations:

• Amazing CSS3 Techniques You Can’t live Without
• CSS3 Generator
• Opera Logo with CSS

Finally, we did some more work with the position:fixed property, a topic we had started in March.

April 2010 Meeting Announcement

The PACS CSS Workshop meets this Saturday, April 17, from 8 to 9 am in the Alps Room of the Giant Supermarket at 315 York Road, Willow Grove, PA.

We have a number of follow up items to topics we discussed last week, including navigation, styling links, and CSS3, plus a new way to test your page's performance.

In addition to the usual lineup of sessions, this meeting also features the debut of Susan Dykas' new Social Media SIG at 8am! So come early, grab one of those giant Giant coffees, and catch up on all the new developments on the web.

March 2010 Meeting Report: Background Images and CSS3

At the March meeting, we followed up on our topic from February, showing how to clickable image using CSS and not putting the image into the HTML. We then took a second image and used it as the hover background image.

We spent the second half of the meeting looking at some of the new features that will be part of CSS3. The sites we looked at are listed here:

• Basic CSS3 Techniques That You Should Know


• CSS3 Techniques You Should Know


• Dabbling in CSS3: Drop Shadow

Also take a look at this site: CSS3 Generator

March 2010 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, March 20, at the usual 9 - 10 am hour.

We have two things I hope to cover this month. One is to look at background images using the example from last month and expanding on it, including using different images for link and rollover. That last topic will lead toward a discussion of the CSS sprite.

But we might not get to sprites because I also want to look at some examples of CSS3 properties because browsers are starting to incorporate CSS 3, even though it is not yet adopted as a standard.

February 2010 Meeting Report: Clickable Background Images

At recent meetings, we have looked at styling links and positioning elements with CSS. This month, we took those styles and added background images to create a clickable image that was entirely styled with CSS.

The technique was based on the article Clickable Background Images Via CSS. We started by reviewing the HTML technique for making an image clickable, and we talked about the deficiencies of that approach. Then, we showed how CSS background, position, display, height, and width could be brought together to achieve the same result while keeping all presentational elements in the style sheet.

February 2010 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, February 20, at the usual 9 - 10 am hour.

We have been working on navigation menus, starting with styling links, and then going to positioning. This month, we will tie up some loose ends from last month. Then we will put the elements together to make a link with a graphic background, using as an example something I recently did for a site.

Finally, if we have time, we will look at some interesting new properties that are coming with CSS3.

January 2010 Meeting Report: Using Position for Page Layout

We started out January meeting with a look at some statistics from some local government webmasters showing the browsers used to access their sites. Over the last year, generally Firefox has increased in use, IE6 is still a major player, and Chrome has made progress.

We then looked at an article on The Case Against Vertical Navigation from Smashing Magazine. The article was nicely related to the topic that we are covering in this year's meetings.

We then moved on to the tutorial on positioning that we have been working on, Learn CSS Positioning in Ten Steps. We finished that tutorial, and next month will move on to positioning background images.

January 2010 Meeting Announcement

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

At our November meeting, before the snows, we looked at absolute and relative positioning, and then put them together to see how they worked with each other. At this month's session, we will finish the positioning tutorial that we have been working on, and then move to another tutorial on graphics and links. The goal is to show how to create a navigation menu that is a cut above the usual horizontal or vertical list.

I will also have some interesting statistics from a few government websites about browser usage.