Article on CSS Media Types

At the May CSS Workshop, we talked briefly about creating styles for print versions of a webpage. Then at Web Design, we talked about creating styles for handheld devices. So it was great timing that Builder.com just published a nice article on the media types that allow web developers to adapt their sites to different devices. Check out Adapt to your audience with CSS media types.

Note particularly the section toward the end entitled Support. It gives a good idea of what is practical now and what is just academic. There will be more support coming, I'm sure, so it is a good idea to get familiar with this technique.

May 19 Meeting Report: Columns, Faux and Otherwise

At our May meeting, we covered some left-over topics from April. We discussed how background images on a page might not be printed, depending on how the user's browser preferences are set. But you can always set up a print style sheet and use the media="print" attribute to control how your page looks when it is printed.

We then looked again at background-attachment: fixed and noted that the background image can scroll off to the left as the browser window widens if you do not set up the attachment properly.

The primary topic for the month was the practical use of background-attachment to style a page. We looked at an approach to getting around the fact that an element cannot have more than one background attachment, at least as CSS and browsers stand at this point. The solution was to use two div's that occupy the same area of the page, each with its own background image. We then used that sample file to show how a background image can be made clickable, or at least look and act as if it were the image that was being clicked.

We finished with the question of how to use CSS to style a column so that the background will extend the full length of a page. We showed one technique that just uses background-color, and then we looked at the famed Faux Column technique that uses background-image.

I have posted demo files in the Sample Pages section of this site. There are comments in the source. Download the files (and images if needed), and edit away. Let me know if you have any questions.

Next meeting is June 16. See you then.

May 19 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, May 19, at 9 - 10 am.

In recent meetings, we have been working on using background images. We have had a lot of give and take during our sessions along with some on-the-fly experimentation, so it has taken longer than I had expected to cover this topic. But I think it has been worth the extra time.

In any case, this month, we will definitely get to styling columns. Getting the background right is a little trickier with a CSS formatted page than with a table layout, but we will look at a couple of ways to accomplish the task, including the famous Faux Column technique.

April 21 Meeting Report: More on Backgrounds

This month, we continued working on background images and spent some time on setting different backgrounds for different elements on a page. The default background color of a webpage is transparent, per HTML specs, so even though background images are not inherited, they will show through your child elements unless you declare either a background color or image for that child. And in case the image does not load, you should always do both.

We put a background on headings and inline elements, and used the background-attachment property to let a background image stay in a fixed position while the page scrolls.

In the process of all this, we talked about alpha transparency of images as well as some philosophical questions on webpage design.

For a quick review of the background properties we have been working with, see this recent post with a link to an article on this subject.

Builder.com article: Precisely control page and element backgrounds with CSS

The timing could not be better for this article from Builder.com on CSS background properties. It is a good review of the styles that we have been covering recently.

April 21 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, April 21, at 9 - 10 am.

This month, we will continue working with background images. We will cover a couple of topics that came up last month but that we left with some open questions. I figured out the answers, and I will clear up all confusion in a matter of minutes. We will also take a quick look at the standard baseline style sheet that Eric Meyer recently published on his blog. I have a link to that article in a previous entry.

Our main subjects will be techniques for using multiple images for backgrounds and styling a sidebar to have a background color that goes the full length of a page. One of the techniques will be the famed Faux Columns, and we should be able to cover that topic in our allotted time.

Eric Meyer: Standard Baseline Style Sheet

Eric Meyer recently blogged about a baseline style sheet that he has developed: Eric's Archived Thoughts: Reworked Reset. I found this article interesting because we have had Web Design SIG presentations recently where we have discussed basic default styles as starting points for webpages. Meyer takes this idea to the next level. Check the previous blog for comments by some of his readers to see how he revised the first version.

March 24 Meeting Report: Background Images

At our March meeting, we worked on using CSS to add graphics to a webpage without affecting the underlying HTML of the page.

We began by reviewing the HTML attributes BGCOLOR and BACKGROUND and the IMG tag to show how graphics were added before CSS. We then discussed the CSS properties background-image, background-repeat, and background-position, and then the shorthand property background. Using that property, we can use one declaration to define up to four background properties.

We then used background-image to add a graphic heading to a page, using display:none to hide the H1 heading without actually deleting it.

Next month we will continue on this topic by tying up some loose ends, and then getting into faux columns.

March 24 Meeting Announcement

The March meeting of PACS is on the fourth Saturday again this month -- our session will be on March 24, at the usual time of 9 am. There will be no Javascript Workshop meeting in March, so consistent with past practice, CSS and Flash will each expand to 90 minutes and make use of the open time between 10 and 11.

This month we will work on background images. In the process, we will get philosophical about when and how to use images on a webpage. And with the extra 30 minutes this month, we should be able to cover a related technique, faux columns. If you don't know what they are, don't miss our meeting.

On top of all that, we will have another fine book raffle where someone's PACS membership will pay for itself.

Finally, be sure to check out the PACS online store for all your fashion needs.

PACS Web Design Book ReviewsBeginning CSS Web Development

As those who have attended the CSS Workshop recently know, I have been using a book from Apress entitled Beginning CSS Web Development: From Novice to Professional. It is by Simon Collison.

My review of this book is now posted at PACS Web Design Book Reviews.