Web Standards: Conclusion
The best way to learn how to design with CSS is by looking at examples. Whenever you see a cool page, choose View Source and see if it's using CSS or tables for its layout. If it's using CSS, take a look at how it achieves its look. Keep an eye out for sites with CSS and XHTML badges on them. Download the html file and the css file and make changes. Rip it apart and figure out how it works. This is also a good way to learn new CSS properties, since I could not hope to cover all of them here.
Tips & Tricks
When laying out pages with CSS, it is useful to draw up a diagram of how you want the page to look first, either on paper or on the computer, so that you have something to work towards. Let's face it, typing pixel values into a stylesheet is not a very good environment to be creative in. The other advantage of having a diagram is that as soon as you get your CSS to look like the diagram, you know you're done (though you may have to make some tweaks to get it to work in other browsers). I encourage you to use Firefox or Safari while testing your pages, then go back and test them in IE later. This way you won't get confused about whether your CSS is wrong or IE is wrong.
Also, Macromedia Dreamweaver (available from software.brown.edu) can generate CSS and XHTML code for you. Although you will still need to do a lot of coding by hand, it can make the learning curve a lot shallower. It also has a nice code editor that will color-code your CSS and XHTML. To use its built in graphical CSS editor, go to the menu Text > CSS Styles.
For Mac users, Safari has a useful feature called the Activity Window. If you go to the menu Window > Activity, Safari will display for each page you have open a list of every image, stylesheet file, etc. that were accessed while loading the page. This makes downloading whole web pages easier.
Also, I did a page awhile ago for an gathering that takes place annually. At the time, I used a table-based layout for the page, and I've almost finished converting the layout to CSS. Here is a link to the table-based version, and a link to the CSS-based version (which is not quite complete). You are welcome to compare the source code of the two pages.
Questions? Comments? E-mail me: Owen_Strain@brown.edu.
Free Samples!
I am working on creating several CSS-based designs that you can use and modify to suit your (noncommercial) needs. See the copyright information at the bottom of this page for details.
- The design of this page is the first of these free CSS-based designs. Click here to download a zipped version of this site (I will try to keep it up-to-date as I update the site). You can delete the MacOS folder which you will see when unzipping it on a PC.
- I have created a second design called "I've Got the Blues" that you can use for whatever you see fit. There are two versions of it to allow you greater flexibility. I have also included the original Photoshop document that the design is based on.
Links
- DevGuru - If you ever need to look up a CSS property or an XHTML tag, this is the place to go.
- CSS Zen Garden - This is an amazing site. The premise is that the HTML is set in stone. Designers submit CSS files to completely change the way the site looks. So far over 160 designs have been submitted. This is a great way to learn a lot about designing pages with CSS.
- css / edge - This site is a showcase for cutting-edge CSS techniques. This is where the web is going once browsers (particularly IE) support more of CSS.
- Wikipedia - We all know and love Wikipedia. But did you know that every page on wikipedia.org uses web standards? Take a look at their code. They also have good articles about CSS and XHTML.
- A List Apart - This website is devoted to web standards, and has lots of examples of how to do cool stuff with web standards.
- tanfa CSS - A site with some good articles about CSS. Take a look at their article on what you can do with borders.
- Zeldman.com: Designing with Web Standards - The website to accompany the book of the same name, which I highly recommend.
