UPDATED 9/20/2008
Hello! Hoped you like our presentation on CSS. I promised some additional links and here they are:
John’s CSS Primer:
http://interactive.trianglman.dnsalias.com/
Selected Links:
Firefox and Firebug
http://www.mozilla.com/en-US/
https://addons.mozilla.org/en-US/firefox/addon/1843
My personal blog – links from the panel:
http://zowiekapowie.anman.net/
————————————
I’m on the “Geek Chic” CSS panel at Inter:PLAY, the St. Louis Interactive Festival, so its a good job that I give you some resources you can use to further your experience after the festival is over.
So its time to get your geek on and learn about designing pages the modern way – Cascading Style Sheets, or as we like to call them CSS.
What is CSS?
Before I answer that, let me get some really nerdy stuff out of the way that will help you understand CSS. Cascading Style Sheets are part of something called the Document Object Model, or DOM.
Sounds scary, but all that means is separating the content of your web page from the design and interactivity parts – breaking all of it up into separate files.
Still confused? Me too, and I’m writing this thing! But we’ll try and muddle through.
The content of your page is exactly what it sounds like – the words, man – the information, dude! That lovely screed you wrote about the merits of herringbone versus houndstooth when it comes to Anglophile outerwear – that’s the content part of the DOM.
The interactivity part is the wonderful bits of code written by cube-farmers in darkened buildings that make your page do neat things such as accept comments, post feeds and even log in to your blog to post said screed. They make your blog work, so be nice to them and bake them some cookies.
Have I mentioned that I’m a nerd? (Chocolate-chip, please.)
And now what we’ve all been waiting for, the design. CSS! Cascading Style Sheets. Sounds very relaxing, like a waterfall in a fashionable bedroom. Alas, CSS is just a file that tells your content (remember your content?) how it should look. Sort of a What Not To Wear for web pages.
The Quick and Dirty of How CSS Works:
Admittedly, you’ve got to know a little bit about HTML and if I got into it here, this would be a very long article, and we’re not serving pizza, either! I will give you a two quick examples of what CSS can do, and give you links to some fabulous resources. When you’re done with those, you’ll be able to snatch the CSS pebble from my hand with no problems.
The Box Model
No, it’s not a runway show with women who should probably eat a few sandwiches walking up and down wearing cardboard – it’s CSS!
Think of a cereal box – it’s got an outer box, an inner bag and inside that bag is your cereal – hopefully Cocoa Pebbles, but Fiber One works just as well (yuck).
That’s the Box Model.
What? Relax – soon I will bring order out of chaos.
In a simplistic way, the cereal box is a great analogue to the Box Model.
The cereal is your words, headings, pictures – anything that fits under the umbrella of content. With CSS we can make that cereal look like just about anything from giant flakes to tiny clusters to wonderful, tasty pebbles.
It’s wrapped in its own bag, so we can control the look of your content separately from the box, which we can also control.
For example:
** This is my cereal. **
Looks boring, but with CSS, I can take that cereal and make it look different:
** This is my cereal **
Neat, huh? I can make it look, or style it, any way I want with my stylesheet. Bold, italic, size, even the type of font can be changed with CSS.
Now what about my cereal box? Well, those are the other aspects of the Box Model you can control.
You can have an invisible cereal box, but lets make it visible by adding a border (or box) around my cereal (once again using CSS – this is starting to look pretty usefull!).
** This is my cereal **
Great! And you can make that border as thick as you want and even make it a broken line:
** This is my cereal **
Now that it looks like a box, lets manipulate the properties of the box. Right now, it’s rather tight around the cereal, so let’s give it some breathing room with padding . Don’t get too worried about the technical details of how we’re doing this; I’ll give you some great links for learning exactly how to do this.
Padding is just the space between your cereal (content) and the border (which again, can be invisible). Let’s try it out:
.
** This is my cereal **
.
Nifty! As you can see, there is now space between your content and your box. This space is called padding.
But as we all know, the inside of a cereal box has a color, and so can ours if you so desire:
.
** This is my cereal **
.
Spooky! This is turning into monster cereal (mmm, Count Chocula). This property is called background-color. Mind-blowing, right? See how simple these concepts are? And if the concepts are easy, how hard can the application of these concepts be? The answer is, not hard at all – It’s Jello, not diamonds, kids.
Designing Using CSS or Moving Crap Around
Something else CSS does, in addition to making things look cool, is place them exactly where you want on your page. In the olden days, poor settlers had to put their web content inside tables that were inside other tables to make their pages look the way they wanted. By candle light.
But there are a few bad things about tables. Sure they’re great for budget spreadsheets, but why not for design?
- The stuff you put in your table has to completely load before the rest of your page – if there’s a table of pictures early in your page, the rest of the page has to wait!
- If you use CSS, you can create your page like a regular document, so people who can’t see can have your pages read to them in the correct order by their reader programs. This is also good for search engines.
- That’s called accessibility – another subject entirely, but believe me when I tell you it’s better not to use tables for design.
But in today’s modern age of flying cars and helper robots, there’s a better way – CSS!
What if I had TWO boxes of Cocoa Pebbles? Terrifying, I know. But if I did, I might put them right next to each other on the shelf:
.
** This is my cerealAlso my cereal **
.
And that’s fine, but I want to put some space in between them, in case they get fighty and I have to turn the car around. The space in between your boxes in the Box Model is called the margin.
.
** This is my cerealAlso my cereal **
.
Ta-daa!
You’ve just taken your first steps into a larger world, Neo.
With CSS, you can take these boxes and move them wherever you want on a page. You can even put them in another box, inside of another box inside of another- you can see where I’m going with this.
You can take your content, break it up into as many boxes as you want, make those boxes and content look exactly the way you want them to and stack, arrange or even overlap them all over your page.
All without changing the order of the information in your content page! (Remember DOM? Go ahead and scroll up if you forget – I’ll wait).
So HOW do I do it?
Well, that’s beyond the scope of this article, but I’m gong to get you to some great information to get you started from beginner to CSExpert.
Print is Not Dead – CSS Books
I learned CSS with this book and it’s great. You can be a rank beginner and not be afraid to crack the spine. When you’re done you’ll just about be a CSS expert:
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
And once you get through that, a handy reference is O’Reilly’s CSS Pocket Guide:
CSS Pocket Reference, Second Edition
Free Web Tutorials
http://www.w3schools.com/css/
http://www.html.net/tutorials/css/introduction.asp
Free Web Reference
http://reference.sitepoint.com/css
http://www.w3.org/Style/CSS/
