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

The thrid and final type of CSS rule is called an ID Selector. This guy gets kinda complicated, but the short ‘n sweet is that he’ll letcha control the layout positioning of something called a <div> element. We’re talkin’ page layout here, folks, so sit up and pay attention! This is how it works: You have these things called <div>'s which are essentially containers—boxes that you put stuff into, like text, images, and so on. Then you attach a CSS rule to the <div>, and the CSS rule tells the <div> what dimensions it should be, and where it should be positioned on the page. This is very, very similar to using X and Y co-ordinates in your page layout program.

So for example, I might have a <div> that’s being used as a header across the top of my web page; another <div> running down the left side for my menu, a third for the main content of my page, and so on. Each would have it’s own unique CSS rule, which provides dimension and positioning settings. It’s like plotting out a print design in Illustrator or InDesign.

Awesome stuff? You freakin’ bet. Now here’s the icing on the cake. In addition to the three types of styles, there are two primary types of style sheets—a style sheet is simply a list of styles that you’re using, by the way. You can have internal style sheets and external style sheets. An internal style sheet can only control one HTML page at a time, whereas an external style sheet can control an unlimited number of pages. So it’s kinda obvious which direction you’d want to head in. So imagine this: You can control your entire website, all 500 pages…all 5000 pages, it makes no difference, all from one external style sheet, which is just a tiny text file.

So the client asks for all the paragraphs on all 500 pages to have more space below them. No problem. What you tell him is that it’ll take the rest of the week; what you actually do is open up the external style sheet—not the HTML pages, cuz that’s not where the formatting instructions are—make a coupla wee changes, and in about 15 to 20 seconds, you’re done; all 500 pages are updated. How’s that for efficiency! Still billable for a week’s worth of time? That’s up to you to wrestle with!

Or, the boss wants the site’s header to be pushed a bit farther down the page throughout the entire site. No worries. Open up the external style sheet, find the style that controls your header <div>’s, make a positioning adjustment, and you’re done. So you can see why CSS is such a huge deal in web design. You’ll have to figure out some ways to look busy at your desk, cuz it ain’t gonna be much work once you get up to speed!

Wrappin’ It All Up

Well fellow designers, that’s the meat and potatoes behind web design. Again, please don’t get hung up on code. It’s all about concepts for now. Getting into code is the next part, and trust me, one fellow designer to another, code just ain’t that hard. Back in the day, the idea of designing with code scared the hell out of me. But I saw it as an exercise in learning how to think with the analytical part of my brain. And you know, now I actually enjoy it! I know what you’re thinking though…whacked my head one too many times against my monitor, right? But really, once you wrap your mellon around the concepts we’ve discussed here, you’ll find the rest is easy stuff.

So to recap, first, HTML was built to do two specific tasks, but things started getting way out of control as soon as design started getting involved. Remember, HTML is the raw structure for our pages, like the foundation and steel beams of a skyscrapper. Second, HTML is comprised of two components, elements and attributes, and we can nest elements within eachother. Third, the real trick to learning HTML is simply figuring out what elements are available, and what attributes go with what elements.

As for CSS, first, it’s going to look after all the formatting duties, including text formatting and page layout. Next, it’s based on styles, just like those found in page layout programs. Third, don’t forget that there are three primary types of CSS rules available, depending on what you’d like to do. Fourth and final, there are two places where styles can be stored, internally and externally, and external style sheets can control an unlimited number of pages.

That’s it—that’s all there is to it! So I hope you’ve learnd lots and have enjoyed learning about all this stuff. So, dear print designer, make the leap. Jump on over to the world of web design, expand those skills and make yourself and your talents even more marketable. And if all this new-found web knowledge has gone straight to your head, then take the No Mercy HTML Quiz-ahh, hotshot!

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