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 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 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.

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 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.

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 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.

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.

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.

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.