CSS : Java Glossary

*0-9ABCDEFGHIJKLMNOPQRSTUVWXYZ (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
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.
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:
  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. You don’t have to make similar changes to every *.html file and reupload it.
  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.
  5. 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:

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

Named Colours select palette Alphabetically (140) select palette BHS: by Brightness, Hue, Saturation select palette HBS: by Hue, Brightness, Saturation select palette SBH: by Saturation, Brightness, Hue select palette Java AWT Colours (16,777,216)
select palette RGB: Numerically (140) select palette BSH: by Brightness, Saturation, Hue select palette HSB: by Hue, Saturation, Brightness select palette SHB: by Saturation, Hue, Brightness select palette Java Swing Colours (16,777,216)
Numbered Colours select palette HTML 3.2 (16) select palette Websafe (216) select palette Rainbow (4096) select palette Spectrum (401) select palette X11 (657)
Selected Colours select palette Pale (256) select palette Dark (2022) select palette Simple (105) select palette Greys (256) select palette 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  W3C CSS validated 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. 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:

  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. It must be 0 or a positive number.
  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. 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.
  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. It must be 0 or a positive number.
  5. 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
  1. top ⇒  
4. left ⇑ clockwise 2. right ⇓
  ⇐ 3. bottom  
  ⇐ 1. top  
2. left ⇓ counterclockwise 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.

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

  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. min-height, max-height and height do not include the border and margin — they control the size of the core element.
  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.
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

Opera logo 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:

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

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:

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

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:

  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 (.:>+*)

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

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.
Tool Cost
CurrCon Applet needs Java 1.8 or later to display prices in your local currency.
CurrCon Applet needs Java 1.8 or later to display prices in your local 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.
Overzone 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. Now discontinued.
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. 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:

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:
Oracle’s Javadoc on HTMLEditorKit class : available:

Books

book cover recommend book⇒CSS3: Visual QuickStart Guide, 6th Editionto book home
by 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.
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.
book cover recommend book⇒Sergey’s HTML5 & CSS3: Quick Reference. HTML5, CSS3 and APIs. Full Color, second editionto book home
by Sergey Mavrody 978-0-9833867-2-8 paperback
publisher Belisso B00852KP6Y kindle
published 2012-03-28
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.
book cover recommend book⇒Beginning CSS: Cascading Style Sheets for Web Design, third editionto book home
by 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.
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.
book cover recommend book⇒The Book of CSS3: A Developer’s Guide to the Future of Web Designto book home
by 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.
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.
book cover recommend book⇒CSS Cookbook, third editionto book home
by Christopher Schmitt 978-0-596-15593-3 paperback
publisher O’Reilly recommended 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.
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.
book cover recommend book⇒Web Standards Solutions: The Markup and Style Handbook, Special Editionto book home
by 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.
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.
book cover recommend book⇒CSS: The Definitive Guide, third editionto book home
by Eric A. Meyer 978-0-596-52733-4 paperback
publisher O’Reilly recommended 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.
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.
book cover recommend book⇒The Zen of CSS Design: Visual Enlightenment for the Web (Voices That Matter)to book home
by 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.
Australian flag abe books anz abe books.ca Canadian flag
German flag abe books.de amazon.ca Canadian flag
German flag amazon.de Chapters Indigo Canadian flag
Spanish flag amazon.es Chapters Indigo eBooks Canadian flag
Spanish flag iberlibro.com abe books.com American flag
French flag abe books.fr amazon.com American flag
French flag amazon.fr Barnes & Noble American flag
Italian flag abe books.it Nook at Barnes & Noble American flag
Italian flag amazon.it Kobo American flag
India flag junglee.com Google play American flag
UK flag abe books.co.uk O’Reilly Safari American flag
UK flag amazon.co.uk Powells American flag
UN flag other stores
Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

Learning More

Oracle’s Javadoc on CSS class : available:

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:


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
Canadian Mind Products
Please the feedback from other visitors, or your own feedback about the site.
Contact Roedy. Please feel free to link to this page without explicit permission.

IP:[65.110.21.43]
Your face IP:[54.160.244.62]
You are visitor number