Print Designers, You've Dodged This Long Enough: It's Time To Learn About Web Design [ continued... ]

So, like a snowball down a hillside, HTML grew bigger and bigger—and at the same time, it got more and more unweildy, and way more complex. Most importantly, HTML began to deviate from it’s two original purposes, structure and hyperlinks; now it was being used to format text, layouts, and pages. In other words, when design started creeping into HTML, that’s when things got real messy. HTML began being used for something it wasn’t originally built to do. A train wreck of code and frustration ensued.

So where does this leave us? By the late 20th century, HTML became this monsterous ball of frustration that caused people to pull the hair out of their heads and leap in front of the mail cart in hopes of landing some paid time off. HTML had started out as a very small, very simple tool, but it just got way out of control, all because it was being used for something it wasn’t built to do. What saved us from this outta control hell-world of endless code, hair pulling, and mail cart leaping? Well, a fancy new dawg rolled into town. CSS was his name, and design was his game!

CSS Saves the Freakin’ Day!

CSS is always stylin’. He’s got charisma, and he’s good with the ladies. He’s the second component of web design—HTML’s side-kick, if you will. The two work together to pull together killer designs. Now, much like HTML, CSS is also a background coding language, and it sits inside HTML. My basic definition for CSS? It isn’t very technical: CSS makes stuff look good. So HTML is raw structure, and CSS is the formatting. Hard? Hardly.

Remember that monsterous, out of control snowball that HTML became just a paragraph or so back? CSS single-handedly took HTML back to its original purpose of strucutring pages and hyperlinking, and took over all the formatting duties. This made page code much more streamlined, and much easier to handle.

And also much like HTML, CSS was designed to do two things as well: 1) Format text, and 2) Control page layout. And it handles these two tasks with so much ease, so much precision, that it’s left HTML-based formatting in the dust. What you need to know too is that CSS uses styles, just like the styles you find in InDesign, Quark, Word, and other programs—except with CSS it’s all code based, but the concept is exactly the same. This is huge for consistency, speed, and maintainability. So, you could have a style called PhotoCaption, and PhotoCaption instructs the content on your page to be Verdana, bold, 9pt, orange, and so on. You’d then apply the PhotoCaption style to your pages in much the same way as you would in the aforementioned programs. Easy!

Where things get extremely cool is when you start applying styles to objects, not just text. Imagine controlling things like tables, images, menus, footers, banners, and so on across your entire site, all from a small handful of styles. It’s awesome!

Now in CSS, there are a buncha different types of styles (styles are also callled rules, by the way) that you can create. We’ll keep it simple and just discuss three here. The first type of rule you can create is called a Class. A class rule is the closest you can get to traditional styles in desktop publishing—you create ‘em, name ‘em whatever you want, and apply them thoughout your page. To be specific, you can apply class rules to any HTML element (remember elements?), like headings, paragraphs, tables, images, and so on.

[ Back to Web + Mag Articles ] [ Go to page: 1 | 2 | 3 | 4 | 5 ]