CSS : Java Glossary

2008-07-03 by Roedy Green ©1996-2008 Canadian Mind Products
index page for letter ⇒ punctuation 0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z (all)

The CurrCon Java Applet displays prices on this web page converted with today’s exchange rates into your local international currency, e.g. Euros, US dollars, Canadian dollars, British Pounds, Indian Rupees… CurrCon requires Java 1.1 or later, preferably 1.6.0_07. If you can’t see the prices, or if you just want to learn more about CurrCon, click here for help.

CSS

Cascading Style Sheets. A feature of HTML 4 where you can specify your formatting in one place and have it propagated, e.g. so you can decide in one place how all headings should look. You can have layers of style sheets that override each other.

Why Use CSS?

There are four main reasons to use CSS instead of HTML for your markup:

It is easier to change your mind about style decisions. You change one line in a style sheet and instantly your whole website conforms to the new look.
Web pages are shorter and hence download faster without all that detailed HTML markup in them. You specify your presentation decisions once in the style sheet, rather than in every heading in every web page.
You have finer control of just how the web pages look.
It is possible to merge the needs of author and viewer, e.g. deal with colour blindness, poor vision or the needs for printed documents without having to create separate web pages.

It is very important that if someone came along and deleted your style sheets, and took out every <span tag, class=and style= from your HTML files, your web page still should render in a reasonably intelligible way. When you follow this rule, people with non-CSS browsers can still view your web pages. Further, it is possible to create alternate style sheets to display the same data in many different ways. You might not be the author of these style sheets. Special style sheets to compensate for various disability can be composed if you adhere to this cardinal rule. One way of think about his, you should first do you markup without CSS, (and without <font tags, in a very straight forward way. When you have that looking decent and validated, only then start adding your styles to tart it up. Don’t take this too literally. After you have your scheme working, you add your style markup as you compose.

Separate Style Sheets

You can include a link to a standard set of styles in your document. This way when you update the single copy of your styles, all your documents on the website instantly conform to the new styles, e.g. by putting lines like this in your header section up with the meta tags. You can have multiple style sheets per page.

<link href="mindprod.css" type="text/css" rel="stylesheet" media="screen">
<link href="jdisplay.css" type="text/css" rel="stylesheet" media="screen">
<meta http-equiv="Content-Style-Type" content="text/css">

This is the normal way to handle style sheets.

Embedded Styles

Here is an example of the sort of thing you can specify up in the <head> section:

<!-- a mini style sheet embedded in the header -->
<style type="text/css">
h2, h3 { font-family: Arial,Helvetica,sans-serif; }
body { background: white; }
pre, tt { color: #333333; }
th { background: tan; }
</style>

Normally you use this technique to add to the standard style sheet styles that appear nowhere else but this page.

Embedded Markup

You can also put CSS style information right in the middle of your HTML. It then applies only to one element. Generally you do this only for experiments or something definitely one-off. e.g.

<span style="font-variant:small-caps;font-family:'Tiresias PCFont Z'">
This will show up in small caps.</span>

When you use embedded styles, you must use ' instead of " e.g.

CSS Vocabulary

A typical CSS style sheet rule looks like this:

h2 { color : blue; }

It means render all h2 headings in foreground colour blue.

selector (CSS): The h2 in the example rule above is called the selector because it selects which tags this rule applies to. A user defined-class uses a selector like .strawberry. A user defined class only when applied to a <td> tag uses a selector like td.strawberry.
property (CSS): The color in the example rule above is called the property. It is attribute of the rendering we are controlling.
value (CSS): The blue in the example rule above is called the value because it is the setting of the attribute we desire when rendering.
font style: refers to normal, italic or oblique. Italic has curly cues suggesting handwriting, where oblique is merely slanted.
font variant: refers to none or small caps.
font weight: refers to normal or bold. You can also specify it as a number where 500 is normal and 600 is bolder and 400 is lighter.
marker (CSS): is the bullet or number, usually used with a <li>.
text decoration: refers to none, underline, overline, strikethrough and shudder, blink.

Style Names

You can make up your own style names, always lower case (because some browsers are case-sensitive, and some are not), much the way you would in Microsoft Word styles. Such names begin with a dot. To apply such a custom style, (e.g. whimsically called .frog style) you use some HTML like this:

<span class="frog">&hellip; </span>

Note the there is no dot before frog when you used the tag, just when you define it.

Tables

If you wanted to invent your own special kind of TABLE called a gridmenu, you could define it like this in your style sheet:

To use this style, you add a class parameter to the table tag like this:

<table class="gridmenu">

and all the text in the table will use those defaults. You no longer use any of the traditional HTML tags in your <table commands such border="0" cellpadding="4" cellspacing="4".

To control the outer perimeter of the table you attach styles to table.gridmenu. To control the perimeter of the individual cells, you attach cells to table.gridmenu td.

You can define styles based on context, e.g. how a td renders differently inside a table or inside two or three levels of table. You can specify every imaginable combination of styles of the nestings.

Make sure you have all the combinations defined that you need.

Colours

Unfortunately, CSS officially supports only the 16 HTML 3.2 colour names. Of course, you can use the #ffffff style specifiers, to get any of the 16,777,216 possible colours.

Click any ball to view the corresponding colour palette.

Named Colours	Alphabetically (113)	BHS: by Brightness, Hue, Saturation	HBS: by Hue, Brightness, Saturation	SBH: by Saturation, Brightness, Hue	Java AWT Colours (16,777,216)
Named Colours	RGB: Numerically (113)	BSH: by Brightness, Saturation, Hue	HSB: by Hue, Saturation, Brightness	SHB: by Saturation, Hue, Brightness	Java Swing Colours (16,777,216)
Numbered Colours	HTML 3.2 (16)	Websafe (216)	Rainbow (4096)	Spectrum (401)	X11 (657)
Selected Colours	Pale (256)	Dark (2022)	Simple (105)	Greys (256)	Colour Schemes

Monkey See, Monkey Do

If you are curious about the styles I use, download mindprod.css and download jdisplay.css. They are commented so you can see how I pulled off the various tricks I used on my website. Experiment with features. Nothing will explode. Sometimes that is much easier than understanding explanations of what they do.

Look for websites that display this logo and study their html and their style sheets to learn how these tools are used in practiced. I switched over the mindprod.com site over to use them. You can specify styles that only take effect under special nested conditions. You can override styles with more styles or with ordinary HTML tags. There are currently two CSS standards, CSS1 and CSS2. CSS2 has many more features, including the ability to specify different styles for display on screen and for printing. It also allows you to include fonts with your document.

CSS is actually much easier to learn and much less work to apply than the old system. The philosophy is different. You don’t mix your style and text information. You put all your style thoughts in one place to be globally applied. You mark up your text with what flavour of thing each chunk of text is, not how it is to be painted. The biggest problem is you can make syntax errors, and nothing complains and nothing happens. E.g. it is color not foreground-colour. It is margin-left: 100px not left-margin: 100 px, font-size: 125% not size: +25%, padding-top: 6pt not top-padding: 6 pt.

Fonts

The styles to select the font include:

Here is a typical example of how you might attach a font to a tag.

// example of how you might attach font attributes to a tagging class.

.bushsaid  {
        background: transparent;
        color: #552500 /* dark brown*/;
        font-family: "Lucida Console",courier,"courier new",monospace;
        font-style: italic;
        font-weight: bold;
}

The Font Combo Tag

There is a short cut in CSS to combine many font tags into one line that looks like this:

The main reason to use it is not brevity, but that many browsers still do not support the long form. You might wonder how the parser tells a font family called larger from the keyword larger. You can enclose the font family name in quotes.

Padding, Border and Margin : (PaBluM)

The most baffling thing about CSS is understanding padding, border, border-spacing and margin. They all sound like the same thing.

box explanation

explanation of css margin, border, padding

Working from the inside out:

Padding
is space around the content between the content and the border. If you created a button class, the padding is the width of the coloured space around the text.
Border
is some sort of decorative line around the content.
Margin
is a clear area around the outside. Oddly, this can be negative. If you created a button class, the margin is the width of the clear space around the outside of the button.
Border-Spacing
Space between cells in a table. Unlike the other attributes, it must be applied to the table as a whole, not the individual cells.

You can remember the inside-to-out order with the mnemonic pablums.

If you don’t have a rule around the item, just ignore the border and margin, and use the padding fields.

CSS Padding and Border

Java Insets

	1. top ⇒
4. left ⇑		2. right ⇓
	⇐ 3. bottom

	⇐ 1. top
2. left ⇓		4. right ⇑
	3. bottom ⇒

Beware, the CSS border and padding specifications are ordered clockwise:
top, right, bottom, left.

You can help remember this by thinking CSS and clockwise both begin with C.

Java Insets, in contrast, are ordered counter clockwise:
top, left, bottom, right

To adjust margins and padding you need to measure how far off they are. This is most easily done with a virtual ruler. If you just guess, you can spin your wheels for hours.

What happens when you have a margin around an element? Is the margin ignored or is the box indented when it occurs at the start of a line. Let’s find out:

box with 10px padding and 20px border

Oddly, the additional margin is honoured on the left, with the border indented 20px, but not on the top and bottom. What happens when two such boxes butt against each other. Is the margin considered a minimum approach distance where the separation would be 20px, or a inviolate additive force field where the distance is the sum, namely 40px? Let’s find out:

box with 10px padding and 20px borderanother box with 10px padding and 20px border

The margins are additive, the borders are separated by 40px.

text-decoration

/* text decoration */

.nounderline { text-decoration : none /* get rid of underline */; }

.underline { text-decoration : underline /* underline */; }

Display

Have fun with this attribute. You can set in to any of the options on any tag, not just the expected combinations. The most useful settings are:

Alignment

You can align your text (and embedded images) horizontally with:

text-align:left
text-align:right;
text-align:justify;  // flush on both left and right
text-align:center;   // watch the American spelling

You can align your text vertically with:

See examples of what the various alignments should look like. See also float.

Float and Clear

The float property lets you float the text out of the stream to create an aside bubble that the rest of the text flows around. clear:left;, clear:right; or clear:both; lets the marked text avoid flowing around such a bubble on the left or right or both, preferring instead to start after it. You can float:left float:right or float:none;. See also alignment.

Position

The position property lets you shift the text away from its usual placement.

Possible values for the CSS position property
position:static;	default positioning
position:relative;	relative to where the text would normally appear, controlled by the independent top, right, bottom and left properties which can be specified in various units including pixels, ems and percentages. Note, you don’t specify the offsets on the position property. They are specified on their own independent properties.
position:absolute;	means relative to the top left corner of the enclosing element.
position:fixed;	relative to the top left corner of the screen. For example, fixed is used for headings that don’t scroll while the rest of the document does. Use these in conjunction with width, height, min-width and min-height properties for many different effects.
position:auto;	asks the browser to compute the value so that the other properties are satisfied.

float:left; float:right; and float:none; are yet another positioning tool. They do extreme positioning.

These tools let you rearrange text, so that it renders in a completely different order. For example, you can embed a span tag in a paragraph that puts a marker to the left of the beginning of the paragraph.

You can also do things like put the text to load an ad last on the page, but use absolute positioning to place it near the top of the page, effectively letting you design in layers. That way it will the lowest priority for rendering, but still be at the top of the page.

There is the related background-position: property, which can be contracted into the background: property. Default value: 0% 0% (x% y%). The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.

For integers 0,0, the first value is the horizontal position and the second value is the vertical. The top left corner is 0, 0. Units can be pixels (0px 0px) or any other CSS units. 0 must be written without units. All other values must have a unit. If you leave the unit out, you won’t get an error message. Your property will most likely be ignored.

With percentages or integers you specify x first then y, but when you use words like center and left you normally specify the y positioner word before the x positioner, e.g. center left, as all the examples are shown. However, the W3C spec says order should not matter. Note also that center, not middle, is used for the y positioner to be consistent with the align tag.

The background-postion property can have values like this:

Possible values for the CSS background-position property
Position	Appearance on Cell	Appearance on Unpadded Text	Notes
background-position:top left;	style on cell <td	style on text <span	background image upper left corner aligns with upper left corner of the box. Note you specify the y positioner before the x positioner when you use words.
background-position:top center;	style on cell <td	style on text <span	background image is aligned with the top and centred.
background-position:top right;	style on cell <td	style on text <span	upper right
background-position: center left;	style on cell <td	style on text <span	middle left
background-position:center center;	style on cell <td	style on text <span	centred
background-position: center right;	style on cell <td	style on text <span	middle right
background-position:bottom left;	style on cell <td	style on text <span	bottom left
background-position:bottom center;	style on cell <td	style on text <span	bottom centre
background-position:bottom right;	style on cell <td	style on text <span	bottom right
background-position:0% 100%;	style on cell <td	style on text <span	order x, y. 0% means the upper left corner of the background image is positioned as far left or as far up as possible. 100% means as far right or as far down as possible. 50% in the middle. I have not experimented with numbers less than 0 or greater than 100. Don’t mix % with word values.
background-position:20px 10px;	style on cell <td	style on text <span	background image is positioned 5px to right of normal position and 10 px down.
background-position:-10px -5px;	style on cell <td	style on text <span	background image is positioned 5 px to left of normal position and 10 px up.

Note that background-position just positions the background image, not the text. Normally you also want to move the text around too to make it avoid clashing with the background image. You do that with position, padding and margin. You often have to extend the padding to include room for the shifted background image. Often your images will disappear entirely if you shift them too much.

There are four problems to solve when you use background images.

Position the image, using background-position.
Make sure there is sufficient room for enough of the background image to show using padding, min-width and min-height.
Optionally moving the text out the way so it does not obscure the image. Do this with padding. The image will not display outside the padding area.
Making sure there is adequate white space around the image, using margin.

The best way to understand this is just experiment with the parameters and see the effects. It will be easier if you focus on one of the four aspects at a time.

White Space

In HTML you may have bludgeoned elements into position using <p>, <br>and possibly even dummy space gifs. In CSS, you position with much more finesse, using only the style sheet, not the HTML markup. Other than the positioning, padding and margin tools I described earlier, you have a two more tools: white-space:pre and white-space:nowrap which have the obvious meanings.

Philosophy

Avoid marking every element with a class. For example, I have a rule on table.gridmenu td rather than assigning a separate class to the td. Try to keep your markup as simple as possible, even when it complicates your style sheet. Try to do as much of your style assigning by context, rather than explicit class assignment.

Mixed Marriages

It can be difficult to go cold turkey converting your entire website to pure CSS. It will always have a mixture of HTML and CSS control. If, for example, you say <td align="right"> in your html, but in your style sheet specify td { text-align : left ; }, they have to duke it out. CSS will usually win.

Browser Support for CSS

The best browser for CSS is Opera. The worst is Netscape 4.79. Netscape 4.79 has many bugs, including failing to support font-families in tables, only in TD tags. The newsgroups are full of messages from frustrated people wondering why Netscape gives different displays from the other browsers. Happily, Netscape 4.79 is not much used anymore.

The Netscape 8.1 is much better. Internet Explorer too has many bugs. The one that annoys me the most is it ignores your style sheet entirely if you include a metatag like this:

Other bugs are it ignores min-height and it can’t render png images with transparent backgrounds correctly. Opera is relatively bug free in CSS, and is faster that Netscape and IE, but not all plug-ins work with it, and it has bugs in forms and JavaScript. You might consider using Opera to get your CSS working, then switch over to dodge the bugs in the other browsers.

Beware of background-color: inherit. It is not well supported, and can lead no strange behaviour like non-repeating elements that repeat just once.

All the major browsers ignore <col class= and all but opera ignore <col align=. Last revised: 2007-04-27

The Web Standards Acid test for CSS shows Opera to be perfectly in compliance, Sea Monkey and Netscape with minor probls, Firefox with serious problems and IE as hopeless.

Gotchas

CSS is user-hostile. The renderer in the browser never gives you any error messages. Most often why you try some CSS, usually on the first few attempts the browser ignores your new rules, but sometimes you get some strange renderings. CSS rendering is utterly inscrutable. The browser rendering engine never explains its actions which are a complex interaction of many rules. CSS becomes a black hole for time trying effect the tiniest adjustments. You can’t even adjust a margin visually. What is worse, when you fix one thing, usually something else stops working. You have to re-verify the entire website by eye to see that CSS has not come up with new screwy rendering. It is like dealing with some fiendish lawyer constantly deliberately misinterpreting the intent of your words. Common errors include:

background-color is not the same as background. background-color specifies just the colour of the background. background lets you specify several other attributes as well, including the url.
Leaving a space in a selector like td .strawberry instead of td.strawberry
It makes a huge difference to CSS where you apply the style. Depending on your style sheet, all these similar markups might render differently. Sometimes it pays to experiment moving your markup to a different nesting levels if you are having trouble getting the effect you want.
putting a semicolon in the middle of a line like this:
background: url(image/caution.png) #ffffcc; no-repeat scroll 3px 3px !important;
Getting your {} unbalanced.
the keyword is !important not important! or just plain important. This is doubly peculiar to the Java programmer used to ! meaning not.
CSS frequently stubbornly ignores your style. Sometimes it turns you made an error in the HTML markup. Validate your HTML markup before you start pulling out your hair in frustration over CSS.
Perhaps the most confusing thing is inheritance. You will find for example a custom bullet you applied to <ul> showing up on a nested <ol> in place of the usual decimal. This is because nested elements inherit all possible attributes from the enclosing elements. You must find a way to explicitly turn attributes back to their defaults if you have modified them for an enclosing element. All tags support all attributes, even ones you would normally consider utterly irrelevant, so the interactions between layers of nesting are far messier than you might suppose.
You can’t define a CSS selector like input.query because your <input class="query" will just be ignored. You must define it as simply .query instead.
The biggest problem with CSS is what I call the whackamole gotcha. As soon as you fix some problem, this disturbs the system is some subtle way, and some other tenuously related part of your style sheet or markup will stop working. You have to keep testing and retesting. There are so many subtle interactions it is very difficult to find a style sheet that will behave the way you want everywhere. There are no error messages. It is like building a house of cards. You must keep scanning and rescanning how various browsers render your website by eye. There are no equivalent to Java assertions to catch problems.

Multiple Style Sheets

You can provide alterate style sheets and let the user choose which one he likes best — e.g. big and small print, different colour schemes. The browser must support it.

You can also provide multiple style sheets where the two are merged, e.g. one for your website and one for a particular section of the website with a few overrides.

Inheritance

You should apply styles about intercell spacing to the table, but styles about the margins and borders of an individual cell to the td. tds will not inherit such styles from the table or tr.

Selector span.frog

<td><span class="frog">some text</span></td>

is a quite different animal from selector td.frog

<td class="frog">some text</td>

even when the span is inside a td.

Some styles will inherit, e.g. font-face, which will provide the default for td if applied to the enclosing table.

Firefox has a great tool called Firebug for understanding inheritance. You just point at an element on screen in your browser and in a window it shows you the HTML that generated it, and in another windows shows you the which css rules were used to do the rendering. Rules that were overridden are shown with a strikethrough. This is an extremely useful tool.

Fixed Links

One of the big advantages of CSS is you can refer to an frequently used icon by a constant name. You don’t have to keep adjusting it relative to the current page.

When I refer to an image in a style sheet e.g.

body.ringbinder /* simulates a ring binder with rings down the left */ {
background : url(image/binderbackground.png) #FFFFFF Repeat-y;
color : #000000;
font-family : "comic sans ms",Arial,Helvetica,sans-serif;
margin-left : 100px;

You specify the url relative to the style sheet. If you use conventional HTML, you must constantly adjust the URL relative to page it is referred to e.g. image/binderbackground.png or ../image/binderbackground.png, or ../../image/binderbackground.png. When you use an image in CSS, there are four advantages to using them inline in HTML:

You don’t need to adjust the relative offsets in each page for the URL.
If the image changes size, you don’t have to change anything.
If you decide to change the image’s name, you have to change it in only one place, the CSS style sheet.
Changes to the image name or size don’t force you to modify, redate, and upload all the pages that use it.

Orthogonality

Using the style sheet, you can pretty well put any combination of attributes on any tag, unlike regular HTML. Advanced users could even make <td> tags render as if there were <li> or vice versa. In CSS, the standard tags are just a set of useful default variants all implemented with the same generic mechanism. You can change anything.

TopStyle is a program that lets you edit style sheets. It mainly just lists all the possible attributes and lets you fill in the ones you want for each style. You soon discover there are hundreds of possible attributes you can apply to a style. Further, you discover, that unlike HTML, you can apply any attribute to any tag, even tags like <a, <img and <applet. This makes CSS much more flexible than HTML.

You can, for example, fudge the way text and images align vertically together with the vertical-align attribute. You can add that to any style.

Don’t worry too much about understanding what all the style attributes mean. If you see something promising, try setting the attribute to all of its allowed values and look at the results. You will figure it out much faster than if you try to make sense of the lawyerly W3C specification prose. The trick is finding likely candidates in the overwhelming sea of possibilities, and remembering to try them at the table, row and cell level to see the varying effects.

The other thing to keep in mind is you must be brave and try out unlikely combinations. Coming from a standard HTML background, you may be too timid to try attributes you have traditionally associated with only one tag on another.

The orthogonality is most clear when you see the definitions of all the selectors in the W3C default CSS style sheet (which browsers don’t necessarily use.) You can see how the special behaviour of each tag is created simply by assigning the tag standard properties.

Sometimes this orthogonality will get you in trouble. For example, the bullets in unordered lists are, under-the-hood, really just a specialised background image. You may confuse your browser if you try to use both a background image and a bullet (or bullet image) on the same block of text.

Avoiding Cut and Paste Cloning

If you cut and paste to create new classes out of old ones, you will have a lot of duplicate properties. If you change your mind, you will have to make changes in many places. Here is a trick to avoid that.

 /* here is how to avoid duplicating properties common to many classes */

  .titlejgloss, .titlebgloss {
     /* add properties that apply to both classes */
  }
  .titlejgloss {
     /* add properties that only apply to titlejgloss */
  }
  .titlebgloss {
     /* add properties that only apply to titlebgloss */
  }

Precedence

The rules you specify in your stylesheet may conflict. What should the browser do if a piece of text is marked both an orchid and an onion style? Which style’s colour and other attributes should it use, or some merging of both?

The precedence goes like this:

Rules with IDs (used to handle one-time exceptions to the general rule), or specified via an element’s inline STYLE attribute, have highest precedence. These apply to only one element in the HTML document.
After that, the rule with the most class specifiers (deepest nesting of names) has highest precedence. e.g. .button .raspberry has precedence over .button. In other words a more specific rule overrides a general one.
After that, the rule with the most element names has highest precedence. e.g. table.tiny tr td .button takes precedence over td .button
After that, the rule that appeared later in the style sheet has highest precedence.

Selectors

With selectors, you have quite fine control over just what a rule applies to. The more specific the selector, higher its precedence in competing with other rules. If you rule is being ignored, see if you can be even more specific about the circumstances under which it applies. Here are a few examples:

CSS Selector Examples
Example	Meaning
td	means this rule applies to the contents between any <td>... </td>
.strawberry	means this rule applies to anything marked with class="strawberry"
td ul	means this rule applies to any <ul> nested inside a <td>, nested at any depth.
td>ul	means this rule applies to any <ul> immediately nested inside a <td>, in other words, a child. Unfortunately IE does not support this.
td.strawberry	means this rule applies to any <td class="strawberry">.
p + table	means this rule applies to any <table preceded by a <p>. I don’t know of any browsers that support this yet.
div * li	means this rules applies only to a <li> at least grandchild levels deep inside the <div>. If it is a direct child, it does not count.
a.button:link	means use this rule for unvisited links coded with <a class="button" href=…
a.button:visited	means use this rule for visited links coded with <a class="button" href=...
a.button:active	means use this rule for active links coded with <a class="button" href=... An active link is the one you just clicked.
a.button:hover	means use this rule for the link the cursor is hovering over with <a class="button" href=...
a[href]	means use this rule for any <a href="xx"> text</a>
table.strawberry td a:link	Means this rule only applies to unvisited links inside <td> inside tables with class="strawberry". Just plain table.strawberry a:link will not work because the links are not immediately inside the <table> but nested a level deeper inside <td> tags. You might use this selector to turn off underlining by combining it with this rule: { /* turn off underline */ text-decoration : none; }
table.strawberry td a:visited img	Means this rule only applies to visited <img links inside <td> inside tables with class="strawberry". You might use this selector to turn off the red/blue box around an image link by combining it with this rule: { /* turn off border around image */ border : none; }

Drop Caps

Here is a basic drop cap:

/* markup to use this rule: <p class="fancy">Here is a basic drop cap:</p> */
p.fancy:first-letter {
  font-size:200%;
  vertical-align:-.4em;
}

Editors

You can create your CSS style sheets with any text editor, but it easier to use a tool that lets you create them with dialog boxes, that colourises and validates. W3C maintains a list of authoring tools.

Tool	Cost mindprod.com CurrCon international currency Applet needs Java installed for it to display prices in any world currency. mindprod.com CurrCon international currency Applet needs Java installed for it to display prices in any world currency.	Notes
Rapid CSS	$20.00 USD	Has a trial. Has nice spell checker. Seems to be an ordinary text editor with syntax highlighting. Works much like TopStyle, with an even more convenient layout. You can jump to style on in the left panel, and change its fields on the right, and see the text in the middle. Crashed every time I attempted to use the internal preview panel. The preview in a browser works once you configure your browser locations.
CSS edit	$30.00 USD	I have never used it. Has a trial. For the mac.
Style Studio	$50.00 USD	It failed to install on Windows Vista. The author said he is working on a Vista-compatible version. Has a trial.
StyleMaster	$60.00 USD	Has a trial demo. It has the 3-windows layout where you select the style on the left, see the text on the right and edit with dialogs on the left. It crashed when I tried the validator. It previews using various web browsers you can configure. It does at tiny bit of previewing e.g. colour and font in the left window style selector. It will scan your site to look for orphan (unused) styles. The scan is quite slow compared with TopStyle. It failed to display the results. It uses an external web validator. It has a convenient help window to find out about all the css keywords. With the menu or with keystrokes you can invoke all manner of mini-editors. The help is implemented as HTML displayed in a spawned browser, so it is slow to start and without the usual search features. Has both a Windows and Mac version.
TopStyle	$80.00 USD	What I use now. Does not work under Vista.

Content Adding

This is an advanced technique that lets you insert text using the style sheet, rather that repeating it over and over in your markup. Unfornately IE does not support it, even in the latest beta. Here is how to insert arrows on either end of a block of text marked with <var>…</var>

C:\Users\<var>userid</var>
renders as:
C:\Users\userid

Validation

When you make an error in CSS, there are no error messages. Your CSS rules are quietly ignored. CSS is very picky. I use several different validators to help find my mistakes:

TopStyle: validates both CSS and the class names embedded in the HTML.
CSE HTMLValidator: validates both the CSS style sheet and the HTML.
W3C CSS Validator: works online and is free for validating CSS style sheets.
W3C HTML Validator: works online and is free for validating HTML.
CSSCheck: validation service.

Bugs

Even though CSS has been out since 2000, most browsers are still crawling with bugs and omissions. When CSS is driving you crazy, test it out on the other major browsers. If you style sheet works on any of them, you know it is not your fault. However, you will have to do some fancy dancing to get something that will work on most of them. You have to keep testing and retesting. When you fix one thing, you likely will break something else. CSS is like building a house of cards. Some warnings: Opera 8.53 ignores <col>. Last revised: 2006-03-09 All browsers ignore tbody { overflow:auto; }. Various browsers ignore some combination of width, min-width, height and min-height. No browser seem to take font-size:xx% seriously. The percentage is taken as a vague suggestion as to the height desired. Changing font families drastically changes the actual font-size. 12 point Times New Roman is tiny compared with 12 point Lucida Sans Unicode. Borders get mysteriously chopped.

Even when there is no bug, there is no way grabbing the browser by the shoulders and saying “why did you do that?” CSS is inscrutable.

Java Support

Java has rather feeble support for CSS rendering internally with HTMLEditorKit. You can see which attributes are supported in the CSS interface declaration documentation.

Sun’s Javadoc on the CSS class : available:

on the web at java.sun.com
in the current JDK 1.6.0_07 or in the old JDK 1.5.0_16 or in the beta JDK 1.6.0_10 on your local J: drive.

Sun’s Javadoc on the HTMLEditorKit class : available:

on the web at java.sun.com
in the current JDK 1.6.0_07 or in the old JDK 1.5.0_16 or in the beta JDK 1.6.0_10 on your local J: drive.

Books

recommend book⇒CSS Cookbook

paperback

ISBN13:

978-0-596-00576-4

ISBN10:

0-596-00576-8

publisher:

O’Reilly

published:

2004-08

by:

Christopher Schmitt

Most people learn most easily from looking an working examples with some explanation, and not to much theory.

	abe books.co.uk	abe books.ca
	amazon.co.uk	amazon.ca
	abe books.de	chapters.indigo.ca
	amazon.de	abe books.com
	abe books.fr	amazon.com
	amazon.fr	barnes and noble.com
	abe books.it	powells.com
	iberlibro.com	o’reilly safari
		abe books anz

recommend book⇒Cascading Style Sheets: The Definitive Guide, 2nd Edition

paperback

hardcover

ISBN13:

ISBN10:

publisher:

O’Reilly

published:

2004-01-01

by:

Eric A. Meyer

Also covers faulty and spotty browser support to help you deal with compatibility issues. Make sure you get the second edition. The first was published in 2000 and is highly concerned with limitations of browsers of that time. The problem with this book is it belabours the obvious. You wade through pages and pages of dummy-level repetitive explanation, to find the nuggets of the unexpected which are not marked in any way.

	abe books.co.uk	abe books.ca
	amazon.co.uk	amazon.ca
	abe books.de	chapters.indigo.ca
	amazon.de	abe books.com
	abe books.fr	amazon.com
	amazon.fr	barnes and noble.com
	abe books.it	powells.com
	iberlibro.com	o’reilly safari
		abe books anz

recommend book⇒The Zen of CSS Design : Visual Enlightenment for the Web (Voices That Matter)

paperback

ISBN13:

978-0-321-30347-9

ISBN10:

0-321-30347-4

publisher:

Peachpit Press

published:

2005-02-27

by:

Dave Shea, Molly E. Holzschlag

The author maintains the website www.csszengarden.com, where you can check out his sense of aesthetics. The impressive tricks he manages require extensive tweaking of the markup. Purists feel that is cheating. Markup should not have to be modified, only the style sheets.

	abe books.co.uk	abe books.ca
	amazon.co.uk	amazon.ca
	abe books.de	chapters.indigo.ca
	amazon.de	abe books.com
	abe books.fr	amazon.com
	amazon.fr	barnes and noble.com
	abe books.it	powells.com
	iberlibro.com	abe books anz

recommend book⇒Beginning CSS : Cascading Style Sheets for Web Design (Programmer to Programmer)

paperback

kindle

ISBN13:

978-0-7645-7642-3

B000VXKSKS

ISBN10:

0-7645-7642-9

publisher:

Wrox

published:

2004-12-24

by:

Richard York

Beginner’s book that teaches by examples.

	abe books.co.uk	abe books.ca
	amazon.co.uk	amazon.ca
	abe books.de	chapters.indigo.ca
	amazon.de	abe books.com
	abe books.fr	amazon.com
	amazon.fr	barnes and noble.com
	abe books.it	powells.com
	iberlibro.com	abe books anz

recommend book⇒Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)

paperback

ISBN13:

978-1-59059-381-3

ISBN10:

1-59059-381-2

publisher:

friends of ED

published:

2004-06-07

by:

Dan Cederholm

Handles both HTML and CSS focussing on following standards to keep the web tidy.

	abe books.co.uk	abe books.ca
	amazon.co.uk	amazon.ca
	abe books.de	chapters.indigo.ca
	amazon.de	abe books.com
	abe books.fr	amazon.com
	amazon.fr	barnes and noble.com
	abe books.it	powells.com
	iberlibro.com	abe books anz

recommend book⇒Core CSS: Cascading Style Sheets, second edition
	paperback	hardcover
ISBN13:	978-0-13-009278-6

Alignment	Embedded Markup	PaBluM: Padding, Border and Margin
Avoiding Cut and Paste Cloning	Fixed Links	Padding
Borders	Float and Clear	Philosophy
Browser Support for CSS	The Font Combo Tag	Position
Bugs	Fonts	Precedence
Colours	Fonts Available in Your Browser	Selectors
Content Adding	Future of CSS	Separate Style Sheets
Decoration	Gotchas	Style Names
Default Fonts	Inheritance	Tables
default style sheet	Java Support	Validation
Desperation Fonts	Logical Fonts in CSS	CSS Vocabulary
Display	Margins	White Space
The Downside of CSS	Mixed Marriages	Why Use CSS?
Drop Caps	Monkey See, Monkey Do	Books
Editors	Multiple Style Sheets	Learning More
Embedded Styles	Orthogonality	Links

CSS : Java Glossary

Why Use CSS?

Separate Style Sheets

Embedded Styles

Embedded Markup

CSS Vocabulary

Style Names

Tables

Colours

Monkey See, Monkey Do

Fonts

The Font Combo Tag

Padding, Border and Margin : (PaBluM)

Padding

Border

Margin

Border-Spacing

text-decoration

Display

Alignment

Float and Clear

Position

White Space

Philosophy

Mixed Marriages

Browser Support for CSS

Gotchas

Multiple Style Sheets

Inheritance

Fixed Links

Orthogonality

Avoiding Cut and Paste Cloning

Precedence

Selectors

Drop Caps

Editors

Content Adding

Validation

Bugs

Java Support

Books