To reference a CSS file within an SVG file refer to the following example code.

<?xml-stylesheet href="styles_austria_1.css" type="text/css"?> 

Here's what an SVG CSS file looks like.

.str1 {stroke:#0093DD;stroke-width:16;color:#0093DD}
.str2 {stroke:#0093DD;stroke-width:12}
.str3 {stroke:#0093DD;stroke-width:10}
.str4 {stroke:#0093DD;stroke-width:6}

.str0 {stroke:#DA251D;stroke-width:55;color:#DA251D}
.str6 {stroke:#BB90BB;stroke-width:44;color:#BB90BB}
.str5 {stroke:#0093DD;stroke-width:4}
.str7 {stroke:#1F1A17;stroke-width:13}

.fil0 {fill:none}
.fil2 {fill:#1F1A17}
.fil1 {fill:#C4E5FA}
.fil3 {fill:#FFFFFF}

Source: Example for using CSS-Styles [carto.net]
Reference: Styling - SVG 1.1 - 20030114 [w3.org]

This HTML and CSS code shows how to customise buttons in a restful way. Source: http://particletree.com/features/rediscovering-the-button-element/

<div class="buttons">
    <button type="submit" class="positive">
        <img src="/images/icons/tick.png" alt=""/> 
        Save
    </button>

    <a href="/password/reset/">
        <img src="/images/icons/textfield_key.png" alt=""/> 
        Change Password
    </a>

    <a href="#" class="negative">
        <img src="/images/icons/cross.png" alt=""/>
        Cancel
    </a>
</div>

/* BUTTONS */

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

Adding colour to the buttons - Colour is used like a traffic light system, green for go (positive), red for stop (negative, think about this for a moment), and blue which isn't a traffic light (neutral, a miscellaneous item)

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

This modue can be used to apply many style on Unix* terminals

# Unix Console Style
# You can use this module to apply a style on the terminal
#
# <b>DON'T WORK ON WINDOWS (Only on Unix* Terminal)</b>

module UnixConsoleStyle
  # Availables Styles
  STYLE = {
      :default    =>    "\033[0m",
    	# styles
    	:bold       =>    "\033[1m",
    	:underline  =>    "\033[4m",
    	:blink      =>    "\033[5m",
    	:reverse    =>    "\033[7m",
    	:concealed  =>    "\033[8m",
    	# font colors
    	:black      =>    "\033[30m", 
    	:red        =>    "\033[31m",
    	:green      =>    "\033[32m",
    	:yellow     =>    "\033[33m",
    	:blue       =>    "\033[34m",
    	:magenta    =>    "\033[35m",
    	:cyan       =>    "\033[36m",
    	:white      =>    "\033[37m",
    	# background colors
    	:on_black   =>    "\033[40m", 
    	:on_red     =>    "\033[41m",
    	:on_green   =>    "\033[42m",
    	:on_yellow  =>    "\033[43m",
    	:on_blue    =>    "\033[44m",
    	:on_magenta =>    "\033[45m",
    	:on_cyan    =>    "\033[46m",
    	:on_white   =>    "\033[47m" }
  
  # Methods to use if you want to apply a style
  def UnixConsoleStyle::apply_style(style)
    STDOUT.write STYLE[style]
  end
  
end

the guys over @ http://101out.com/optimize_html_size.html have a nice post about writing compact code to ‘give your site that edge’ (my words) by compacting the hell out of your html and css. Sound as it sounds, it may very well not be what you want, or need.

for coding means authoring, writing, creating engines that do work. meaningful work, at the least working around meaning. your snippets count. they’re also a technology that is about posterity, and be that the next day. even if you don't plan your work, you still have some sort of goal when doing it, a future state.

there's a reason for most programming languages to be readable. however, programming and natural languages alike are but slate for chalk. so while it is perfectly possible to say `vals1=parms[:attrs]`, in most cases code like `attributiveValues=parameters[:attributes]` can assist you and others in reading, understanding, & writing code that makes that more sense.

in other words, so that others may better undestand me, i try to use language in a way that is less terse and cryptic than some of the usage that bytecount-aficionadós defer to. you'll be soon outgrown by tomorrow’s technologies if your hard work goes into maxing out byte efficency by hand. consider how much you can squeeze out of a webpage in turns of size. a few thousand bytes. i'm not talking about oversized `*.jpg`s here, those are still chunky. i talk about your `*.js`es, your `*.html`s and your `*.py`s. look, you squeeezed those bytes out of

.top-left-div{border-width:1px}

so now it reads

.tld{border-width:1px}

, and with 8-odd bytes still dripping from your fingers, you *forget* about that, it’s *history* to you.

meanwhile, some nerd has installed a freifunk wifi repeater in your street, meaning that the increased efficiency of your ambience means a far bigger increase in website availability than what your lexical shortcircuiting achieved.

back in the future, generations write many commentaries about the possible hidden semantics in css class `.tld`. did those guys really plan to take over a `top-level-domain` and thrive on `http://*.music` as soon as back in 2007? five years before they did? who knows?

this is not against abbreviations. my own code is full of `*P`s and `**Q`s, what would be `*args` and `**kwargs` much anywhere else. when i find i can establish a useful convention, i do that. so, maybe think it this way: are those `attributes` worth of being called the `A`s here and elsewhere? if you’re sure, go for it. you just saved 9 times repetitions bytes, that may add up to a lot. if you hate that much typing, get yourself a word completing ide (see, another abbr). but drop those `attrs` and `attribs`.

I just prefer this implementation as opposed to window.onload.

Event.observe( window, 'load', function() {
  // Put the Javascript that needs to happen when the page
  // loads here
} );

For example, here's a way to make most of your input fields and all of your textareas have a different class when they're selected. Useful if you want to style them differently with CSS.

Event.observe( window, 'load', function() {
  var inputs = document.getElementsByTagName( 'input' );
  var textareas = document.getElementsByTagName( 'textarea' );

  for ( var i=0; i<inputs.length; i++ ) {
    type = inputs[i].type;

    if (
      ( type == 'button' || type == 'reset' ||
      type == 'password' || type == 'text' ||
      type == 'submit' ) &&
      ( inputs[i].onfocus == '' ||
      !inputs[i].onfocus )
    ) {
      inputs[i].onfocus = function() {
        this.className = 'selected';
      }

      inputs[i].onblur = function() {
        this.className = '';
      }
    }
  }

  for ( var i=0; i<textareas.length; i++ ) {
    if ( textareas[i].onfocus == '' || !textareas[i].onfocus ) {
      textareas[i].onclick = function() {
        this.className = 'selected';
      }
      textareas[i].onblur = function() {
        this.className = '';
      }
    }
  }
} );

Sometimes you have a content that shouldn't display
by default. You can provide a link to display/hide
that content

<a href='javascript: toggle()'>toggle</a>
<div id='div1' style='display:none'>
Don't display me
</div>

<script>
function toggle(){
	var div1 = document.getElementById('div1')
	if (div1.style.display == 'none') {
		div1.style.display = 'block'
	} else {
		div1.style.display = 'none'
	}
}
</script>

Old style class

class K:
  ...

New style class

class K(object):
  ...

Some features such as properties are only avaiable in new-style class.
Learn more about New-style class

The Text widget allow rich text. However, it's quite
difficult to use. You need to set each attribute
(font, style, highlight, color) of the widget
before adding more text with differert style.

So, I make a function that make it a bit easier.
The font tag (<font></font>) is used (borrowed from HTML).
Attributes allowed are
- color ( #RRGGBB or 0xRRGGBB or color name)
- face ( both font and size eg. albi17b )
- style ( bold, italic, underline or strikethrough )
(styles can be combined using comma)
- highlight ( standard, rounded, shadow)
- hcolor ( highlight color )

from appuifw import *

def process_color(color):
    color_name = {
        'red': 0xff0000, 'green': 0x008000, 'blue':0x0000ff,       
        'black': 0,      'white':0xffffff,      'yellow': 0xffff00
        }
    if color.startswith('#'):   # HTML format #000000
        return int(color[1:], 16)
    if color.startswith('0x'):  # pys60 format 0x000000
        return int(color, 16)
    return color_name[color]

def set_ml(t, s):
    stack = []
    t.clear()
    t.font = 'normal'
    i = 0
    while i < len(s):
        if s.startswith('<', i):  # tag end or tag begin
            j = s.find('>', i) + 1
            if s[i:i+7] == '</font>' or s[i:i+3] == '</>':
                t.color, t.font, t.style, t.highlight_color = stack.pop()
            else:
                stack.append([t.color, t.font, t.style, t.highlight_color])
                to_style = 0
                for attr_val in s[i:j-1].split(' '):
                    if '=' in attr_val:
                        attr, val = attr_val.split('=')
                        if attr == 'color':
                            t.color = process_color(val)
                        elif attr == 'face':
                            t.font = unicode(val)
                        elif attr == 'hcolor':
                            t.highlight_color = process_color(val)
                        elif attr == 'style':   # style and highlight go together
                            to_style |= eval('|'.join(['STYLE_' + st.upper() for st in val.split(',')]))
                        elif attr == 'highlight':
                            to_style |= eval("HIGHLIGHT_" + val.upper())
                if to_style:
                    t.style = to_style
        else:    # normal text
            j = s.find('<', i)
            if j == -1: j = len(s)
            text = u'' + s[i:j].replace('&lt;', '<')
            t.add(text)
        i = j      # go next chunk

Now you can use it easily

>>> t = app.body   # use the default Text widget that start pys60
>>> set_ml(t, '<font color=red>Hello</font> <font style=bold>World</font>.')
>>>  # a stylish 'Hello World' is displayed

Notice:
- Quotation marks are not used to specify attribute values.
- A </> shorthand can be used for </font>
- <font> can be nested.

#center{
   width:100px;
   height:100px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-50px;
   margin-left:-50px;
}

usage:

<img id="center" src="path/image.gif":

<% @projects.each_with_index do |project, i| %>
<% row_class = i%2 == 0 ? "even" : "odd" %> 
<tr class="<%= row_class %>">
......
<% end %>

In the CSS:

TR.even { background-color: #f00; }
TR.odd { background-color: #f00; }

etc..