For a hot new thing, CSS (Cascading Style Sheets) sure is slow off the blocks. First proposed in 1994, first implemented in browsers in 1996, CSS is perennially touted as the successor to conventional HTML-based Web coding. Its ability to use style sheets to control typography and layout throughout a Web site always seemed to make CSS the most efficient, designer-friendly, forward-looking option. And yet myths persist about CSS — myths that discourage Web designers from getting to grips with the language. So what’s all the fuss about? <\/p>\n
We asked Faculty member and published CSS guru Christopher Schmitt. Christopher’s so convinced that CSS should be a part of every designer’s Web design toolkit, he devoted two lessons in Sessions’s updated course to creating CSS layouts. <\/p>\n
Q. CSS is getting big enough for prime time, maybe even Letterman. What are your top ten reasons we should all learn and start using CSS now?<\/strong><\/p>\n Christopher: Here’s my top ten in no particular order: <\/p>\n 1.<\/strong> Build from the ground up to replace traditional Web design methods. The World Wide Web Consortium (W3C) created CSS to replace HTML tables, font tags, frames, and other presentational hacks of HTML elements.<\/p>\n 2.<\/strong> Faster download times. Reduction of file size is about 50% less than a Web page built with traditional Web design methods.<\/p>\n 3.<\/strong> Shorter development time. Easily tweak the design of a thousand-page site with just a few edits of one CSS file.<\/p>\n 4.<\/strong> Greater control over the typography in a Web page. I’m a type nut, so CSS’s ability to control typography better than a wimpy FONT tag is a wonderful gift. No longer do we need to use the font tag or single-pixel GIFs (SPG) to create leading, change font colors, font families, and much more.<\/p>\n 5.<\/strong> It’s easy to write. You can create and edit CSS as easily as you can hand code HTML. <\/p>\n 6.<\/strong> Improvements in accessibility. Using CSS effectively means structuring content with HTML. With structured HTML — using <p> tags only for paragraphs, heading tags only for headlines, tables for only tabular data, and so on — you increase your audience size without building separate versions of your site.<\/p>\n 7.<\/strong> Print designs as well as Web page designs. Create presentations not only for Web browsers, but also for other media like print or PowerPoint-like presentations.<\/p>\n 8.<\/strong> Better control over the placement of elements in Web page. ‘Nuff said! <\/p>\n 9.<\/strong> The design of Web pages is separated from the content. By keeping the design in separate files linked to the HTML pages, you reduce the likelihood of your page designs falling apart over time as different contributors add to the Web page.<\/p>\n 10.<\/strong> Better search engine rankings. With only HTML used for structuring content in a Web document instead of rigging tags for design, search engines will spider your Web page effectively, and more likely give you a higher page ranking. <\/p>\n Q. Hmmm, now I really feel like we’re on Letterman. You mention control as a major benefit of CSS. Isn’t this why graphic designers should get really excited about CSS?<\/strong><\/p>\n Christopher: Definitely. One of the reasons for CSS is that you have more options in controlling the look and feel of a Web page. However, control is a slippery word when you are talking about Web design. The only way to make sure people see your Web page designs the way you intended is to invite everyone to come to your place and check out the Web site on your computer. <\/p>\n Of course, this would sabotage the purpose of distributing information over a vast international computer network. Not to mention irritating a few of your neighbors.<\/p>\n One thing to note is that with CSS the ultimate control is with the user trying to read your content. Remember that before CSS and to this day users can control the size of their fonts, the default links colors. And now depending on which browsers they are using, users can write their own style sheet to overrule your design choices. <\/p>\n I don’t want to sound like I’m coming down on a designer’s ability to create wonderful layouts with CSS. That’s not the case at all — CSS allows for greater design control over a Web page than typical just HTML and images. <\/p>\n For a great demonstration of the power of CSS for designers.<\/p>\n Q. One big theme in your course is the importance of separating Web content for presentation and display. Can you talk a bit about that?<\/strong><\/p>\n Christopher: Sure! If you designed Web sites in the 90s, a professional Web site would be composed of tag soup. That means that HTML tags would be used to markup the content as well as using tags to rig the presentation of the page as well. <\/p>\n An example of that tag soup is how designers used the <p> tag that is used to distinguish the boundaries of a paragraph in a Web page. However, in the old days designers would use a series of <br> after a <p> to increase the amount of space between paragraphs. The <br> tag when used correctly is used to forcibly break a line of text, not as a means to create leading. It’s the wrong tool for that job.<\/p>\n If you delete those extra <br> and other unneeded elements, the file sizes of the Web pages drop. And by removing those unneeded tags, you can control the design of the CSS page (like leading) through external CSS files. And since your designs are external, you get great benefits. First, browsers will cache the file. Instead of having people download those extra HTML elements over and over again, the CSS files are already stored on their cache and the browser can readily refer to that file.<\/p>\n Another advantageous item is that the design of a Web site is at one central source. You can edit one file and maintain the look and feel of a large-scale site. No more need to do a global search and replace to fix <font> tags.<\/p>\n And one item I love about separating the design from a Web site is that the structured markup makes the site more friendly to search engine spiders. Their algorithms will respond better in positioning your Web page or site in their system. How well you move up in the search engine rankings still depends mostly on the strength of your content. By getting rid of the unnecessary HTML tags, you do create a greater chance of moving up in the rankings.<\/p>\n Q. What personally interested you about getting involved in writing about and teaching CSS? <\/strong><\/p>\n Christopher: My mother was a math teacher. She taught math at colleges like FAMU and FSU. So I was exposed to what she had to do to teach her students and that made an impression on me when I was growing up. <\/p>\n Another part is that everyone has those really awful teachers. You know, the kind of teachers who aren’t inspired by the material, so they don’t inspire students to learn more about the subject matter. It’s those types of teachers I try not to be like when I speak at a conference or teach a class. I try to teach like I would have wanted most of my teachers to educate — with a great deal of passion and patience.<\/p>\n I want to be there for my students when they have a question. I try to break complex concepts into items they understand. True, Web design isn’t rocket science but rocket science isn’t Web design — and it shouldn’t be taught like a set of expressions to determine the lowest common denominator like so many usability experts tell us to do.<\/p>\n There’s also the simple fact that I have a deep love about this medium. From Information Architecture to database solutions to creating log file analysis to creating the visual front end, it’s just a joy through and through for me to be able to work in this field. And having the privilege to share my enthusiasm and understanding about the Web and Web design is an opportunity I truly cherish.<\/p>\n Q. We did notice that your initials spell CS. Add in the S for style?<\/strong><\/p>\n Christopher: Actually, my initials are C.R.S. So, it’s almost there. Maybe I should legally change my middle name?<\/p>\n Q: The number one concern designers used to have about using CSS was browser compatibility. How safe is CSS for a wide audience today?<\/strong><\/p>\n Christopher: Actually, I feel pretty safe using the technology. I wouldn’t have written a about it if I didn’t! <\/p>\n I’m of the opinion to use CSS now and if your browser doesn’t support it, to heck with your browser. Does this mean I leave the user in the lurch? No. For example, Netscape Navigator has very poor support for CSS. This was due to the fact that Netscape’s engineers were working on their own specifications for CSS (they called it JSSS) and it was based on their JavaScript. As they inched closer to their release, the W3C came out with a new specification. This left Netscape engineers tucking the known CSS specification into the code they had already written for their browser. So, what we have is a browser that barely gets CSS straight. And when you use CSS properties like line-height — whoa — you better watch it.<\/p>\n So, in order to make sure people don’t get a double-barrel case of eye sore if they surf with Netscape Navigator 4, I hide the CSS files that handles the complex or advanced CSS rule sets. I still leave design properties like font family, basic colors, and margins in the style sheet — but beyond that, people surfing with Navigator will still get the content they came looking for. <\/p>\n By starting out now and learning the limitations upfront, not only will you totally love the time when browsers will implement the full CSS spec — but you will get a competitive advantage that you don’t get by waiting for the technology to catch up. CSS isn’t beta software that might crash your computer system — it’s real and it’s now. And chances are, the browser you are using right now can render it just fine. And if you build forward compatible sites with Web foundations like XHTML and CSS, your sites will not only be maintained better in the future, they’ll likely look fine in future browsers. <\/p>\n Q. What other arguments against using CSS (myth or realities) should a designer know about?<\/strong> <\/p>\n Christopher: If you are an old school Web designer, be prepared: It’s a totally different approach than what you know. I always say that CSS is a different set of headaches than what developers in the 90s were used to. <\/p>\n How you approach the construction of Web pages with HTML tables simply won’t work with CSS. You will have to get used to background images on every block level element, floating elements to the left and right, positioning, overflow properties, and so on. It sounds familiar if you’ve been doing Web design for a while, but it’s still a strange land. But the benefits of using CSS outweigh not learning about the technology. In this case, CSS ignorance is not bliss.<\/p>\n Q. What’s the learning curve for CSS? Should a total newbie to Web design learn HTML hand-coding first — the hard way — or can you just wing it with a WYSIWYG?<\/strong><\/p>\n Christopher: It really is a new way of producing for the Web. I worked at a high-end graphic design shop for a couple of years. The designers would send me comps and I would literally scratch my head about how to pull off their designs by using HTML and images — and yet somehow we managed to pull off the impossible. Of course, the impossible often meant Web pages with file sizes of 80 to 100k, but they looked like the designer wanted. I felt very bly as a designer with those production methods that I needed to preserve what the designer had intended to be on the page. So, I worked very hard on pulling off minor miracles. <\/p>\n When CSS came along, at first I was hesitant. CSS-enabled design really challenges what you’ve known as designing for the Web. But after learning the basics and that the problem with CSS wasn’t the technology but the browser implementations of CSS, I started learning all I could about it and how to use it to design.<\/p>\n Right now, I would say there isn’t a WYSIWYG tool for CSS I would trust fully. I recommend people look into hand coding CSS. Learn its limitations and syntax before you let other tools do the work for you. <\/p>\n True, designers who use Illustrator aren’t coding PostScript by hand; Illustrator spits out the EPS files. However, we aren’t at the point where the software can generate quality CSS without you having to code it. <\/p>\n Q. The adoption of CSS in HTML editors (Dreamweaver, GoLive, et al) is clearly a factor in how quickly or slowly it has been accepted. How have recent or new software releases made CSS easier to do? <\/strong><\/p>\n Christopher: Macromedia has embraced CSS as the way to design pages in its latest release of Dreamweaver. It’s a truly amazing achievement. Macromedia’s first release of Dreamweaver and up to this point has been all about using HTML tables for the design of Web pages. <\/p>\n In the MX 2004 release, it’s like they’ve turned a flagship product on a dime to go with the changes in the industry. The design view for Web pages renders CSS more accurately as well as providing easier access to update the values for CSS properties. <\/p>\n Adobe has announced the latest version of its page layout program, GoLive CS, however I haven’t had the chance to personally work with that application yet. As soon as it’s available I’ll be taking it for a test drive. But you can definitely see the trend. The Web authoring tools are embracing CSS as the means for designing the Web.<\/p>\n