Web Styling

Ray Toal

Loyola Marymount University

2004-10-06

Outline

Motivation
Web Standards
CSS
XSLT
XSL-FO
Summary

What This Talk is About

Why Web Standards are Important
Modern Design
Different Brow^H^H^H^HUser Agents
Different Media
Examples

What This Talk is NOT About

Evangelization (You already know that font tags are bad)
Browser Compatibility Charts (You already know IE is slipping bad)
Using Photoshop
Commercial Products
Flash

For the millionth time...

Separate content, presentation and interactivity

More Oft-Repeated Advice

Not just different browsers, but different media!

Browsers

Gecko   Mozilla
        Firefox
        Netscape
        Camino (OS X)
        K-Meleon (Win32)
        Galeon
KHTML   Konqueror (Unixes)
        Safari (Apple)
        OmiWeb (Apple)
Opera   Opera
IE      MS Internet Explorer
        (Other niche browsers)
-       Lynx
-       Amaya

Media

screen
print
projection
tty
tv
handheld
braille
embossed
aural

What are "Webstandards"?

A philosophy that uses the W3C standards the way they were meant to be used

Semantic, not presentational markup
Validation of XHTML, CSS and JavaScript
Using the DOM properly
Accessibility!

Webstandards deliever: sites have far less code, better maintainability, work on all user agents, ...

A First Example

This is the XML source code:

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="verysimple.css" title="simple"?>
<?xml-stylesheet type="text/css" href="ghastly.css" title="ghastly"?>
<?xml-stylesheet type="text/css" href="nicer.css" title="nicer"?>
<note>
  <title>Some Web Technologies</title>
  <intro>In the old days, designers used HTML tables
  and transparent GIFs to lay out webpages.</intro>
  <text>Today we use style sheets to separate the content
  from the presentation.  Style sheets go way, way,
  beyond what could be done with tables, font elements
  and spacers.  Designers now have complete control
  over layout down to the pixel level.</text>
  <text>Of course, liquid layouts are usually best, but
  that is a topic that will be addressed later.</text>
  <technologies>
    <tech><name>XML</name><year>1998</year></tech>
    <tech><name>XHTML</name><year>1999</year></tech>
    <tech><name>CSS</name><year>1996</year></tech>
    <tech><name>XSLT</name><year>1999</year></tech>
  </technologies>
  <author>Ray Toal</author>
</note>

View this xml file and note that it has three stylesheets attached. (Don't use IE for this :-)

What Was That Last Style Sheet?

That's right - it had tables!
View the stylesheet
By the way, use table styling for tabular data, but for layouts, floating and positioning is the modern way.
How come that looked so bad in IE?
- IE doesn't do the alternate stylesheet thing. Use some Javascript if you want to swap stylesheets dynamically. LEFT AS AN EXERCISE FOR THE READER!

Oh, But What About XHTML?

Oh, right, XHTML gives you a lot of elements already.
They save you work, I guess.
But XML gives so much semantic clarity.
But don't despair, you can always use div and span!

What are the Important Things About CSS?

Media Types
Connecting to Documents, and the Cascade
Style Sheet Syntax and Terminology
- Rulesets, selectors, properties, values
Kinds of properties:
- Display Properties
- Layout Properties (the "box model", floating, positioning)
- Text Properties
- Other Properties (e.g. lists, tables, generated content, paged media)
- Aural Properties (not in CSS 2.1)
Datatypes (values):
- numbers, strings,lengths, percentages, uris, counters, colors, angles, times, frequencies

Know Your Selectors

Selector	Matches
*	Any element
e	Any e element
e1 e2	Any e2 that is a descendant of an e1
e1 > e2	Any e2 that is a child of an e1
e:first-child	Any e that is the first child of its parent
e1 + e2	Any e2 immediately preceded by a (sibling) e1
e#i	The e with id i
e[a]	Any e that has an attribute a
e[a="v"]	Any e with an attribute a with value v
e[a~="v"]	Any e with an attribute a that is a space-separated list of values, one of which is v
e[a\|="v"]	Any e with an attribute a that is a hyphen-separated list of values, one of which is v
e.c	Same as e[class~="c"] (HTML only)
e:active e:hover e:focus	e during the action
e:link	e if e is the source of a non-visited hyperlink
e:visited	e if e is the source of a visited hyperlink
e:lang(c)	e if the document has associated language c with e

There are some pseudo-classes used as selectors, too, like :before, :after, :first-letter, :first-line.

CSS 2.1 Properties

Text and Fonts:font font-{family,size,weight,style,variant} line-height letter-spacing word-spacing text-align text-decoration text-indent text-transform vertical-align white-space
Colors and Backgrounds:color background background-{color,image,repeat,position,attachment}
Boxes:padding padding-{top,right,bottom,left} border border-{top,right,bottom,left} border-style, border-top-style, border-right-style, border-bottom-style, border-left-style border-color, border-top-color, border-right-color, border-bottom-color, border-left-color border-width, border-top-width, border-right-width, border-bottom-width, border-left-width outline outline-{style,color,width} margin margin-{top,right,bottom,left} width height min-width max-width min-height max-height
Positioning:position top right bottom left clip overflow z-index float clear
Display:display visibility
Lists:list-style list-style-{type,image,position}
Tables:table-layout border-collapse border-spacing empty-cells caption-side
Generated Content:content counter-increment counter-reset quotes
Paged Media:page-break-before page-break-after page-break-inside orphans widows
Misc:cursor direction unicode-bidi

Display Properties

inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption

Kinds of Layouts

Some described at http://glish.com/css
- No real layout (1 column fluid)
- Static width and centered
- Width based on ems, and centered
- Simple 2-column
- Three column layouts (many varieties)
- Nested Float

Floating and Positioning

Getting ALL the styling out of your document makes you feel good.
Many designers would rather die than use a <font> tag, but they still use tables for layout!
The tide is turning, though: "table-free" layouts are becoming more popular.
Use the float and position properties to achieve this.
- float: left or right
- position: static, absolute, relative, fixed
There are hundreds of tutorials and writeups on table-free layouts on the web. The CSS Zen Garden is an interesting study.

CSS Tips and Tricks

I could make my own list here, and if I did, I might make the first entry be: "Prefer liquid (fluid) layouts -- design with relative lengths, not absolute ones."
But many people have great tip sites.
A good one is at the W3C site itself: http://www.w3.org/Style/Examples/007/

Image Replacement

Okay, we should look at at least one concrete example technique. You want text in the markup (for robots and accessibility), but you want the text to look beautiful...

The original method (FIR) was due to Fahrner, but there are now many alternatives (FIR has accessibility concerns). Here is the Leahy/Langridge method. In HTML:

<h3 id="header">Hello, World</h3>

In CSS (note the box-model hack to support IE5)

#header {
  padding: 25px 0 0 0;
  overflow: hidden;
  background-image: url(helloworld.gif);
  background-repeat: no-repeat;
  height: 0px !important;
  height /**/:25px;
}

Designing for all Browsers

It won't be pixel perfect but you can make it look good
This topic is synonymous with "do this workaround for IE"
IE has many famous bugs
- Completely wrong interpretation of box model in IE/Win 5.x: padding and border within the width, rather than added to it (workaround - nested divs, parsing bug exploit)
- IE6 bugs: Guillotine, Unscrollable Content, Peekaboo, Doubled Margin, Duplicate indent, ... (see http://positioniseverything.net/explorer.html)

CSS 3

Modularized
New attribute selectors: (^=, $=, *=), lots more pseudo-elements and classes.
Opacity (0.0=fully transparent, 1.0=fully opaque)
Standardized image replacement {display: icon} (of course!)
Box shadows, text shadows
Control over window resizing
Speech Module (much like the aural stuff that was in CSS2)

XSL

Originally the idea was to style XML documents with an XML-based stylesheet language. It was to be called XSL.
It was split into XSLT and XSL-FO.
The idea was to use XSLT to transform the XML into XSL-FO, but, for the web, use XSLT to make XHTML!
This is usually WAY better than styling XML directly, because you can massively rearrange the XML during transformation, and (get this...), you can deal with attributes.

An XSLT Example

A document:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="people.xsl"?>
<people>
  <person id="123">
    <first>Masha</first><last>Yuen</last>
  </person>
  <person id="44">
    <first>Armen</first><last>Gomez</last>
  </person>
</people>

The stylesheet:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <head>
        <title>Some folks</title>
      </head>
      <body>
        <xsl:apply-templates/>
        <hr />
      </body>
    </html>
  </xsl:template>
  <xsl:template match="person">
    <p>
      <xsl:value-of select="last"/>,
      <xsl:value-of select="first"/>
      <span style="color:red">[<xsl:value-of select="@id"/>]</span>
    </p>
  </xsl:template>
</xsl:stylesheet>

XSL-FO

Well, this is really a talk on Web styling, so there's not much to say about this.
XSL-FO is better for print.
You might as well transform XSL-FO into PDF...
Stick with CSS for the web, at least for now.
If you are interested, see http://www.w3schools.com/xslfo/ for a tutorial.

Resources

Someone's done the work for me!
The ultimate set of links for Web Design (CSS, mainly) is

http://www.dezwozhere.com/links.html

Worth mentioning: CSS Zen Garden, Maxdesign, Westciv House of Style, CSS Vault, BrowserCam, Strange Banana, anything by Eric Meyer or Jeffrey Zeldman or Molly Holzschlag.

Summary and Other Closing Thoughts

Webstandards have real advantages
Web Design has changed a lot in the last few years
IE causes headaches
Stay current or lose your job