Why Use CSS?

1. 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.
2. 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.
3. You have finer control of just how the web pages look.
4. 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.

Separate Style Sheets

<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">

Embedded Styles

<!-- 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>

Embedded Markup

<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

selector (CSS)

The h2 in the example rule above is called the selector because it selects which tags this rule applies to.

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

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

Tables

<table class="gridmenu">

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.

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)
		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

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

// 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;
}

Desperation Fonts

The Font Combo Tag

Padding, Border and Margin

Working from the inside out:

1. 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.

2. Border

   is some sort of decorative line around the content.

3. 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.

4. 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.

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

• display:block to put something in a box.
• display:table to put something in a shrink-to-fit box. Unfortunately, IE does not shrink the box. It puts it in a giant box that spreads out all the way across the screen or foul it up completely. Unfortunately you cannot use table with <pre, because it has a side effect of reflowing the text.
• display:inline makes something fit on the same line as other text.
• display:list-item gets you a bullet. Style applied by default to <li>.
• display:compact applied to <dl> gets a compact dictionary listing. Firefox ignores the option.
• display:none ordinary text.
• display:table-row. Style applied by default to <tr>.
• display:table-header-group. Style applied by default to <thead>.
• display:table-row-group. Style applied by default to <tbody>.
• display:table-footer-group. Style applied by default to </tbody>.
• display:table-column. Style applied by default to <col>.
• display:table-column-group. Style applied by default to <colgroup>.
• display:table-cell. Style applied by default to <td> or <th>.

Float and Clear

Position

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.

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

1. Position the image, using background-position.
2. Make sure there is sufficient room for enough of the background image to show using padding, min-width and min-height.
3. 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.
4. Making sure there is adequate white space around the image, using margin.

White Space

Philosophy

Mixed Marriages

Browser Support for CSS

 

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:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-3">

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

• 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.
• 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

Inheritance

Selector span.frog

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

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

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

Fixed Links

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

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

Orthogonality

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

 /* 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 precedence goes like this:

1. 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.
2. 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.
3. After that, the rule with the most element names has highest precedence. e.g. table.tiny tr td .button takes precedence over td .button
4. After that, the rule that appeared later in the style sheet has highest precedence.

Selectors

Drop Caps

/* 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

Validation

• 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 on-line and is free for validating CSS style sheets.
• W3C HTML Validator: works on-line and is free for validating HTML.
• CSSCheck: validation service.

Bugs

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

Books

	recommend book⇒CSS Cookbook
		paperback
	ISBN10:	0-596-00576-8
	ISBN13:	978-0-596-00576-4
	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.
amazon.ca amazon.com chapters.indigo.ca powells.com amazon.fr barnesandnoble.com amazon.de O’Reilly Safari amazon.co.uk

	recommend book⇒Cascading Style Sheets: The Definitive Guide, 2nd Edition
		paperback
	ISBN10:	0-596-00525-3
	ISBN13:	978-0-596-00525-2
	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.
amazon.ca amazon.com chapters.indigo.ca powells.com amazon.fr barnesandnoble.com amazon.de O’Reilly Safari amazon.co.uk

	recommend book⇒The Zen of CSS Design : Visual Enlightenment for the Web (Voices That Matter)
		paperback
	ISBN10:	0-321-30347-4
	ISBN13:	978-0-321-30347-9
	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.
amazon.ca amazon.com chapters.indigo.ca powells.com amazon.fr barnesandnoble.com amazon.de amazon.co.uk

	recommend book⇒Beginning CSS : Cascading Style Sheets for Web Design (Programmer to Programmer)
		paperback
	ISBN10:	0-7645-7642-9
	ISBN13:	978-0-7645-7642-3
	publisher:	Wrox
	published:	2004-12-24
	by:	Richard York
Beginner’s book that teaches by examples.
amazon.ca amazon.com chapters.indigo.ca powells.com amazon.fr barnesandnoble.com amazon.de amazon.co.uk

	recommend book⇒Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
		paperback
	ISBN10:	1-59059-381-2
	ISBN13:	978-1-59059-381-3
	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.
amazon.ca amazon.com chapters.indigo.ca powells.com amazon.fr barnesandnoble.com amazon.de amazon.co.uk

	recommend book⇒Core CSS: Cascading Style Sheets, second edition
		paperback
	ISBN10:	0-13-009278-9
	ISBN13:	978-0-13-009278-6
	publisher:	Prentice Hall
	published:	2003-10-03
	by:	Keith Schengili-Roberts
Not recommended. The author spends pages and pages belabouring the obvious and hops over anything the least bit difficult with almost no explanation whatsoever. The book meticulously documents what works and what does not in a number of obsolete browsers.
amazon.ca amazon.com chapters.indigo.ca powells.com amazon.fr barnesandnoble.com amazon.de amazon.co.uk

Learning More

• TuCows has all kinds of software for helping you set up your style sheets without understanding the CSS syntax.
• The documentation I use most frequently myself is the Web Design Group CSS reference manual, particularly the CSS Properties section. The best tutorial I found is the W3Schools. W3C is the master site. It has links to hundreds of resources. It also has the official spec.
• For inspiration to see what CSS can do, who the same text can be rendered in so many wildly different ways, check out csszengarden.com.
• To learn more about CSS, ask questions in the newsgroup: comp.infosystems.www.authoring.stylesheets. Read the FAQ for it before posting. There is a wealth of information there if you follow the links.

The Downside of CSS