CSS : Java Glossary

* 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 an up-to-date browser and Java version 1.8, preferably 1.8.0_131. If you can’t see the prices in your local currency, Troubleshoot. Use Firefox for best results.

CSS

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.

menu
Alignment	Embedded Markup	PABLUM: Padding, Border and Margin
Avoiding Cut and Paste Cloning	Fixed Links	Padding
Awkward Characters	Float and Clear	Parsing
Borders	Newspaper Columns	Philosophy
Browser Support for CSS	The Font Combo Tag	Position
Bugs	Fonts	Precedence
Colours	Fonts Available in Your Browser	Selectors (.:>+*)
Columns	Future of CSS	Separate Style Sheets
Content Adding	Gotchas	Style Names
Debugging	ids	Tables
Decoration	Indenting	CSS Units of Measure
Default Fonts	Inheritance	Validation
default style sheet	Java Support	CSS Vocabulary
Desperation Fonts	Limitations	Web Fonts
Display	Logical Fonts in CSS	White Space
Downloadable Fonts	Margins	Why Use CSS?
The Downside of CSS	Mixed Marriages	Books
Drop Caps	Monkey See, Monkey Do	Learning More
Editors	Multiple Style Sheets	Links
Embedded Styles	Orthogonality

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. You don’t have to make similar changes to every *.html file and reupload it.
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.
Your website is more consistent. Everything conforms to the style sheet.

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. This is the normal way to handle style sheets.

Limitation

The limitations of CSS include:

There is no encapsulation. You have to spell out common patterns longhand every time you use them.
There is no computation or conditional logic to choose options.
Things you would think would be trivial, e.g. extra space at the end of a sentence, or a scrolling table with non-scrolling headings like a spreadsheet turn out to be very difficult and impossible if you want them to work in every browser.
It is quite verbose. For example you must specify attributes over and over for every cell in a table. You cannot specify them just once for a column.
You can usually get things positioned roughly the way you want, but fine tuning can waste days.
It has its own unique syntax, quite different from HTML or anything else. It is quite logical once you understand it. However, blending it with HTML is aesthetically unpleasing.

CSS Vocabulary

embedded markup (CSS)

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.

embedded styles (CSS)

Here is an example of the sort of thing you can specify up in the <head> section: Normally you use this technique to add to the standard style sheet styles that appear nowhere else but this page.

font style (CSS)

refers to normal, italic or oblique. Italic has curly cues suggesting handwriting, where oblique is merely slanted.

font variant (CSS)

refers to none or small caps.

font weight (CSS)

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

rule (CSS)

A typical CSS style sheet rule looks like this:

h2 { color : blue; }

It means render all h2 headings in foreground colour blue.

property (CSS)

CSS style sheets are made up largely of keyword=value pairs. The keyword is called the property. The color in the example rule below is called the property. It is attribute of the rendering we are controlling.

h2 { color : blue; }

pseudo class (CSS)

You can append modifier keywords to your selectors to refine their meaning. In the following example link, visited, active and hover are pseudoclasses.

selector (CSS)

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

h2 { color : blue; }

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.

style (CSS)

Synonym for rule. An item in a style sheet that looks like this:

h2 { color : blue; }

It means render all h2 headings in foreground colour blue.

style sheet (CSS)

The entire *.css document is called a style sheet. When you embed CSS information directly into the HTML, that is not a style sheet.

text decoration (CSS)

refers to none, underline, overline, strikethrough and shudder, blink.

value (CSS)

The word orange in the following example rule below is called the value because it is the setting of the attribute we desire when rendering.

h3 { color : orange; }

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 (Hypertext Markup Language) 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.

CSS Units of Measure

CSS units of measure have to taken with a large grain of salt. Browsers have zoom features which can magnify or shrink. Printers have variable resolution. Tiny screens can now have as many dots as desktop screens. It is wise experiment with the various browsers, printers, devices, OSes to see the final effects. As a rule of thumb, avoid absolute units like px, pt, cm and inch as much as possible and use % or em.

CSS Units of Measure
CSS Units of Measure
Unit	Meaning	Notes
px	pixels	I found that a 20px font in CSS is not the same size as one in Java, even with the same font face.
pt	points	Nominally one PostScript point. Postscript points are 1/72 inch. Printer points are 1/72.2 inch. Java points are 1 pixel. You really have to experiment to see the effect.
em	m widths	Usually used to defined font sizes. 2em means twice the size of the current font. Think of it as a size multiplier having nothing to do with printer ems.
%	percentage	100% does nothing. 110% makes an element/font 10% bigger than it would normally be.
cm	cm	Even though this is nominally an absolute unit, it will rarely result is exactly 1 centimeter on screen or on the printed page.
mm	mm	Even though this is nominally an absolute unit, it will rarely result is exactly 1 millimeter on screen or on the printed page.
in	inch	Even though this is nominally an absolute unit, it will rarely result is exactly 1 inch on screen or on the printed page.
ex	x-height	height of the letter x in a font. Usually about half the font height. I don’t know how this is intended to be used. Perhaps it is for scaling margins.
pc	picas	12 points. 1/6 inch. There are five different definitions for pica in typesetting.

Tables

If you wanted to invent your own special kind of TABLE called a gridmenu, you could define it like this in your style 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.

When doing markup in your HTML documents, you could write either <td><span class=x> or <td class=x>. The second is preferable because:

it is terser.
It leaves the option open to add table alignment properties to class later.
It leaves the option open to render the text of that class differently in plain text and in tables.

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.

colour palette
Named Colours	Alphabetically (140)	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 (140)	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, download jdisplay.css, download home.css and download carol.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 practised. 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 Here

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

transparent means whatever the text is draw over, its shows through in the background. inherit means the background colour comes from the enclosing tag.

Newspaper Columns

Multi-column layouts are not yet officially part of CSS, but there is a working proposal for how to do them. Multi-column layouts work with Chrome, Firefox and Safari. They partially work on SeaMonkey (no vertical bars). They do not yet work Opera, IE (Internet Explorer) or Avant. With them, you just get a single column — not the end of the world. Last revised/verified: 2009-09-05. Normally you set them up so that people with wide screens see several columns and people with narrow screens see only one. You can optionally separate the columns with a vertical rule. As the user grows and shrinks the HTML display window, extra columns rapidly appear and disappear. The Spec is unusually easy to understand. Here are the basics:

This feature is not quite ready for prime time. If any element is wider than one column, it overlays the next column. CSS also need an attribute to avoid stringing three columns across with only one line in them.

You can apply a style containing width:200px, width:50%, min-width:200px or max-width:200px to a td to control its width. However, browsers are buggy and often ignore your commands. Sometimes you can get to work by using both min-width and width.

You can also get multi-column effects without using tables. You use properties like this: column-count:3, -webkit-column-count:3, -moz-column-count:3, column-width:200px, -webkit-column-width:200px, -moz-column-width:200px, column-gap:20px, -webkit-column-gap:20px and -moz-column-gap:20px. The advantage of this scheme is text automatically reflows between columns. You don’t have to decide the column breaks manually as you do with tables. -moz is for older versions of Firefox and Sea Monkey. -webkit is for older versions of Chrome, Opera and Safari.

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 (Padding Border and Margin)

The most baffling thing about CSS is understanding padding, border, border-spacing and margin. They all sound like the same thing. In addition you have the text-index property which adjusts just the first line of a paragraph.

box explanation

explanation of css margin, border, padding

It is very easy to reverse padding and margin and then be baffled at the results. Here is another way to help keep them straight. Think of the border as like a shipping box. The padding is like the bubble pack use to pad the contents for shipment, on the inside of the box. Think of a book with a box around the text, then margins are the clear area around the box. Here is one more mnemonic. Thing about the people who live on the margins of society. They are on the most outside.

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. It must be 0 or a positive number.
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. If your browser is ignoring your margin settings, check that the line-height is not overriding it. It can be 0, positive or negative. It is easy to confuse the term padding and margin. Remind yourself margin is on the outside, like the margin surrounding all the text is a book.
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. It must be 0 or a positive number.
Indenting
You can indent just the first line of a block of text with the text-indent:50px attribute.

You can remember the inside-to-out order with the mnemonic PABLUM To remember that the pablum mnemonics works from inside out, think of a baby spitting up the contents of its stomach inside out its mouth.

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

CSS Padding and Border

Java Insets

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

Java Inset ordering conventions
	⇐ 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 an 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.

Once you have the body of the paragraph in position as you want it, you can adjust the first line indenting it with a positive text-indent or outdenting it with a negative text-indent.

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 it to any of the options on any tag, not just the expected combinations.

Alignment

Note the asymmetry in the ways of handling horizontal vs vertical alignment. See examples of what the various alignments should look like. See also float, which is what you use most often for horizontal alignment.

Note you must say text-align:center.
float and vertical-align are incompatible. I could not get any of the kludges to make them work together that I read about on the net to work. I consider this a bug. The designers of CSS consider it a feature. If you find a work-around, please let me know.
Applying text-align to a td tag won’t get you anywhere, unless children inherit it. You need to apply it to a <p tag inside the <td.
The trick to centering a box is to set its left and right margins to auto and constrain its width to some value less than the page width. text-align:center just aligns the text inside the box, not the box as a whole.
Applying vertical-align:top will move the <td box to the top rather than aligning wit the centers of the other cells in the row. Apply it to the thing you are trying to position, not the element containing it.
There is no such thing as text-align:middle though there is a text-align:center and a vertical-align:middle
There is no such thing as vertical-align:center though there is a vertical-align:middle and a text-align:center
There is no such thing as vertical-align:centre though there is a vertical-align:center.

Horizontal Alignment with text-align

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

Experiment!

Vertical Alignment with vertical-align

You can align elements vertically with:

Experiment!

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
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 (World Wide Web Consortium) 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-position property can have values like this:

Possible values for the CSS background-position property
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 10px down.
background-position:-10px -5px;	style on cell <td	style on text <span	background image is positioned 5px to left of normal position and 10px 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. min-height, max-height and height do not include the border and margin — they control the size of the core element.
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.

Unfortunately CSS just lets you place just one image per element.

White Space

In HTML you may have bludgeoned elements into position using <p>, <br> and possibly even dummy space GIFs (Graphic Interchange Formats). 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

Opera

The best browser for CSS is Opera. Opera is relatively bug free in CSS and is faster that 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.

IE 8

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.

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/verified: 2007-04-27

The Web Standards Acid test for CSS shows Opera to be perfectly in compliance. SeaMonkey, with minor problems, 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:

If, instead of line-height:30px you type: line-height:30px, or line-height:30 or line-height:30pix you will not get any error message. Your style will just be quietly ignored.
If you type span.someclass: { instead of span.someclass { you will not get an error message. Your style will be quietly ignored.
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. So for example:
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 alternate style sheets and let the user choose which one he likes best — e.g. big and small print, different colour schemes. 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 a 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 (Uniform Resource Locator) relative to page it is referred to e.g. image/binderbackground.png or ../image/binderbackground.png, or ../../image/binderbackground.png. However, when you use style= in a web page, the url is relative to that page, just as with ordinary HTML. When you use an image in a CSS style sheet, 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.

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:

Some CSS selector 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. Beware of ul li This would also apply to a li deeply nested inside an ol.
td>ul	means this rule applies to any <ul> immediately nested inside a <td>, in other words, a child.
td.strawberry	means this rule applies to any <td class=strawberry>.
p + table	means this rule applies to any <table … </table> preceded by a <p> … </p>. I don’t know of any selector to modify a tag followed by some marker tag.
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; }
li>p:first-child	Means this rule applies only to the very first <p> inside an <li>. There must be nothing between the <li> and the <p>, not even an anchor or plain text. Combine it with this rule: { /* remove excess leading on first paragraph in any li */ top-margin : 0; top-padding : 0; }
p:first-line	Means this rule applies only to the very first line in a paragraph.
.timemark:before	Used to insert standard content before the field. Combine it with this rule: { /* add word "time" before class="timemark" fields.*/ content: "time:"; }
.timemark:after	Used to insert standard content after the field. Combine it with this rule: { /* add word "UTC" after class="timemark" fields.*/ content: " UTC"; }

content adding

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

There is a related pseudo-element to :first-letter called :first-line and another called ::selection.

ids

You can mark particular places in your code with the id tag. e.g.

<!-- example of use of id -->

Jump to <a class="onpage" href="#BOOKS">Books</a> section.
...

<h2 id="BOOKS">Books</h2>

Its most common purpose is to provide a target for page-internal links. ids must be unique on a page. My personal convention is to always make them upper case, but that is not required. They are case-sensitive. They may not start with a digit. My convention is to prefix an X when they naturally start with a digit.

However, you can also use ids in CSS, most commonly in inline styles to make a style apply only to a single instance, the element tagged with the specified id. h2#BOOKS { color:green; } would apply only to an <h2 tag with an id of BOOKS.

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.

CSS editing tools
Tool	Cost	Notes
Rapid CSS		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		I have never used it. Has a trial. For the mac.
Overzone Style Studio		It failed to install on Windows Vista. The author said he is working on a Vista-compatible version. Has a trial. Now discontinued.
StyleMaster		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		What I use now. The new management are much more responsive than the previous owners.

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

Note how you can’t use ordinary html &entities in the content. You must use CSS ’s scheme, different from C, Java and HTML. Instead of using entities in content, you can use \" for double quote, or \nnnn hex codes. To get left quote, use open-quote. To get right quote use close-quote.

There are all kinds of variations. Google for css content to learn more about before: after: and content:.

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 HTML Validator: works online and is free for validating HTML.
W3C CSS Validator: works online and is free for validating CSS style sheets.

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/verified: 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. Before computers, font-size was the width of an M measured in points. With CSS it can be measured in pt, em, px, cm or in. The value 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.

when you choose a bigger font-size you automatically get a larger interline spacing, line-height. Even when there is only one line you will automatically get more vertical space before and after.

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.

Debugging

First you validate your CSS. You can do that with TopStyle, HTML Validator or an online service. TopStyle will also let you scan your markup for undefined styles (often typos), orphan styles etc. You would be surprised how many problems can be traced to using a two synonyms or two similar spellings in CSS and in your HTML markup.

Then you use an ordinary browser to view sample web page that use your CSS. You can modify the CSS, save the CSS and reload the HTML to see the page with an improved style sheet. Sometimes it helps to experiment, putting in large values for CSS fields so you can see the visual effect of various parameters. For fine tuning, use a pixel ruler to measure precisely how many pixels you want to tweak the output.

If things still don’t look as you expect, use Firefox and inspect the element. This will show you how your various lines in the CSS style sheet override each other to produce the final result.

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.

Oracle’s Javadoc on CSS class : available:

on the web at Oracle.com
in the current JDK 1.8.0_131 on your local Windows J: drive.

Oracle’s Javadoc on HTMLEditorKit class : available:

on the web at Oracle.com
in the current JDK 1.8.0_131 on your local Windows J: drive.

Books

recommend book⇒CSS3: Visual QuickStart Guide, 6th Edition

Jason Cranford Teague

978-0-321-88893-8

paperback

publisher

Peachpit Press

978-0-13-313275-5

eBook

published

2012-11-25

978-0-13-313276-2

WebBook

B00A8SCTS0

kindle

Covers both CSS2 and CSS3. Each chapter is independent. You don’t have to read through from cover to cover.

Online bookstores carrying CSS3: Visual QuickStart Guide, 6th Edition
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

recommend book⇒Sergey’s HTML5 & CSS3: Quick Reference. HTML5, CSS3 and APIs. Full Color, second edition

Sergey Mavrody

978-0-9833867-2-8

paperback

publisher

Belisso

B00852KP6Y

kindle

published

2012-03-28

Online bookstores carrying Sergey’s HTML5 & CSS3: Quick Reference. HTML5, CSS3 and APIs. Full Color, second edition
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

recommend book⇒Beginning CSS: Cascading Style Sheets for Web Design, third edition

Ian Pouncey, Richard York

978-0-470-89152-0

paperback

publisher

Wrox

978-1-118-12178-8

eBook

published

2011-06-28

B0055AXSAY

kindle

Beginner’s book that teaches by examples. A full colour book, which makes sense since CSS is so much about getting colours right.

Online bookstores carrying Beginning CSS: Cascading Style Sheets for Web Design, third edition
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

recommend book⇒The Book of CSS3: A Developer’s Guide to the Future of Web Design

Peter Gasston

978-1-59327-286-9

paperback

publisher

No Starch

978-1-59327-363-7

eBook

published

2011-05-13

B005011IU0

kindle

Non-technical. Focuses on how to snazz up websites.

Online bookstores carrying The Book of CSS3: A Developer’s Guide to the Future of Web Design
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

recommend book⇒CSS Cookbook, third edition

Christopher Schmitt

978-0-596-15593-3

paperback

publisher

O’Reilly

978-1-4493-8294-0

eBook

published

2009-12-31

B0043D2DMS

kindle

Most people learn most easily from looking at working examples with some explanation and not too much theory.

Online bookstores carrying CSS Cookbook, third edition
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

recommend book⇒Web Standards Solutions: The Markup and Style Handbook, Special Edition

Dan Cederholm

978-1-4302-1920-0

paperback

publisher

Friends of ED

978-1-4302-1089-4

eBook

published

2009-05-07

B00292BEVG

kindle

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

Online bookstores carrying Web Standards Solutions: The Markup and Style Handbook, Special Edition
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

recommend book⇒CSS: The Definitive Guide, third edition

Eric A. Meyer

978-0-596-52733-4

paperback

publisher

O’Reilly

978-0-9802858-5-7

hardcover

published

2006-11-14

978-1-4493-9725-8

eBook

B00457X7L8

kindle

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.

Online bookstores carrying CSS: The Definitive Guide, third edition
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

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

Dave Shea, Molly E. Holzschlag

978-0-321-30347-9

paperback

publisher

Peachpit

978-0-7181-2636-0

hardcover

published

2005-02-27

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.

Online bookstores carrying The Zen of CSS Design: Visual Enlightenment for the Web (Voices That Matter)
	abe books anz	abe books.ca
	abe books.de	amazon.ca
	amazon.de	Chapters Indigo
	amazon.es	Chapters Indigo eBooks
	iberlibro.com	abe books.com
	abe books.fr	amazon.com
	amazon.fr	Barnes & Noble
	abe books.it	Nook at Barnes & Noble
	amazon.it	Kobo
	junglee.com	Google play
	abe books.co.uk	O’Reilly Safari
	amazon.co.uk	Powells
	other stores

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

Learning More

comp.infosystems.www.authoring.stylesheets
TuCows has all kinds of software for helping you set up your style sheets without understanding the CSS syntax.
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 comp.infosystems.www.authoring.stylesheets . Read the FAQs (Frequently Asked Questionses) before posting. There is a wealth of information there if you follow the links.

Oracle’s Javadoc on CSS class : available:

on the web at Oracle.com
in the current JDK 1.8.0_131 on your local Windows J: drive.

The Downside of CSS

Every browser renders the same CSS in different ways. This is because the expectation as to what a given style sheet should render is not clear and because there are bugs and holes in the implementations. There are also billions of possible combinations for the vendors to test. You have to constantly check how everything looks in a variety of browsers. You have to make compromises. Making it look better in Opera will make it look worse in IE, for example. In CSS, it is difficult to fix the rendering of one thing without disturbing the rendering of something else. It reminds me a bit like building a house of cards. When you tweak something to make IE work then Firefox stops working. When you tweak to humour Firefox, then Opera stops working! Arrgh! We need a validation suite and certification of browsers.

Parsing CSS

CSS look like a deceptively simple syntax, however, it is odd in that sometimes space is significant and other times it is not. It takes the most advanced parsers to deal with it.

CSS Futures

The big thing CSS is missing is named constants. You will find yourself mentioning the same colour or group of fonts, or font size over and over. You must make bulk search/replace changes. The problem is when two things temporarily, incidentally have the same colour, you can’t change just some of them without manually examining each instance carefully. The problem is analogous to using literals in Java programs instead of named constants.

If you could simply assign a name to a colour, font family group, font size etc, then you could make a change in only one place and have it ripple though the entire style sheet.

Until CSS develops this ability, or something equivalent, you might fudge it with a primitive macro preprocessor for CSS. However, such a scheme would have all the drawbacks any language preprocessor has. You would not be able to validate or edit the text with TopStyle, for example.

I sent this wish to the W3C people and they pointed out they are aware of the problem and there are three proposals to address the problem:

@font-face
A List Apart: a website about creating websites with CSS
adoment
Beginner CSS FAQ
biometric pica
browser
browser detect
browsershots
CSE HTMLValidator
CSS 3 grammar
CSS cheat sheet
CSS editor
CSS FAQ with examples
CSS Home Page
CSS level 1 Specification
CSS level 2 Specification: current CSS standard
CSS level 3 Specification: draft CSS standard
CSS parser
CSS selector tutorial
CSS Test Suite
CSS tricks
CSS3 media queries
CSS4 differences
CSS4 selectors
CSSCheck
deeply understanding the insanity of vertical align
default CSS Fonts
Default CSS Style Sheet
desperation CSS Fonts
downloadable Fonts
en
Fahrner Image Replacement: how to use style sheets to allow variable images
FlexBox
FlexBox intro
font
FontShower: fonts available to Java
HTML 4.01 Specifications: current HTML Standard
HTML editor
HTML4
HTML5
HWG CSS FAQ
Java logical Fonts
JStyleParser: CSS Parser
leading
LESS: aka {LESS}, CSS preprocessor language to extend CSS
logical CSS Fonts
logical fonts in Java
Mozilla CSS docs
multi screen
Nimpupani CSS vocabulary
Phloc: CSS parser
pica
pitch
point
Quirksmode CSS tricks
RichInStyle.com CSS Guide
Rule-Based Layouts
Stylus: CSS extension
three column layout
TopStyle
twip
Using first-child selector
Visibone cheat sheets
W3 Schools on Multiple Columns
W3C CSS Validator
W3C default CSS style sheet
W3C HTML Validator
web Fonts
Web Standards Acid test for CSS
Why vertical-align is so often ignored
WOFF
XHTML

standard footer
	This page is posted on the web at:	http://mindprod.com/jgloss/css.html
	Optional Replicator mirror of mindprod.com on local hard disk J:	J:\mindprod\jgloss\css.html
	Please read the feedback from other visitors, or send your own feedback about the site. Contact Roedy. Please feel free to link to this page without explicit permission.
	Canadian Mind Products IP:[65.110.21.43] Your face IP:[3.144.116.195]
Feedback	You are visitor number

CSS : Java Glossary

Why Use CSS?

Separate Style Sheets

Limitation

CSS Vocabulary

Style Names

CSS Units of Measure

Tables

Colours

Monkey See, Monkey Do

Fonts

Newspaper Columns

The Font Combo Tag

Padding, Border and Margin : PABLUM (Padding Border and Margin)

Padding

Border

Margin

Border-Spacing

Indenting

text-decoration

Display

Alignment

Horizontal Alignment with text-align

Vertical Alignment with vertical-align

Float and Clear

Position

White Space

Philosophy

Mixed Marriages

Browser Support for CSS

Opera

IE 8

Gotchas

Multiple Style Sheets

Inheritance

Fixed Links

Orthogonality

Avoiding Cut and Paste Cloning

Precedence

Selectors (.:>+*)

Drop Caps

ids

Editors

Content Adding

Validation

Bugs

Debugging

Java Support

Books

Learning More

The Downside of CSS

Parsing CSS

CSS Futures