Java Glossary : css

Java definitions: 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

You are here : home : Java Glossary : C words : 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.

Embedded Styles

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

Separate Style Sheets

You can also 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 a line like this in your header section up with the meta tags.

<link href="mindprod.css" type="text/css" rel="stylesheet">

Style Names

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

<span class="frog">... </span>

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

Tables

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

table.gridmenu /* tables used for creating menus of clickable buttons */
{
color : #0080ff;
font : 80% Arial,Helvetica,sans-serif;
border-collapse : separate;
border-spacing : 2px;
}

table.gridmenu td /* cells used for creating menus of clickable buttons */
{
background : #fbf4d8;
border-color : #808080;
border-style : outset;
border-width : 2px;
padding : 5px;
}

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 HTMLtags in your <table commands such border="0" cellpadding="4" cellspacing="4".

Colours

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

Click any ball to view the corresponding colour palette.

Named Colours	Alphabetically	BHS: by Brightness, Hue, Saturation	HBS: by Hue, Brightness, Saturation	SBH: by Saturation, Brightness, Hue
Named Colours	RGB: Numerically	BSH: by Brightness, Saturation, Hue	HSB: by Hue, Saturation, Brightness	SHB: by Saturation, Hue, Brightness
Numbered Colours	HTML 3.2	Websafe	Rainbow	X11
Selected Colours	Pale	Dark	Simple	Greys	Colour Schemes

Monkey See, Monkey Do

If you are curious about the styles I use, download mindprod.css. It is well commented so you can see how I pulled off the various tricks I used on my website.

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

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

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.

box explanation

Working from the inside out:

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

If you don't have a rule around the item, just ignore the border and margin, and use the padding fields. Beware, the specifications are ordered clockwise: top, right, bottom, left. Java Insets in constrast are ordered counter clockwise: top, left, bottom, right.

Mixed Marriages

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

Browser Support for CSS

The best browser for CSS is Opera 7.5. The worst is Netscape 4.79. Netscape 4.79 has many bugs, including failing to support font-families in TABLEs, only in TD tags. The newsgroups are full of messages from frustrated people wondering why Netscape gives different displays from the other browsers. The Netscape 7.02 is much better. Internet Explorer too has many bugs. The one that annoys me the most is it ignores your style sheet entirely if you include a metatag like this:

Opera is relatively bug free in css, and is faster that Netscape and IE, but not all plug-ins work with it, and it has bugs in FORMs and JavaScript. You might consider using Opera to get your css working, then switch over to dodge the bugs in the other two browsers.

Multiple Style Sheets

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

<head>
<title>...</title>
<link rel="stylesheet" media="screen"
title="Default Style" href="..." type="text/css">
<link rel="stylesheet alternate" media="screen"
title="Alt-Style 1" href="..." type="text/css">
<link rel="stylesheet alternate" media="screen"
title="Alt-Style 2" href="..." type="text/css">
</head>

Fixed Links

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

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

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

You specify the url relative to the style sheet. If you use conventional HTML, you must constantly adjust the URL relative to page it is refered to e.g. images/binderbackground.gif or ../images/binderbackground.gif, or ../../images/binderbackground.gif.

Orthogonality

Using the style sheet, you can pretty well put any combination of attributes on any tag, unlike regular HTML.

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

Learning More

TuCows has all kinds of software for helping you set up your style sheets without understanding the CSS syntax.

The documentation I use most frequently myself is the Web Design Group CSS reference manual, particularly the CSS Properties section. The best tutorial I found is the W3Schools. W3C is the master site. It has links to hundreds of resources. It also has the official spec.

To learn more about CSS, ask questions in the newsgroup: comp.infosystems.www.authoring.stylesheets. Read the FAQ for it before posting. There is a wealth of information there if you follow the links.

CSS cheat sheet ¤ CSSCheck ¤ HTML ¤ TopStyle ¤ W3C CSS Validator

home	Canadian Mind Products
	mindprod.com IP:[24.87.56.253]
	Your IP:[80.134.30.163]
	You are visitor number 5933.
	Please send errors, omissions and suggestions
	to improve this page to Roedy Green.
	You can get a fresh copy of this page from:	or possibly from your local J: drive mirror:
	http://mindprod.com/jgloss/css.html	J:\mindprod\jgloss\css.html