I have a love hate relationship with CSS, also known as cascading style sheets. I recognize the benefits of building a web site using CSS for layout and design, but it’s easier to say CSS than it is to use it. Thankfully, my Mac also has the best possible application for using CSS. MacRabbit’s CSSEdit may be one of the best design tools available.
At a basic level, it appears to me that a web site is made up of a handful of major, sometimes conflicting components. Here’s my list of the basics.
STRUCTURE
First on my list is the structure of a web page, usually managed by HTML or XHTML, various versions of the hypertext markup languages. A web page uses hypertext to hold the content being presented to the reader, whether textual, graphics, or other elements such as a movie.
There’s a reason why web pages don’t look as good as printed pages in magazines. Each web browser interprets, or renders the (X)HTML according to how the browser developer views the standards.
That’s why Microsoft’s Internet Explorer is so hated by many web site designers, and why pages rendered in Internet Explorer often look different than the same page in Mozilla’s Firefox or Apple’s Safari. Microsoft doesn’t like adhering to web standards.
Still, structure is necessary to hold the content we want to display in a web page. How many versions of (X)HTML are there? Too many. 4.01 seems to be the most popular, though 5.0, still in the working stages, has gained more support. PixoBebo uses XHTML 1.0 transitional (whatever that means).
CONTENT
We got a web page to read or view content, which, in the past, was often intermingled within the HTML structure of tags. What a mess.
We’re in the age of dynamic content which does a better job of separating the Structure of a web page from the actual content. PixoBebo’s content stays in a database, separate from the XHTML and CSS, which, for what it’s worth, also stays in a database until it’s time to build a web page for your browser.
The idea of separation of Structure and Content is important so that the content can be available to be used again when the design and layout of a site changes or adopts new standards in the future.
DESIGN
The final element in a web page is the Layout and Design, typically using cascading style sheets, CSS. That’s where MacRabbit’s CSSEdit comes in.
To many of us, CSS is a four letter word. It’s arguable, but I find CSS to be more complicated than XHTML, partly because of the way elements are constructed, cascade, and can be used to build structure and yet manage design—at the same time.
PixoBebo is built using my first attempts at cascading style sheets, and the chosen tool is CSSEdit. CSS holds the information which determines a site’s color elements, section layout, fonts and sizes, background images, and much more.
Again, CSS is used in the structure of a page within XHTML, yet remains a separate component. Did I mention that CSS is a four letter word?
The CSS Editor
CSSEdit makes using CSS on a web page much less painful. It’s the Advil of CSS editors. Or, morphine, depending on how things are going. You still have to know something about CSS, so scour the web, buy a book or two, but make sure your Mac has CSSEdit.
The most important aspect of CSSEdit is the ability to preview your code. Live. CSSEdit contains WebKit, the guts of Apple’s Safari, so what you see is what you get. Want to change a font? You’ll see the changes immediately.
Even better, CSSEdit will let you edit the style sheets of another site. Live. Almost. Open CSSEdit, enter a web page URL into the browser. You’ll see the selected web page show up.
In the CSSEdit style sheet selector, the floating charcoal window, select the style sheet associated with the web site. Any edits you make to the style sheet will show up instantly on CSSEdit’s browser page (not on the live web site, of course). That is an ultra cool feature and a great learning tool.
Even better is the Xray Inspector. Click to turn on the Xray Inspector, then click on any component in the CSSEdit browser. It will highlight the CSS used for that component, or section of the site. Fonts, backgrounds, links, images, whatever.
Click on the same element listed in the Xray Inspector and it highlights that element in the CSSEdit editor. It’s the best $46 I’ve ever spent on a Mac application. I could go on for another 1,000 words and describe the built-in wizard that walks your through CSS selector and element construction, but it’s a free download and you get to use it for free, so that’s my ultimate recommendation.
Just don’t forget that CSS is a four letter word and learning to use CSS effectively can make a person swear like a sailor.