Computer and Web Design Resources

Creating a CSS Card

I have been reviewing the book Eric Meyer on CSS for use in class. It's an excellent book on styling web pages with CSS and I recommend that you read it if you are looking to learn more about styling your web pages. I have ordered this book for class and it should be available in sometime during the next few weeks.

One of the projects included in the book is creating a card. I thought it would be fun to work through this project in class.

The source code that you need for this exercise is here and the two images that we will be working with are leaves480.jpg and halfscreen-black.gif (right click these files and select Save Target As, save the files to your user directory).

You can use any image you like for the greeting card, the image that I have provided is a fall image and it is 480w x 320h pixels. The halfscreen-black.gif image is a halfscreen (checkerboard) image that is 10 x 10 pixels. We will place this mesh image behind our text so that the text is easier to read and more attractive.

You can utilize TextPad or Dreamweaver MX to input the source code for this project. You can use your own image for the project, but you will have to adjust the css code if it is not the same size as the image that I am using. Once you have the page created feel free to experiment with the style of the card.

You can also use the halfscreen images below:

halfscreen-gray.gif

halfscreen-white.gif

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.