 |
 |
 |
 |
|||||||||||||||||
  |
|
|||||||||||||||||||
       
|
Speakers
Charlie Arehart Jo Belyea-Doerrman Tim Buntel Raymond Camden Christian Cantrell Sandra Clark Joey Coleman Sean Corfield Robert Diamond Michael Dinowitz Steve Drucker David Epler Joseph Flanigan April Fleming Ben Forta Shlomy Gantz Mark Gorkin John Hamman Hal Helms Simon Horwith Larry Hull Jeff Houser Chafic Kazoun Matt Liotta Tom Muck Rey Muradaz Nate Nelson Samuel Neff Jeff Peters Bogdan Ripa Neil Ross Margarita Rozenfeld Stephen Shapiro Michael Smith Geoff Snowman Jeff Tapper Dave Watts
|
|
||||||||||||||||||
 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45
Back To Interview list In this CFUN-04 Interview, Sandra Clark discusses her talk on "CSS for Better Sites." Michael Smith: Sandra, why should we be using CSS? Sandra Clark: There are so many reasons to use CSS, its hard to know where to start. CSS allows us to separate our content, the meat of our pages, from the presentation. Doing this allows for: faster loading pages, easier maintenance, faster redesign and so much more. Sites that separate content from presentation are by design much more usable to alternative browsers such as screen readers from the beginning. There's a big push lately to "design to the standard" rather than designing to the browser. Designing to the standard means that we reduce our maintenance costs (and headaches) since a new browser won't break our site. (Yes there are subtle differences, but the costs of fixing those are far less than trying to maintain browser-specific code.) MS: I understand CSS stands for Cascading Style Sheets but what is all the cascading about? And what is CSS-P? SC: The short answer is that rules in CSS cascade down, they can overlap and affect each other. So if you had a stylesheet styled so that your entire form was a black font with a white background and you styled a header (H1) so that the font was blue, the blue style would override the black font, but the white background would remain. CSS actually uses an algorithm to determine what style rule affects what and I will be going through that (both Cascade and Specificity) in my presentation. As far as CSS-P, P stands for positioning. Positioning is a part of the CSS 2.0 specification. Its what allows designers to position elements on a page without using tables. MS: What kind of elements can I create with CSS 2.0? SC: Well, elements actually refer to the structural side of the picture, the HTML/XHTML. So to be persnickety, you create elements in HTML/XHTML and then position and style them using CSS. So, the general answer is that whatever element you can create in HTML/XHTML, you can position it and style it using CSS. To give some examples, you can use <DIV>, which is a block level elements, to contain your content and then style the <DIV> tags so that they emulate a 2 or 3 column layout. But you don't have to stop there... MS: Don't stop! SC: Ok, let me continue. Rather than "boxing" us in, positioning DIV tags allows us to do much more. On my site, shayna.com, I actually have two style sheets that people can switch between. In one, the navigation box is on the right. In the other, the navigation box is on the left. The structure of my site doesn't change, but the visual effect sure does. Links contained within a list structure can become either horizontal or vertical menus complete with image changes. The possibilities are endless. MS: But what about different browsers? How will a CSS site look for users who use different browsers? SC: It depends. An older browser like Netscape 4 doesn't support CSS 2, since it was released prior to CSS 2 becoming a standard. Most of the modern browsers (IE 6, NS 7, Opera and Safari) do support CSS 2. Of course you have to tell the browsers to render your site in a standards-compliant way through DocType sniffing (and I talk about that in my presentation). MS: Is that totally reliable? SC: There are some quirks, as it were, to having the browsers render everything in a similar way, specifically with lower versions of IE (5 and 5.5) because of an incorrect rendering of the box model. However, that is where CSS Hacks come in and I am, of course, talking about those as well! One thing that we have to get away from is the idea that we can create web pages that will look exactly the same every where. There will be differences, but what we lose in control, we gain in both flexibility and accessibility. MS: I like flexibility so long as the programmer doesn't have to bend over backwards! What kind of changes are now easy to make? SC: Most CSS is fairly easy. It's mostly a matter of understanding the selectors and values. Once you get the hang of it, tableless layouts are easy, especially since you pretty much only have to design it once. Typography (styling with fonts) is another area that CSS excels at. Once you get the basics down it's a lot easier to style with CSS than it has been in the past. MS: But isn't the CSS syntax complex and picky? How do you deal with that? SC: CSS isn't complex and it isn't picky. It's actually very straightforward. The problem, for most of us, is that we never really learned it. As programmers, we tend to want to pick up the next language (CFMX, .NET, ActionScript, PHP) and we forget about the building blocks of Web Development which are HTML/XHTML and CSS. That's for the designers. Or why we should worry about setting styles when we can so easily do it in the HTML tag attributes. It's just another paradigm and once learned, it's fairly easy. But it's not just about learning CSS Syntax, its about learning the box model, how items work together and how to gracefully degrade for non-standard browsers. MS: Which tools do you recommend to help create CSS? SC: My favorite tool is TopStyle 3 Pro from Bradsoft Software (http://www.bradsoft.com). Dreamweaver MX 2004 has added CSS specific features as well. Another tool that has just come out but which I haven't had time to play with is StyleMaster 3.5 by Westciv (http://www.westciv.com/style_master/index.html). This is a WYSIWYG editor that has had some good reviews. MS: That makes starting CSS much easier! Thanks for speaking with me. SC: Thanks Michael. See you at CFUN! |
 |
|
|||||||||||||||||
| Home | Topics | Speakers | Directions | Spread the Word | Register |
© Copyright TeraTech Inc 2003
405 East Gude Drive Ste 207 Rockville MD 20850
301.424.3903 Fax 301.762.8185 www.teratech.com
Please send comments/questions to [email protected]
For sponsorships or registration, please send comments/questions to liz-cfun04 (at) teratech.com