CFUN-04 Homepage
Central Location of ColdFusion Conference and Seminars
Home
Topics
Schedule
Sessions
Speakers
Directions
Spread The Word
Register Exhibitor Information Survey News Faq's blog Share cfun-04 photos




Professional Web Tools



















More Sponsors:












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


LINK TO CFUN & CFUN WILL LINK TO YOU!


Ben Forta




LouLex CFUG
Colder Fusion - Twin Cities ColdFusion User Group
SacCFUG - Sacramento, California ColdFusion Users Group
MMUG-Dublin UserGroup Meeting
 
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 michael@teratech.com
For sponsorships or registration, please send comments/questions to liz-cfun04 (at) teratech.com