CSS To The Rescue

[DTP Articles]
[Vector Articles]
[Bitmap Articles]
[Web Articles]
[3D Articles]

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]

[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]

you can help support the site with a direct donation or by shopping via the following links:


Thank you!



Understanding Cascading Stylesheets

Tom Arah explains and explores the significance of Cascading Style Sheets (CSS)

A recurring theme of these articles has been the inadequacy of the Web as a design-based publishing medium. To the print-oriented designer used to DTP and its all-encompassing and rigorous typographic control, the Web seems a bizarre world: what little design control there is always seems to be slipping through your fingers.

The reason is very simple. The underlying language of the Web, HTML, just wasn't developed with design in mind. As its name implies HTML is a language for marking up hypertext not formatting. Tim Berners-Lee developed HTML with one purpose only: as a supremely efficient way of getting users to the information they are looking for (hence his original name for the Web: "Enquire Within Upon Everything"). As such the fundamental HTML tag is the <a> anchor tag used to hyperlink separate web pages together to create the interconnected WorldWide Web.

The anchor tag is HTML's defining tag but of course it isn't the only one. Berners-Lee also devised: the <h1> to <h6> tags for marking up levels of heading hierarchy; the <ul> and <ol> tags for marking up unordered and ordered lists; the <blockquote> tag for marking up sections of quotation; the <cite> tag for inline citations and so on. What connects all these tags is the fact that they are logical or semantic rather than formatting based - each tag refers to its content not to its presentation. In other words, each tag is designed to achieve the same result as the anchor-based hyperlink: to help the end user to find and pull out meaningful information.

HTML was designed as a content-based markup language and deliberately said nothing about formatting, but the Web is a visual medium - to mean anything at all, the Web's information must be read. And, screen readers aside, it's only through its visual presentation that we can pick up the semantic significance of each tag. Essentially each tag must be formatted and presented differently or it might as well not be there. It's only because the <a> tag appears different to its surrounding text - usually blue, underlined and with a different cursor - that we can tell it's a hyperlink and that we can click on it.

When you imagine billions of pages of undifferentiated, unformatted text, you realize that the Web simply couldn't exist without typography. However, because HTML chose not to say anything about text formatting, the way that its tags are presented was instead determined by the browser developers. In many ways the formatting chosen was self-selecting based on common practice. The <h1> to <h6> heading tags are presented as emboldened and varying in size depending on their level; the list items in an <ul> tag are bulleted and grouped together; the contents of a <blockquote> tag are indented; and so on. A design platform of sorts emerged suited to presenting scientific information - exactly as Berners-Lee had originally envisaged it.

HTML 2.0's semantic tags were designed to mark up academic papers.

The problems came when the Web expanded into every area of life and designers tried to take tighter control - and found that it just wasn't there. Say they wanted to specify the size of a paragraph's text. Under HTML there's no way to do this absolutely by setting a point size as you would do in a DTP application; instead you have to choose whichever heading tag gives you the results nearest to those you want. The system's not just relative to start with. Thanks to their different pixel-based interpretation of point size, the type size that you chose on your PC system will look smaller on a Mac and vice versa. More to the point the eventual size also depends on which default text size your end users have set, which browser they are using, and even which version of which browser on which platform!

The differences between how browsers actually present the few, design-limited tags adds insult to injury and is the bane of the web designer's life. Rather than working to agree on a single standard however it was in the browser developers interests to accentuate differences to try and preserve market share (inevitably the end user blamed the other browser for perceived incompatibilities and failings). At the same time the browser developers began to develop their own proprietary tags to try and win market share. In particular by grafting on more advanced design-based features, Netscape and Microsoft both hoped to gain a competitive advantage.

The end result of these browser wars was a real threat that the Web would divide into two opposing camps separated by their "best viewed with Netscape" and "best viewed with Explorer" logos. The central principle of openness and universality offered by HTML was in severe danger. The solution put forward by the WorldWide Web Consortium (W3C) was a new HTML specification, 3.2, that deliberately ignored most browser-specific tags and attributes such as <blink> and <marquee>, but incorporated the most useful such as the "align" attribute which lets you left, right or centre align existing block level tags.

By far the most important introduction in HTML 3.2 was the incorporation of the <font> tag that finally officially offered the sort of control that designers had been crying out for. Using a tag such as <font face="Arial, sans-serif" size="7" color="blue"> you could specify a typeface family, size of text and type colour. What's more, you could use this to override the default semantic tag presentation or even apply your formatting to arbitrary sections of text completely independent of the semantically tagged content. On one level it looked like the designers had triumphed - the importance of presentation as central to the success of the Web was finally recognized.

But it was a hollow victory. To begin with HTML 3.2's formatting power was still incredibly limited. The ability to control colour was certainly useful but the ability to specify fonts was strictly limited (see RW98) and, while you could now specify type size, this was limited to just seven alternatives. It's hardly DTP-style control and that's before you remember that you have absolutely no control over character, word, line and paragraph spacing, let alone features such as background colour, ruling lines and so on. Worst of all, there was still no rigour. While the <font> tag let you specify a relative font size the interpretation of this still depended on the combination of platform, browser and version! With the combination of too few tags, too little power and no rigour or consistency it would be hard to come up with a less desirable design platform. No wonder many designers turned to GIFs and Flash.

HTML 3.2 was just as bad news for the HTML purists. In a way the original semantic vision of the Web had gone out of the window the minute that authors began using the heading tags just to increase point size and the <blockquote> tag not to mark up quotes but when they wanted to indent material. The real death-blow though was the <font> tag (and likewise the <table> tag which designers commandeered for layout purposes). Look at the source code for a typical HTML 3.2 page and you have to peer through reams and reams of formatting and layout tags to find the actual content. Worst of all, with embedded GIFs and SWFs being used to enable design-intensive text handling, important semantic content was entirely removed from the HTML.

With a lot of work, HTML 3.2 can produce good design results - but the semantic content gets lost.

HTML was in dire need of design capabilities but the extensions in 3.2 didn't offer enough power or control while at the same time endangering the Web's underlying content-based principle. It was the worst of both worlds and it looked as if, in the clash between style and content, both the design and semantic visions of the Web had hit a brick wall. Something needed to be done, but how could such opposing camps and visions be satisfied?

The answer was to recognize that the incorporation of design capabilities directly into HTML 3.2 had been a mistake - or rather a necessary evil to prevent the Web splitting - but that it couldn't be the basis for future development. Rather than extending HTML's formatting tags, the W3C's next specification, HTML 4, discouraged and "deprecated" the future use of all HTML-based formatting. It was a serious u-turn - after all the <font> tag had only just been officially recognized and now you weren't meant to use it.

Clearly version 4 was intended as a return to HTML's content-based roots - but where did this leave presentation? The W3C's stroke of genius was to delegate all formatting control to an entirely new markup language dedicated to managing presentation in the same way that HTML is dedicated to managing content.

The immediate advantage offered by Cascading Style Sheets (CSS) is far greater power. Now you can specify font, size, colour, alignment, style, background colour or image, borders and, crucially, all forms of spacing (word, line and paragraph). Just as importantly, you can set each of these attributes exactly as CSS supports a wide range of units - mm, inches, ems (for relative text sizing), points and even pixels. Now at last you can specify a 36-point heading with 40-point leading a 4-point ruling line above and 20-point spacing after. Using pixels as your unit you can even overcome the Mac/PC sizing problem.

The typographical power and rigour is desperately welcome but the implementation of CSS is even better news. The main way to apply CSS styling is through HTML 4's new <style> tag, but this isn't littered through the page content like the <font> tag. Instead the <style> tag is pulled up into the page's <head> element and used to define the formatting for an existing HTML tag. Enter the code <style>H1 {font-size: 30pt; color: blue}</style> and then click in the design window of your application and you'll see the text formatting change accordingly and consistently for all <h1> elements on your page.

One CSS stylesheet formats all instances on the page.

That's a huge advance in authoring productivity and code efficiency, but it's only the beginning. The real power of CSS comes into play when you entirely remove the formatting information from the current page and store it in an external CSS file. That way you can format any page with a single <link> tag, and format an entire site with a single central file. Often the formatting code for an entire site can be smaller than the myriad <font> tags from a single page! Even better, by editing this single external CSS file you can reformat the look-and-feel of your entire site safely and instantly. Imagine trying to do that with <font> tags and you begin to appreciate the true power of CSS.

And CSS has another important trick up its sleeve. So far the formatting power we've been talking about has been built on HTML's original tag framework - <h1> to <h6>, <blockquote>, <ol> and so on. But using the concept of classes, CSS can break free of this limitation and create any number of new formatting tags. Say I want to format the first paragraph of a story as Verdana bold and 12 pixels. All I need to do is to create another <style> element in the current page's <head> section: <style> .intro {font-family: Verdana, Arial, sans-serif; font-weight: bold; font-size: 12px} </style> (note the initial stop before the class name).

Now to apply the .intro class that I've just created all I need to do is to add the class attribute to the desired element, in this case <p class="intro"> (note that the initial stop has been dropped). Put the .intro class stylesheet into an external CSS and it will be available to any page that is linked to the CSS (in Dreamweaver you can apply it with a single click from the CSS Styles panel). Even more powerfully, by using classes with HTML 4's all-purpose container tags <div> and <span>, you can effectively create your own block-level and inline tags to control formatting that is completely independent of the underlying HTML tags.

It looks as if the HTML 4 / CSS combination pulls off the near impossible by solving all the design problems that plagued HTML 3.2. CSS provides: greater design power; greater cross-browser rigour; greater design consistency and flexibility; greater efficiency for authoring and rendering; and a way out of the HTML tag strait-jacket. With so many advantages you have to ask: why isn't CSS omnipresent on the Web? Why even now, over 6 years after the W3C released the first CSS1 specification, do the majority of new webpages still rely on the officially deprecated <font> tag for formatting?

The mystery deepens as CSS even manages to avoid the most obvious potential obstacle by offering backward-compatibility. Because all CSS formatting, apart from the <div> and <span> elements, is tied to the existing HTML tag framework, if the end user's browser doesn't support CSS then it will simply ignore it and present the underlying tag formatting. In other words you can't lose with CSS: users with up-to-date browsers will see the all-singing all-dancing CSS presentation; users with non-supporting browsers will see the unexciting but functional HTML 3.2 presentation. With so many cost-free advantages what could possibly hold CSS back?

In short: Netscape Navigator 4. While the developers of CSS had envisaged and catered for non-supporting browsers, what they hadn't taken account of was a browser offering totally half-baked support. Navigator 4 seemed to pick CSS features almost at random, made a quick stab at them and then moved on to the next. It was totally disastrous as it meant that, if you designed to the CSS specification, the results would almost certainly look like a dog's dinner in at least one of the two most popular browsers (Internet Explorer wasn't exactly perfect either) and could even lead to crashes!

The Web is the best source of information on buggy browser support for CSS.

Navigator 4 effectively sabotaged the launch of CSS and only now that its use has almost been eradicated from the system can designers begin to employ CSS seriously. Sadly browser support still isn't perfect and, as always, it's a good idea to check your CSS designs against all the major browser platforms (a program like Bradbury's TopStyle lets you do this from within Dreamweaver). Particularly disappointing is the fact that none of today's current browsers enable the end user to override CSS styles based on fixed units. This is crucial as it will finally enable the web designer to produce the best pixel-perfect and cross-platform design, while knowing that they aren't sacrificing accessibility for those with visual impairment or high-resolution screens.

Thankfully CSS support is always improving and the next round of browser releases should see most outstanding CSS problems tackled (the latest Navigator and Explorer already claim over 98% support for CSS1). More fundamentally, with the latest CSS3 specification, the W3C has sensibly chosen to break the CSS language down into more manageable modules. These bite-sized chunks should help the browser developers target their development resources more effectively. More importantly, by ensuring that no module is supported at all until it's fully supported, it should be possible to prevent one poor browser implementation from sabotaging the field for the rest.

The future for CSS looks bright and eventually there's little doubt that CSS will take up the central role it so richly deserves. What will drive this revolution however won't be the designer looking for more formatting power. The most important benefit of CSS comes for the non-designer. Because CSS works to remove all the formatting information from the <body> element, it means that the code can return to its original purpose: describing and structuring content. With CSS taking care of presentation, Tim Berners-Lee original vision of the semantic Web again becomes possible.

With external CSS styling, the HTML code can return to structuring content.

The next step towards this ultimate goal is XHTML (extensible HTML) which is the W3C-endorsed replacement for HTML 4. XHTML is still built on the core tags that Berners-Lee devised but otherwise all formatting is left to CSS (stricty no <font> tags allowed) with classes used to take more flexible design control. Looking beyond this, the next logical progression is XML itself. Here the in-built HTML tags are finally ditched and replaced by whatever semantic tags the user wants to define. Crucially, XML says absolutely nothing about how these should be presented and there are no browser defaults. In other words, without a dedicated styling language like CSS, XML appears as nothing more than a stream of undifferentiated text.

In fact by the time that XML browsing is on the cards, CSS will most probably have been replaced by XSL:FO (eXtensible Stylesheet Language Formatting Objects) a styling language itself written in XML. That's still a long way off however, and for the foreseeable future CSS has the field to itself. If you haven't begun using it already, it's definitely time to start. CSS acts as the bridge between the HTML of the past, XHTML of the present and XML of the future. More importantly it acts as the enabler not just of the presentation-rich Web that designers have long dreamed of, but of the semantic Web that Tim Berners-Lee originally imagined.

Before CSS, the conflicting demands of content and presentation threatened to destroy the Web. Thanks to CSS, they can work together: completely separate but absolutely hand-in-hand.

Tom Arah

July 2002

Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Web designer-info.com

designer-info.com: independent, informed, intelligent, incisive, in-depth...

All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah

[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.