Web Design: CSS

This week Randy H. led a hands-on session in the CCLI where we worked on making/applying style sheets to HTML in order to create websites. Here are the handouts he prepared (will be linked shortly)

Learning CSS
CSS Properties

While I was mildly familiar with Cascading Style Sheets (CSS) before this session, I now have a sense of the design power they hold.

I'll give you a beginner's explanation of CSS below. Please use the comments function to correct me or explain things better. Again, this is my initial sense of CSS as someone who has made a lot of websites before, but in more old-fashioned ways.

• CSS kind of makes HTML go away. Not really, but kind of. Whereas, in the past I always spent most of my web-design time working in a HTML document, now I spend most of that time in CSS. The idea is that you no longer use tables and slicing and a bunch of tags that say, be bold, be italic, give me some space here. Almost all that formatting and visual design happens with CSS. It is a new lanuage of design, somewhat similar to HTML, that you have to learn to write. And it offers a great deal more options for visual display.


• In Dreamweaver or a text editor you write a CSS file. Mine was called "look_like_this.css" You then link that file to your HTML document. Your HTML document contains your basic text and graphics, but the .css is what tells the browser how to display that data.


• To see this concept at work, please visit this link: CSS Zen Garden


• You can link the same .css file to a bunch of different pages, say, all the pages in one particular website. Then when you want to change the background color on your whole site, you don't have to go to each page individually. All you have to do is make the change in the .css file. Very handy.


• CSS also lets you position things on your page by specifiying their location on an X-Y grid. You can say, in code, "put this image 50 pixels over and 60 pixels down." I don't really know how to do this yet, but I know that you can. And I know that this gets rid of the need for laying things out in tables.


• When I say that CSS "eliminates" the need for tables, that is not a trivial statement. For a long time I have been using tables to create page layout in HTML. It works fine, I guess. But if you've ever tried to make webpages this way, you might know that you sometimes get wierd streching you have to guard against. Or, if you create a layout in Photoshop, slice it, and then load it onto a webpage by holding it all together in a table, you know you're probably not getting the most efficient load speeds or adhering to web standards very well. CSS is a more up-to-date method of design.

This is about as far as I can go in my knowledge of CSS for now, but there will be more to come. Keep your eyes peeled for announcements about future Web Design TWITs.