December 22, 2005

Calling All CSS Designers - Free Copy of TopStyle

If you think your CSS talents are sufficiently evolved, you might consider entering this styling contest described at Calling All CSS Designers - Free Copy of TopStyle. The project is kind of like Zen Garden. The site gives you the template, and you add the CSS. The prize is a copy of Nick Bradbury's excellent CSS editor.

December 18, 2005

December 2005 Meeting Notes: Pseudo Classes

At our December meeting, we finished the topic of pseudo selectors: pseudo classes and pseudo elements. I have posted the outline that we followed for a quick reference. If you download the sample page that I uploaded with the November meeting notes, you can play with these selectors.

It is important to check your work across browsers. As we saw this month, support is particularly disappointing in Internet Explorer.

December 13, 2005

Good article on web fonts

SitePoint just published a nice article on The Anatomy of Web Fonts. There is a lot of background on the theory of fonts on web pages, and the emphasis is on using CSS effectively.

December 11, 2005

December 17 Meeting Announcement

Our next meeting will be this Saturday, December 17, at our usual time and place.

This month we will continue, and hopefully finish, with pseudo classes and elements. Our focus will be on styling links.

Our next topic will be lists. The most common way to create menus with CSS is to put the links in a list and then style the list. In the process of discussing lists, we will cover descendant selectors, another way to improve the efficiency of your style sheets.

If you have the Meyer book, read the relevant chapters, but be aware that some of the subjects he covers are not well supported by browsers and some are somewhat advanced in that they relate more to XML documents that to HTML documents. We will sort it all out Saturday.

November 26, 2005

Trenton Moss: My Top Ten CSS Tricks

Sitepoint published a nice article a couple of months back called My Top Ten CSS Tricks. The article is part of their CSS Tutorials series. This list is a tips and tricks kind of article, and you might find an idea here that helps with something you are trying to do.

November 21, 2005

November 2005 Meeting Notes:
Pseudo Elements

At our November meeting, we finished up styling fonts by covering font-style, font-variant, and font-weight, plus the font shortcut.

We then began on pseudo elements and experimented with some variations of :first-line and :first-letter. I have uploaded the sample file we were using to experiment with pseudo elements, in case you want to check the source and play with some options yourself.

Next month, on December 17, we will continue on the pseudo's with emphasis on styling links.

My plan after that is to move to styling lists. I think that topic is a logical next step after links since the most common way to create menus with CSS is to put the links in a list and then style the list.

November 12, 2005

November 19 Meeting Announcement

The next meeting of the CSS Workshop will be this coming Saturday, November 19, at our usual 9-10 time.

This month we will finish with styling fonts. There are a couple of quick properties to cover, then we will conclude with a shortcut that makes it all easier.

Our next topic, and I hope to get to it, will be those oddly named pseudo things: pseudo classes and pseudo elements. Names aside, these elements let you do some interesting things, especially when it comes to styling links. We'll see if we can come up with some ways to style your menus with some simple CSS techniques.

See you Saturday.

October 15, 2005

October Meeting Notes: Font Styles

At our October session, we continued reviewing the different properties that are available in CSS for styling fonts. We finished with font-family by working with the values "normal" and "inherit." We then went on to font-size and spent some time testing the different CSS values for sizing fonts. A nice review of the optons is at this website on font-size.

In November, we will finish with font styling and move on to another topc to be determined.

October 08, 2005

October 15 Meeting Announcement

The next meeting of the CSS Workshop will take place this Saturday, October 15, at 9 am. We will continue on the topic of fonts, and we should be able to finish at this session. As we work on fonts, we will also look at two values that we have not discussed yet, "inherit" and "normal". They show up in many properties, and using them can make your CSS more efficient.

See you Saturday.

September 24, 2005

September Meeting Notes: Inline Boxes

We started our second year of the PACS CSS Workshop in September. The first item was a quick demo of Netscape 8, a browser that was relased this past summer. What is interesting for our purposes is that with a push of a button, the browser will show a page using either the Firefox rendering engine or the Internet Explorer engine. Given the need to check how things look in different browsers, this feature is a real convenience.

I used Netscape 8 to show a problem that I encountered recently with IE. I wanted a page to be a specific width, and I used the width property on the body tag. It worked in Firefox but not in IE. I had to enclose all my content in a div with the specified width, and IE accepted that rule. Just a simple example of how you always have to check!

We quickly reviewed last year's topics and the basic format of a CSS rule. We then continued on the topic of styling boxes by reviewing what we covered in June about block elements and then moving to inline elements.

We used the sample page that is posted here to show that the properties can be styled on inline boxes, but some of the results differ from block elements. We made the point that the line height is not increased by enlarging the top or bottom box styles, and we noted that to prevent overlap, you should change the line-height of the line of an ancestor element, like body.

We then started on fonts by pointing out that CSS does not download fonts, so whatever is on the user's system is what the browser can utilize. As with HTML, it is important to define alternative font faces and to include a generic face. CSS does give users more options in working with fonts. We started demonstrating these options with this sample file, and we will continue on this topic in October.

I encourage you to download the sample files, open them in an editor, and play with the different selectors. I have some notes in there to guide you.

September 20, 2005

Opera is now free and without banners

Many of us have used the Opera browser because of its innovations and its adherence to standards. If you have avoided Opera because you did not want to pay a registration fee to remove its banner ads, your wait is over. Opera has just released version 8.50 of its browser, and it is now free of banner ads. At Opera.com you can get more information on this browser and download it for your own use.

I find Opera to be a good test platform to see if my code complies with W3C standards. And you might find that Opera is fast and convenient enough to make it your regular browser.

September 14, 2005

September 17 Meeting Announcement

The next meeting of the PCS CSS Workshop will be held Saturday, September 17th, at the same time and place as last year, 9-10 am in Room 713.

This month, I want to start by going over a couple of items that I posted on the website over the Summer and then quickly review the subjects we covered last year. I then want to continue with styling boxes. We were in the middle of that subject when we ended in June. I want to cover inline boxes so that we get a complete overview of the subject.

After that, we will move on to fonts, and I am thinking that we should be able to finish that topic at this meeting.

The PACS schedule this year is the most exciting ever for members interested in web design. Right after our workshop, at 10-11, Mike Ehling will conduct the Macromedia Flash Workshop, something we have wanted to do for a long time. Then at 11-12, Frank Stepanski will be running the JavaScript Workshop, another great addition to our lineup. To top off the day, the Web Design SIG at 1-2 starts the year featuring Nick Robalik, founder and President of Digital.Soapbox, speaking on avoiding design errors.

See you Saturday.

September 12, 2005

BW 50: Carefully Clearing Yahoo's Clutter

Check this article from Business Week called BW 50: Carefully Clearing Yahoo's Clutter. It is an interesting look at web design and useability issues. Be sure to check the interactive graphic that has comments on specific aspects of Yahoo's site.

September 09, 2005

An Event Apart in Philadelphia

Two of the leading thinkers in web design, Eric Meyer and Jeffrey Zeldman, will be in Philadelphia in December for what they call An Event Apart. You might recognize the play on A List Apart, one of the leading sites for cutting edge web design concepts.

This event might be priced out of the range of a lot of us, but if anyone wants a view of the cutting edge, these people will give it to you.

August 16, 2005

SiteProNews: The 10 Best Resources for CSS

This article at Site Pro News on The 10 Best Resources for CSS is a nice list of quality websites for CSS information. The listing is well annotated, so you can get an idea of which sites might be most useful to you. But note also the comments on how to develop CSS skills. The author lays out a practical game plan for learning.

July 04, 2005

Review of The Zen of CSS Design

Reed just posted my review of a new book, The Zen of CSS Design, at the PACS Web Design Book Reviews page. Many of you might remember that we have looked at the css Zen Garden website in the course of our workshop, and a link to it is on our Resources page. This book compiles some relatively advanced lessons to be learned from the designs submitted to the site.

Not every reviewer that I read on the Amazon site was as enthusiastic, but most gave the book 4 or 5 stars. I hope that we can work in some of this material next year when we get into images and positioning. It is not a beginner's book, but we won't be beginners for long.

June 12, 2005

June Meeting Notes: Styling Boxes

At our June meeting, we went continued our discussion on the box model by looking at ways to style boxes. At our May meeting, we had talked about height and width. We reviewed that topic and then went through borders, margins, and padding.

I used a couple of sample pages to illustrate the options, and I have uploaded them here with comments in the source. The first page is a sample of the values for the border property. Download this file and play with the source. You will see comments that will help you. Open the file in different browsers to see how they render borders.

The second page is an illustration of using margins or padding. The set off paragaphs look the same until you go to the source and add background color to the content.

At our next meeting, we will finish on this topic by running through the styling of inline elements.

June 04, 2005

June 11 Meeting Announcement

The June PACS meeting will be the second Saturday of the month, the 11th, instead of the third Saturday. This change is due to the school's schedule. The CSS Workshop will meet at the usual 9-10 hour.

This month we will work on styling boxes using the border, padding, and margin properties. As this session will be the last for the year, I hope to hit all those topics, so please be on time.

The Web Design SIG will be meeting once during the summer. If you have any questions after the June meeting, we may have a chance to do some CSS Q&A at that summer session.

We are working on plans for next year, and you can expect some announcements this Saturday. I will keep the CSS Workshop going next year if there is interest, so let me know what you think.

May 30, 2005

The Early Bird Catches the CSS:
Planning Structural HTML

I came across another interesting article called Wise-Women: Tutorial: The Early Bird Catches the CSS: Planning Structural HTML. The writer is a teacher and web designer. She describes another take on the process of moving from HTML-only design to HTML as the foundation for a CSS-styled web page. But the process described is also generally applicable to tagging a page so that it is ready to be styled.

May 26, 2005

May Notes: The Box Model

At the May meeting, we reviewed the parent-child structure of an HTML document and then continued into a discussion of the box model. I used this sample document to begin illustrating the different properties and values that can be applied to the box created by a block element.
We will continue showing how to style a box at the next meeting. The subject of positioning boxes on a web page is one that we will hold until later in our workshop.

May 25, 2005

How to Convert Your Site to CSS

I recently ran across this article in Macromedia - Edge : May 20, 2005 describing a process for converting a website to CSS. The original article is in Flash, but this link is to the printable version.

The process can be tedious, and as you can tell from the article, not even Macromedia has a push-button solution. But the results are worth the effort, and this article lays out a nice road map to getting there.

May 15, 2005

May 21 Meeting Announcement

The next session of the PACS CSS Workshop will on May 21 at our usual 9-10 hour.

This month we will finish up with the parent-child concept--we should be able to do that pretty quickly. We will then get into the box model. This topic is important not just for learning new ways of styling the look of your page, but also as the basis for positioning elements on your page. We will get into positioning later, but this month we lay the foundation for learning some powerful formatting options.

See you on the 21st.

May 11, 2005

A Design Timeline

I am going to show this site MBoffin.com - Designline - A Design Timeline at the next meeting, but it is so interesting, I thought I should blog it. The writer is contemplating what the process is to create a web page. He shows step by step how he did it. Click on the animated gif to see his progress from HTML to CSS.

I don't know if everyone would agree with his approach, but it is what I have been stressing in the workshop--it all starts with clean HTML, and the CSS gets added on top. Look at how many different looks he can create with the same basic HTML.

May 04, 2005

Five Questions with CSS Author Dave Shea

CSS Zen Garden is one of the sites that I list on the Resources page. The director has written a book about CSS using that site as an example. There is an interview at the Peachpit Press site called Five Questions with CSS Author Dave Shea that members might find interesting.

April 22, 2005

Bookmarklets - Design tools

Things have a funny way of coming together in a user group. At our last meeting, there was a question about converting RGB values to hexadecimal numbers (or it might have been the other way around). I said that a search online would probably show some kind of converter, but I was not aware of one off-hand.

We also talked briefly about bookmarklets, and I demonstrated one that shows the structure of an HTML document. Member Ken T. mentioned his experience with these little javascripts, and a couple of days later, he was good enough to send me some links to sites about bookmarklets.

Here's where it comes together: This particular page about Bookmarklets - Design tools has some web design bookmarklets, and one of them is a converter for RGB values to Hex and vice versa. Try it out--it's a nice tool to have.

April 17, 2005

April Notes: Colors and Parent-Child

At our April 16 session, we finished up the topic of color, at least for now. We covered the properties of { color: } (which sets the foreground color of an element, which, in a web page, is the text color) and { background-color: }. There are other color properties in CSS, and we will get to them in the future.

We then began to consider the topic of Parent-Child, which gets us into the concept of inheritence. I pointed out a nice tool that shows you the structure of an HTML document: View Page Structure - CSS. This Javascript bookmarklet is not only instructive, but it also is a convenient way to check your page structure to see why your styles might not be working correctly.

Along the way, we were side-tracked a little by the evident misuse of the SPAN tag in some browsers. We will have more to say on that topic next month.

Next month's meeting is on May 21. We should finish up with Parent-Child, then get into the Box Model. Things will start to get real interesting then.

Jemima's Chevron

We looked at this site at the April meeting as a creative example of using CSS: Jemima's Chevron. This site is where I picked up one of the color wheels that we are using. This page is a nice example of where we want to go with CSS. Not only is it very stylish, but the underlying page itself is written in basic and clean HTML. Check the source to see what I mean. If you look at it in Firefox, you can turn off the style sheet and see what the underlying HTML looks like unstyled. [View/PageStyle/No Style]

If you are using Internet Explorer, you can save the page to your Desktop [File/Save as], then open the HTML file in any editor, delete the reference to the style sheet, save the file, and open it in a browser. You will see the page unstyled.

April 13, 2005

April 16 Meeting Announcement

Our next session will be on Saturday, April 16, at our usual time, 9-10 am.

We will finish the topic we left with last month, color. I will quickly go through some examples of defining colors in CSS. We will then move on to the topic of parent-child so that we can understand the concept of inheritence. I will use a cool app that lets you see the structure of a web page in a graphical manner. It is a great way to understand the structure of a page and also to diagnose occasional problems with your CSS.

After that, I want to get into the box model, but I expect that we will not get there until May.

See you Saturday.

April 03, 2005

March notes: Class and ID Selectors and Colors

At our March meeting, we finished up on the topic of class selectors. We discussed how class selectors can be combined but noted that Internet Explorer does not properly render pages with compound class selectors. I used this sample page to show the problem. Open it in IE and in a more standards-compliant browser like Firefox to see the difference. If you save the page, you can play with the source to understand the problem better. I have notes there.

We briefly touched on the ID selector and discussed appropriate uses for it. We will be getting back to ID's when we get to style precedents.

We then moved on to color and began with a review of the basics of color in HTML. CSS does not give us more colors to work with. It does provide more options for defining colors, though, making it easier to match colors, such as by RGB numbers or percentages. In the Resources page of this site, I have added a number of locations for color information.

At our next meeting, we will finish with color and move on to the parent-child concept.

April 02, 2005

7 Compelling Reasons to Start Using CSS

This article at SiteProNews is one designer's take on why he started using CSS. Not much really new, but it is an interesting perspective from a practical viewpoint. SiteProNews is a free newsletter and webmaster resource site--if I recall correctly, member Barb S. told me about it.

March 18, 2005

CSS Support in IE 7

Microsoft is working on version 7 of Internet Explorer, and beta testing will be starting this summer. Unfortunately, it looks as though CSS support is not one of the priorities: CSS Support Could Be Internet Explorer's Weakest Link.

March 12, 2005

HTML Paths

The subject came up at our meeting today about using paths on a website. Check out these sites. They have nice explanations of how paths work among web pages. Get to understand these concepts because when we start using external style sheets, it will be important to link to your stylesheets correctly.

March 05, 2005

March 12 Meeting Announcement

The March meeting of PACS will be held next Saturday, March 12, which is a week earlier than usual due to the school's vacation schedule. The CSS Workshop will be conducted as always in Room 713 at 9-10.

This month I will finish with the class selector--there are a couple of points to make--and then we will talk about color for a bit. That topic should be pretty quickly handled, but since our subject is style, it's time we get some color into what we are doing. After that, I want to start on inheritance and the box model, in which order, I'm not sure yet. These topics are a little conceptual, but they are all-important to understanding how your styles work. You will go away with practical applications, don't worry. We will then be in a position to move to some interesting uses of CSS, including styling links.

Our extra credit session will start at 8:45--promise. We will talk briefly about the ID selector. If you know how to use the class selector, there is not much more to the ID selector when it comes to basic web pages, so we can cover this subject pretty quickly.

February 22, 2005

New Resources Page

I have added a Resources Page to the site with a permanent link in the right sidebar.

February 20, 2005

February notes: Examples of Using Classes

At our February meeting, we covered the Class selector. We will finish up in March. Your homework is to review this sample page of different combinations of classes. Save the file to your own computer, then play with different combinations to see how they work.

Unfortunately, Internet Explorer (Win and Mac) is not entirely standards compliant when it comes to classes. I will cover that issue in March. For now, I suggest trying this sample page in a browser like Firefox or Opera.

February 12, 2005

February 19 Meeting Announcement

Our next session will be this coming Saturday, February 19, at our usual time of 9-10 in room 713. This month, we are going to be talking about Classes. Classes let you move from just styling individual HTML tags to getting truly flexible in your use of CSS. It's great stuff--don't miss it.

We will have an extra credit session at 8:45. I have been keeping examples of best practices for CSS, and I will show a couple of those practices as a wrap-up to our text styling and units of measurement. We will be getting back to those topics when we get to fonts, so there will be more to come.

See you Saturday.

Another example of using line-height

Member Ken Taylor forwarded another interesting example of using line-height. As Ken explains,
I tried a different approach using positioning rather than line-spacing. This is the correct way to do it. It resolves problems between browsers.

In this example, I used predefined font-size rather than points so that in IE it changes if you change text size. If I used points it would always be the same size (except in Opera where it is Zoom rather than Text).

January 18, 2005

Test CSS : Line Height 0

At our last meeting, we talked about the line-height property, and we played with setting it to a value of 0em. Ken Taylor sent me this page on Test CSS : Line Height 0. It is a nice example of using CSS to create a stylish look using nothing more than simple HTML text and CSS. Ken says that this works fine in IE & Firefox, but "2005" is higher in Opera causing it to be a bit off.

Try it yourself in different browsers with different settings.

January 16, 2005

Homework for February Meeting

We talked about units of measurement at our last two meetings. This page on CSS Units of Measurement will give you a chance to try out different ways of sizing lines and spaces using different sized fonts. Save the file to your computer, open it in any editor, and play with the embedded styles.

Take it a step further and re-size the fonts on your browser to test the results.

Answer to Homework for January

If you were not at the January meeting for our extra credit session, here is my analysis of the question I posed as homework: Answer to Homework for January. Let me know what you think--comments are enabled for this blog.

January 15, 2005

Generating Nonsense Text

When you are learning CSS (or HTML for that matter), it helps to have some sample text to play with. There are a couple of ways to generate nonsense text.

If you have Microsoft Word, you can open a blank page and type this entry: =rand (x,y), where x is the number of paragraphs you want and y is the number of sentences per paragraph. The result is a series of "The quick brown fox..." sentences. This text can then be copied to your HTML document.

Another solution is at Lorem Ipsum - All the facts - Lipsum generator. This site has a generator for Lorem ipsum text that is already marked up as an HTML page. You can copy its source into your own source and have paragraphs already tagged. Plus the site gives you more information than you could ever ask for about Lorem ipsum.

But when doing a mock-up page for a real site, the better approach is to use sample text that is related to the subject of the site. The page will look more realistic, and the text will not be a distraction.

January 10, 2005

January 15 Meeting Announcement

Our next meeting will be this Saturday, January 15, at our usual 9-10 hour. See the entry below for a homework assignment and a book raffle as an incentive for you to try your hand at an answer.

At this month's meeting, we will finish up with text formatting and with units of measure. We will then move on to fonts, and in the process, we will start working with classes. These skills will let you start making some really attractive pages just by the flexibility you will have to mix and match styles.

See you Saturday

January 09, 2005

Homework for January

The workshop homework for the January meeting is to consider and answer this question on usage. I will give my version of the answer (not necessarily an authoritative answer) as extra credit at the January meeting at 8:45. If you do not make it to the meeting in time, I will post my answer here on the site after the meeting.

As an incentive to have you ponder this metaphysical query, I have the following proposition: Anyone who e-mails me a reasonable effort at an answer will be entered in a raffle for a used-but-in-good-shape copy of the first edition of O'Reilly's CSS Pocket Reference. The second edition is now out, but the first is fine as a quick check of basic CSS.

Answers don't have to be right, just a good try. Entries must be received by me by the time I turn off my computer Friday night, January 14. So assume 9:00 to be safe.

I will pick a name Saturday out of all the entries. If you are not present, I will hold the book until February. If you are not present for that meeting, I will raffle it off to all who are in attendance at that time. Seems a fair way to do it.

Give it a try and let me see what you think.

January 01, 2005

December meeting notes

At our December meeting, we started reviewing the different ways of styling text in a web document. The topic also lead us to discuss units of measurement in CSS. A nice review of the available units is at this DevX article, CSS: Units of Measurement. For a list of the text styles available in CSS 2, go to the W3C site on recommendations for text specifications.

We covered some of the basic styles, and we will pick up in January with a little more on spacing. Take some time in the next couple of weeks to try out the styles we talked about--you can download and play with our basic template page.

I will be posting some homework for the January meeting shortly. In the mean time, let me know if you have any questions.

December Homework Answer

I posted a question as homework for the December meeting. The question had to do with the media attribute that is part of CSS. You can look at the November 21 entry on this site for the full question, but it was basically this: If you look at this page of minutes from a township meeting and print it out (or just look at Print/Preview in your browser), you get a print version of the minutes without graphics or formatting. I asked whether anyone saw a problem with this approach--I load a separate style sheet for printing, thus avoiding having to make a separate printer version of the page.

Here is what I see as the problem: I have hijacked the browser. When people press the print button, they expect to have the page they see come out of the printer. Instead, they see something else that might not be what they want.

The better solution, I think, is to have the print version load when the reader wants it to load. I can still do one page and employ CSS to render a print version, but the reader should have the option of selecting it. The solution would be by scripting or some other technique. I hope to discuss solutions when we get to the media attribute. In the mean time, you might want to check out this article.