A CSS Walkthrough
Months ago, I had an idea to put together a seminar for students at Cornell with almost zero web design experience. My idea was to teach them CSS by example and get them to the point where they would be capable of writing their own basic CSS and making simple webpages.
I don't know what I was thinking.
When I started working on a tutorial for this seminar, I found that it was taking forever to write. I would finish a page at most, and not come back to it for a week or two, and maybe do another page. I had so many other things on my plate, and this was not easy to do at all, so I was always putting it off. For a while it seemed like it would never come together. There were just too many things to think about; too much I wanted to say. After a little less than 2 months of teaching this material to web design students, I've realized that a basic seminar for total beginners would be downright impossible. There is just no way to teach CSS without a lot of time and practice. I know that now for a fact.
However, even with scrapping the seminar idea, I decided I would keep working on this tutorial until it was done. I found a couple hours here and there every couple weeks that I could devote to working on it and kept at it. I'm very proud to say that today, I am done. Here it is: A CSS Walkthrough.
I call it a walkthrough because it really is a lot like a walkthrough guide that you might buy for a videogame. I start with a simple draft sketch, and work towards a completed design, detailing every HTML and CSS change I make along the way. It's probably suited for anyone who has little experience with XHTML or CSS but at least has seen the stuff before, and I managed to cover various techniques that might be useful to learn. I don't actually know if anyone will find it useful, but I just had to finish it. This is the final design that the walkthrough leads to:
Feel free to check it out, share it with others, etc. It's under a Creative Commons Attribution-Sharealike license. Have a look and let me know what you think.
1 Trackbacks/Pingbacks
- Pingback: Max Design - standards based web design, development and training » Some links for light reading (24/10/06) on October 23, 2006
Did you even bother to try loading your final page in IE6? A good lesson in the importance of testing…
A good lesson in the importance of testing? I didn't have IE 6 installed on my computer while I was working on this, so I didn't get a chance to test it. I installed it just now and I can see the problem, though I'm still trying to figure out the solution. But thanks for being a total jerk about it.
OK, all fixed.
Can I ask why the walkthrough is split into so many parts? Do you not believe in the power of scrolling, did you want to inflate page loads or did you just not really think that it's a bad thing to do?
Dean: None of those. I did that because it made it easier for me to keep track of where I was and what I was doing. Again, no need to be such a jerk about it. I didn't have to do this.
Amazing. Someone spends an inordinate amount of time on a complex subject with conflicting industry standards and an absolute lack of client interoperability (commonly referred to as CSS), goes to the trouble of putting it into an online format, and the only comments are attacks and complaints about the format.
Nice.
Greg: A lesson in blogging
I've learned how to deal with it though!
Maybe you could use online pageslide presentation APIs to go from one page to the other.
Eg http://robertnyman.com/ajax-s/ or http://www.snook.ca/technical/s5key/
Johan: You are right, I really need to give S5 a try.
Cheer up…
Don't let it stop you from doing these things Christian, do them for yourself in the first place. Don't let negative reactions ruien your mood and stay polite (for your own morale). I am a seasoned programmer and website designer, as far as I can see there is not much wrong with your walkthrough, one important advice is to tell your readers the why part. Not the why of your motivation but the why behind the choices of the elements of your walkthrough. Mainly because that is the part the will stick with people, people remember things better if they know the modus operandii behind things. And secondary it makes you a better explainer in future projects.
Success!
Yaa101
Yaa: Thanks, you are totally right, and I have even seen that with my students… they always want to know why things are done a certain way, because that helps them learn the concepts more than just the implementation.
A great tutorial to get started with Web Design. I could of done with something like this not so long ago
Christian, amazing tutorial. Thank you. Not enough people say that, you deserve it. I wish some of my old tutors were this dedicated. Is this a common trait in Cornell staff ? If so - where do I sign up ? Seriously thanks.
Thanks guys. M, I think so, I've seen the other web design teaching assistants working equally as hard on assignments, tutoring, etc. They are a really dedicated bunch!
hi Chris, thanks for the tutorial!
i've been teaching CSS and web standards in israel for the past couple of months and also found it very hard to write down all the basics and make them fit in the big picture.
it took me about 2 months of intensive writing and rewriting the material, just to find out there's a little bit more to add here, there and everywhere!
i took a different approach to the subject, but yours is just as good.
keep up the good work!
yuval
Hey Christian !
Great job , don't let the naysayers drag you down.
As for testing on platforms you haven't got at home, this site http://browsershots.org/ is an absolute winner.
It gets a little slow at times, but it lets me see my site on any platform I choose.
VERY useful for testing, and avoiding MMMMMMMM kind of "comments".
Cheers ! And keep it up !
Hi, nice tutorial, but theres something that i think you miss, the general rule at the beginning pf the CSS:
*{margin:0;padding:0;border:0}
That thing is the hell of important if you dont want headaches at the time of testing it, and with that you can control the sizes of all your elements.
RoQ: Thanks for bringing that up. I used to use that all the time, but I realized that there were 2 problems with it (which I learned from various other web developers with far more experience than me):
This is why I talked about the initial settings in the beginning of my walkthrough… I apply basic settings directly to the elements that need them, and those elements only. I have used this technique in every design I've done in the past 5 months.
For more information about this (and a great alternative to the star selector), check out Starting with CSS Revisited at KuraFire.
Hi Christian! Thanks for a great tutorial… great cause it's holistic (from design, structure to CSS).
If it's any use to you in your classes, I've been creating CSS Challenges for use in my classes here… I find them useful for getting students focused on solving common CSS problems (of couse, they could do with some work too!)
Thanks again
This is a brilliant tutorial Christian! Thank you for writing it and thanks too for publishing it under Creative Commons Share-Alike. It's much appreciated.
Well, I think it's a great example and useful to anyone including myself when teaching people. I am very glad you are taking the time to do this and have no doubt as you work on it you will do more and more tweaks but this is an excellent base and don't be deterred, yes the wonderful world of blogging and people commenting for the sake. Just think karma slugs and it will get you through. A big thumbs up from over here and it's always great for people to give back like this.
I just wanted to thank you for the great mnemonic device to remember CSS Pseudo Class order - I'm a Star Wars nut as well as a CSS nut, so this is a match made in heaven, and I never, ever use the :focus pseudoclass, but I will from now on!
Hi, nice link, im reading it, but the idea of nullify all the browser default styles is to make your own styles, you know "start with a clean state", some guy say that and i think its logic
RoQ: You really should read Starting with CSS Revisited.
I think this is well written and I may use it next summer when I teach web design. If so, I will link back to your site and give you the credit you so richly deserve!
V
Vix: Glad you like it. Hopefully I will have more time to write CSS tips and tutorials soon.
Nice walkthrough. Useful, and a couple of interesting tips.
Note:
1. Should inform ZIP available up front, not at the end.
2. Several minor inconsistences between text and CSS; needs QA.
3. dt clear:left seems not needed.
4. Final margin-left -5 in text, -10 in CSS.
5. Works OK in IE7, but a:focus doesn't.
6. "Polaroid" effect could be explained better.
Hope this helps.
Thanks very much davidy, I'll try to make those fixes today!
Thanks for the tutorial,
I've been in the industry for years, and as such shun web page designing with a passion (what do i put on it, and what for ;)), but my new role has led me to upspec some e-learning tools which require not only ASP, but CSS by the client. I was totally lost as I had never used it until now (head burried in other projects like the shitty longhorn server basis and flash comms server :P)
So Thankyou very much for the simple and easy to follow "what is this shit" tutorial.
BTW, I'm in adult ed, and I liked the module feel to your tutorial, so cheers and keep up the good work. I know where I would come if I had any questions
Cheers
Hi_Christian
I want to thank you for your 'A CSS Walkthrough'
I have been trying to get my brain around all the concepts of CSS with HTML for a long time and I can honestly say that your method made the ideas of CSS more 'understandable' to me.
Thanks again for the most succint treatise on using
CSS. Hope to read more from one of the masters
not only of CSS but of being able to make it understandable to non-geeks like myself
Yours truly
Christian, many thanks for your beautifully lucid walkthrough. I've been trying to learn this stuff for ages and don't feel at all confident, even though I've done some sites for friends/family. My homepage was based on a stylegala template. I'd be grateful for more of your tutorials, please.
Christian, this is a brilliant tutorial. I work with IE6 myself, and although I have only a 800×600 resolution I got this tutorial to work smoothly. Just a few edits here and there did the trick.
I greatly appreciate the effort you put into this tutorial, it has helped me a lot to understand more about CSS.
All: I'm glad it was so helpful for you. If I had the time, I would certainly do more tutorials… but alas, I don't
After years of poring over more damn eye-glazing CSS tutorials … and relying on copy and paste and Blogger's willingness to publish crappy css to get my blog out … I think I got it!
You've made beautifully clear the why and where. I thank you, my readers thank you. Amazing.