Meryl's Notes Blog

Most blogs are quiet on Sunday, but not Shirley’s. She’s put together a tutorial on Converting Existing Content to CSS from WebsiteTips.com. Page 1 gets you started with a basic HTML page, style tags, and colors. Page 2 is fontyful. Move to page 3 to get the lowdown on links and CSS. Then learn how to make life easier with external style sheets. It concludes with a quick note on how you should convert an existing site to CSS and plenty of resources.

If you haven’t played with CSS much, this is a good place to start. No, I’m not trying to get on Shirley’s good side (Hi, Shirley! How ya doin’? You’re terrific!). I felt threatened by some of the well known and strongly recommended CSS articles when I first started learning CSS. This one didn’t frighten me because it provides you with the code to copy and paste, shows you how it should look (both the code and the results), and explains each of the commands. Also, another good place to begin learning about CSS is Climb to the Stars.

If you already know CSS, this is too easy for you. You may find some valuable CSS resources at Websitetips. Here’s a list of resources I posted at webdesign-l:

CSS Software Bradsoft’s TopStyle got the most recommendations. Close behind is WestCiv’s Stylemaster.

Also, a good reference to have at your computer is Visibone’s HTML Card or Foldout. If you decide you like the Visibone and don’t know which to go (foldout vs. card), you can view the old notes on Foldouts and HTML Card.

• Webmonkey’s CSS Stuff
• Webreference
• Builder.com CSS Reference
• W3C CSS School
• Webreview Overview of CSS Specs by Eric Meyer
• Web Nouveau
• CSS Real World - Web2001 Presentation from Zeldman
• Fear of Style Sheet Series - from Zeldman
• WebSite Tips - CSS

When I did my first attempt to create this Web site in tableless format, I started with the box templates like the ones you’ll find at glish, noodleincident, and bluerobot. Find the template that closely matches your Web site’s layout and slowly move your content into the template. Play with the CSS sheet and figure out what each property and attribute does.