CSS Font and Text Style Wizard

CSS Font and Text Style Wizard

Font
font-family serif sans-serif cursive fantasy monospace custom:

font-style normal italic oblique
font-variant normal small-caps
font-weight normal bold bolder lighter 100 200 500 600 900
font-size medium small large smaller larger custom:

Text
line-height 100% 200% 80% 2em 1em 0.8em custom:

word-spacing normal 1ex 1.5ex 2ex 5ex
letter-spacing normal 0.1ex 0.3ex 0.75ex 1ex
text-decoration none underline overline line-through blink
text-transform none capitalize uppercase lowercase
text-align left right center justify
text-indent 0ex 1ex 2ex 5ex 10ex 10% 20%
Click the buttons above to change the text below
“You are old, Father William,” the young man said,
“And your hair has become very white;
And yet you incessantly stand on your head–
Do you think, at your age, it is right?”
vertical-align baseline sub super top text-top middle bottom text-bottom
father_william_standing_on_head.gif Vertical-align applies only to the image and THIS CAPITALIZED TEXT relative to this line.

CSS and HTML Source Code

The box below shows example CSS and HTML source code.
The code will update dynamically as you press the buttons above.
You can select text in the box and then copy and paste the starter code.

CSS Font and Text Style Wizard

Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

Font and Text Style Notes

Font Family

For font-family, you can specify an actual font name, like “Courier New” in the custom field. If the name has spaces, you should quote it, and it is case-insensitive. You can specify a comma-separated list of font names, which will be used in the order listed when some are not found on the user’s system. Designers should use the most desired font first, the most compatible font second-to-last, and the generic font family last and always. For example, a common font-family value is "Verdana", "Arial", sans-serif.

Units

When you use specify lengths in CSS, you should generally use the relative units appropriate to the property. For width properties, use ex units, which corresponds to the width of the lower-case ‘x’ character. For height properties, use em units, which corresponds to the height of the capital ‘M’ character. Relative units are preferred to absolute units, like px, pt, and in. One reason for this is that one day, monitors may have more than 96 dots per inch, in which case your 14px font will look too small. Other relative values like smaller, bolder, and percentages are also better choices than the absolute values. There are always exceptions though.

Free CSS Templates

Free CSS Templates (User Submitted)

Clean Top WordPress Theme

Title: Clean Top WordPress Theme
Design by: http://wpthemesbot.com/
Description: * Tested on latest WordPress 2.8.1 version * 2 columns * Fixed width * Widget ready * Gravatar ready * Adsense ready * Thumbnail images with posts (you need to add custom field thumb) * Site-wide 125 x 125 Sidebar banner ads. * Threaded Comments * Trackbacks separated from comments * Feedburner Email subscription integrated (can be cofigured via options page) * WP-Pagenavi integrated * Options Page to edit the Feedburner ID, Featured Video, and Google ad and other features * Cross browser compatible with IE, FF, Opera, Flock & Safari * Theme support/customization via our website
View Demo [Download]

RDF to PHP Object Converter

<?php
/* $Id: rdfworld-class.php,v 1.2 2003/02/25 03:43:44 csnyder Exp $ */

// rdfworld: schlepping rdf into a PHP object model, for fun and profit
//
// utilizes Chris Bizer's RDF API for PHP v0.4 (GPL)
//    see: http://sourceforge.net/projects/rdfapi-php/
//
// inspired by Aaron Swartz's TRAMP for Python: http://www.aaronsw.com/2002/tramp

// 2003-02-24: Better namespace guessing, support for untyped resources (rdf:Description only)
// 2003-02-19: Initial development

/* Copyright 2003 by Chris Snyder

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

*/

define("RDFAPI_INCLUDE_DIR", "$rdfworldroot/rdfapi-php/api/");
include_once(RDFAPI_INCLUDE_DIR . "RdfAPI.php");

class World {
// a World discovers and manages a collection of things
var $rdf;                // actual rdf for this world
var $model;                // triples model of world
var $nsregistry;        // a namespace uri <-> nickname index
var $_populated;        // indicates that world has been populate()ed
var $_uknsindex;        // in case of unknown namespaces
var $_untypedResources;        // array of rdf:Description resources

function World($rdf="") {
// hello world. heh.
$this->model= new Model;
$this->_uknsindex= 0;
$this->_untypedResources= array();

// create a namespace registry
$this->nsregistry= array(
"rdf"=>"http://www.w3.org/1999/02/22-rdf-syntax-ns#",
"rdfs"=>"http://www.w3.org/2000/01/rdf-schema#",
"rss"=>"http://purl.org/rss/1.0/",
"dc"=>"http://purl.org/dc/elements/1.1/",
"foaf"=>"http://xmlns.com/foaf/0.1/",
"cc"=>"http://web.resource.org/cc/",
"daml"=>"http://www.daml.org/2001/03/daml+oil#",
"log"=>"http://www.w3.org/2000/10/swap/log#",
"doc"=>"http://www.w3.org/2000/10/swap/pim/doc#",
"content"=>"http://purl.org/rss/1.0/modules/content/"
);

// if RDF is supplied, populate the world now
if ($rdf) $this->populate($rdf);

rdfwdebug("World created.",1);
}

function populate($rdf) {
// "populates" world
if ($this->_populated==1) {
// until model->unite() is working, we have to fail here
rdfwdebug("World->populate called, but world is already populated.",1);
return 0;
}

// create a parser and use it to generate a RdfAPI Model of triples
$parser = new RdfParser();
$newmodel =& $parser->generateModel($rdf);

// add that model to the existing world model
// this isn't implemented yet in RdfAPI :-(
//$this->model->unite($newmodel);
$this->model= $newmodel;
$this->_populated= 1;

// update $this->nsregistry as needed... see RDFUtil::getNamespace($Resource)

// append the rdf... is this a good idea?
$this->rdf.= "$rdf";
rdfwdebug("World populated.",1);
rdfwdebug("-- with rdf:<blockquote><pre>".nl2br(htmlentities($rdf))."</pre></blockquote>",2);
}

function getThingTypes() {
// returns an associative array consisting of types of things in a world
rdfwdebug("World->getThingTypes() called.",1);
$typearray= array();
$knownResources= array();
$ukindex= 1;

// lookup all the rdf:type statements
$predicate= new Resource("http://www.w3.org/1999/02/22-rdf-syntax-ns#type");
$typemodel= $this->model->find(NULL, $predicate, NULL);

// now for each subject uri in $typemodel...
foreach($typemodel->triples AS $statement) {
// get the object uri
$objectobj= $statement->getObject();
$object= $objectobj->getURI();
rdfwdebug("World->getThingTypes: found object=$object",2);

// add subject to the array of known Resources
$subjectobj= $statement->getSubject();
$subject= $subjectobj->getURI();
$knownResources[]= $subject;
rdfwdebug("World->getThingTypes: added $subject to knownResources array.",2);

// split off fragment
$hasfragment= strrpos($object, "#");
if ($hasfragment!==false) {
// type name is a fragment
$namespace= substr($object, 0, $hasfragment+1);
$property= substr($object, $hasfragment+1);
}
else {
// type name is at end of path
$lastslash= strrpos($object, "/");
if ($lastslash!==false) {
$namespace= substr($object, 0, $lastslash+1);
$property= substr($object, $lastslash+1);
}
else {
// uh-oh, what's the type name? Help!
rdfwdebug("World->getThingTypes() couldn't determine type name.",1);
$namespace= $object;
$property= "unknown".$ukindex;
$ukindex++;
}
}

// find $ns from $namespace
$ns= $this->getNs($namespace);
if ($ns=="") {
// add namespace to registry as something like ns1, ns2, etc...
$this->addNamespace($namespace);
$ns= $this->getNs($namespace);
}

// wrap it up
$key= "$ns_$property";
$typearray[$key]= "$ns:$property";
rdfwdebug("World->getThingTypes: setting typearray[$key]=$typearray[$key]",1);
}

// unfortunately, there may be Resources here with no rdf:type!!!
// scan through all the statements in the model and compare to known uris. (sigh)
foreach ($this->model->triples AS $statement) {
// check the subject against the array of known Resources
$subjectobj= $statement->getSubject();
$subject= $subjectobj->getURI();
if (in_array($subject, $knownResources)) continue;

// untyped Resource found
$knownResources[]= $subject;
rdfwdebug("World->getThingTypes: added $subject (untyped) to knownResources array.",2);
if ($typearray['rdfs_Resouce']=="") {
$key= "rdfs_Resource";
$typearray[$key]= "rdfs:Resource";
rdfwdebug("World->getThingTypes: setting typearray[$key]=$typearray[$key]",1);
}
$this->_untypedResources[]= $subject;
rdfwdebug("World->getThingTypes: adding $subject to this->_untypedResources array.",1);
}

rdfwdebug("World->getThingTypes: found ".count($typearray)." different types of things. (And ".count($this->_untypedResources)." untyped Resources.)",1);
return $typearray;

// end getThingTypes()
}

function getThingsByType($typename) {
// returns an array of Things of a certain type from the model
rdfwdebug("World->getThingsByType($typename) called.",1);
$thingarray= array();
$n= 0;

// $typename looks like "ns:type" where ns is a registered namespace and type is, well, a type
// --UNLESS, $typename=="rdfs:Resource" in which case we're looking for untyped resources.
if ($typename!="rdfs:Resource") {
$tnarray= explode(":",$typename);
$ns= $tnarray[0];
$type= $tnarray[1];

// contruct the typeuri
$namespace= $this->getNamespace($ns);
$typeuri= $namespace.$type;
rdfwdebug("World->getThingsByType: typeuri=$typeuri",1);

// now find all the resources in the model with
// predicate= http://www.w3.org/1999/02/22-rdf-syntax-ns#type
// and object= $typeuri
if ($typeuri!="") {
$typeresource= new Resource($typeuri);
}
else $typeresource= NULL;
$predicate= new Resource("http://www.w3.org/1999/02/22-rdf-syntax-ns#type");
$typemodel= $this->model->find(NULL, $predicate, $typeresource);

// now for each subject uri in $typemodel...
foreach($typemodel->triples AS $statement) {
// get all the triples that apply to this resource
$currentsubject= $statement->getSubject();
rdfwdebug("World->getThingsByType: subject[$n]=".$currentsubject->getURI(),1);
$thingmodel= $this->model->find($currentsubject, NULL, NULL);

// and make a populated Thing out of it, added to the thingarray
rdfwdebug("World->getThingsByType: making a Thing:<blockquote>",1);
$thingarray[$n]= new Thing;
$thingarray[$n]->fromModel($thingmodel, $this);
rdfwdebug("</blockquote>",1);

// recycle
unset($thingmodel);
$n++;
}
// recycle
unset($typemodel);
}
else {
// $typename=="rdfs:Resouce" so get all the $this->_untypedResources together
foreach($this->_untypedResources AS $subjectUri) {
// get all the triples that apply to this resource
$currentsubject= new Resource($subjectUri);
rdfwdebug("World->getThingsByType: subject[$n]=".$currentsubject->getURI(),1);
$thingmodel= $this->model->find($currentsubject, NULL, NULL);

// and make a populated Thing out of it, added to the thingarray
rdfwdebug("World->getThingsByType: making a Thing:<blockquote>",1);
$thingarray[$n]= new Thing;
$thingarray[$n]->fromModel($thingmodel, $this);
rdfwdebug("</blockquote>",1);

// recycle
unset($thingmodel);
$n++;
}
}

// return the array of found Things
rdfwdebug("World->getThingsByType: found ".count($thingarray)." things.",1);
return $thingarray;

// end getThingsByType()
}

function addNamespace($namespace, $key="") {
// adds $namespace as $this->nsregistry[$key], or $this->nsregistry["ns$this->_uknsindex"]
if ($key=="") {
$this->_uknsindex++;
$key= "ns".$this->_uknsindex;
}
// overwrite is not allowed???
if ($this->nsregistry[$key]!="") {
rdfwdebug("addNamespace tried to add $namespace as $key, but there is already another namespace at $key.",1);
return 0;
}

// make the assignment
$this->nsregistry[$key]= $namespace;
return $key;
}

function getNamespace($ns) {
// from rss to http://purl.org/rss/1.0/
if ($this->nsregistry[$ns]!="") $namespace= $this->nsregistry[$ns];
else {
// else do a little rdf parse and see if you can get it.
$search= "xmlns:$ns=";
$xmlnsloc= strpos($this->rdf, $search);
if ($xmlnsloc!==false) {
// namespace has quotes we hope...
$xmlnsloc++;
$endquoteloc= strpos($this->rdf, "\"", $xmlnsloc);         //"
$namespacelen= $endquoteloc - $xmlnsloc;
$namespace= substr($this->rdf, $xmlnsloc, $namespacelen);
rdfwdebug("World->getNamespace($ns): found $namespace after parsing rdf, will add to nsregistry now.",1);
$this->addNamespace($namespace, $ns);
}
else $namespace= "";
}

rdfwdebug("--World->getNamespace($ns): found $namespace",2);
return $namespace;
}

function getNs($namespace) {
// from http://purl.org/rss/1.0/ to rss
$ns= array_search($namespace, $this->nsregistry);

if ($ns=="") {
// do a regex on the rdf and see if you can get it...
$pattern= "{xmlns:(.+)=\"$namespace\"}";
rdfwdebug("World->getNs($namespace): pattern=$pattern",2);
$void= preg_match($pattern, $this->rdf, $matches);
if ($void) {
$ns= $matches[1];
rdfwdebug("World->getNs($namespace): found previously unknown namespace $ns ($matches[0]). Will add to nsregistry now.",1);
$this->addNamespace($namespace, $ns);
}
else $ns= "";
}

rdfwdebug("--World->getNs($namespace): found $ns",2);
return $ns;
}

// end World class
}

class Thing {
// a Thing is a PHP object with properties translated from RDF
var $uri;        // uri of thing
var $type;        // rdf:type of thing
var $model;        // triples model of self
var $world;        // containing world
var $_ukindex;  // in case of ambiguous property names

function Thing() {
// yep, you're a thing
$this->type= "http://www.w3.org/2000/01/rdf-schema#Resource";
$this->_ukindex= 0;
}

function fromModel($model, &$world) {
// takes a model consisting of triples about a single object and builds a thing out of it
// aka "The Tricky Part"
rdfwdebug("Thing->fromModel called on a ".get_class($model)." that came from a ".get_class($world),1);
$this->model= $model;
$this->world= $world;  // is this a good idea? hmmm.

// for each triple in the model:
foreach($this->model->triples AS $statement) {
// 1) verify that it is referencing the right subject... paranoid?
$currentsubject= $statement->getSubject();
if ($this->uri=="") {
$this->uri= $currentsubject->getURI();
rdfwdebug("Thing->fromModel subject is $this->uri",1);
}
elseif ($this->uri!= $currentsubject->getURI()) {
rdfwdebug("Thing->fromModel found a misattributed statement: expected $this->uri, got ".$currentsubject->getURI(),0);
continue;
}

// 2) determine what namespace:property is being expressed
$nameresource= $statement->getPredicate();
$namespaceproperty= $nameresource->getURI();
$hasfragment= strrpos($namespaceproperty, "#");
if ($hasfragment!==false) {
// property name is a fragment
$namespace= substr($namespaceproperty, 0, $hasfragment+1);
$property= substr($namespaceproperty, $hasfragment+1);
}
else {
// property name is at end of path
$lastslash= strrpos($namespaceproperty, "/");
if ($lastslash!==false) {
$namespace= substr($namespaceproperty, 0, $lastslash+1);
$property= substr($namespaceproperty, $lastslash+1);
}
else {
// uh-oh, what's the property name and what's the namespace? Help!
rdfwdebug("Thing->fromModel can't determine ns:property from $namespaceproperty. Tsk.",1);
$namespace= $namespaceproperty;
$property= "unknown".$this->_ukindex;
$this->_ukindex++;
}
}
rdfwdebug("--Thing->fromModel assigning (long) $namespace$property.",2);

// 3) convert namespace to ns_, or blank for rdf, or just _ if unknown
$ns= $this->world->getNs($namespace);
if ($ns=="rdf") $ns= "";
else $ns.= "_";
rdfwdebug("--Thing->fromModel: ns=$ns",2);

// 4) make the assignment as ns_property, or just property in the case of rdf
$propertyname= $ns.$property;
$currentobject= $statement->getObject();
$this->{$propertyname}= $currentobject->getLabel();
rdfwdebug("Thing->fromModel set this->$propertyname=".htmlentities($currentobject->getLabel()),1);

// end foreach statement loop
}

// end $thing->fromModel()
}

function getPropertiesList() {
// generates an html properties list for the object
$array= get_object_vars($this);
$list= "<hr><b>".get_class($this)." values:</b><blockquote>";
while (list($key, $val)= each($array)) {
if (is_int($key)) continue;
$list= $list."\$this->$key= $val<br>";
// recursive
if (0 && is_object($val)) {
$list= $list.$val->getPropertiesList();
}
}
$list= $list."---End of ".get_class($this)."---</blockquote>";
return $list;
}

// end Thing class
}

// error channel and debug mechanism -- not part of any class!!!
$rdfw_error= "rdfworld.php: ".'$Id: rdfworld-class.php,v 1.2 2003/02/25 03:43:44 csnyder Exp $'."<br />
error level=$_REQUEST[debug]<br /><br />";
function rdfwdebug($message,$level=0) {
global $rdfw_error;
if ($_REQUEST['debug']!="" && $level <= $_REQUEST['debug']) {
$rdfw_error.= $message."<br />";
if ($level==0) {
print "<b>Fatal rdfworld.php error:</b> $message<hr />";
print $rdfw_error;
exit;
}
}
elseif ($level==0) {
print "<b>Fatal rdfworld.php error:</b> $message";
}

// end rdfwdebug
}
?>

PHP Code Library

Text to HTML Converter (PHP 4+)

<?php

function stri_replace( $find, $replace, $string ) {
// Case-insensitive str_replace()

$parts = explode( strtolower($find), strtolower($string) );

$pos = 0;

foreach( $parts as $key=>$part ){
$parts[ $key ] = substr($string, $pos, strlen($part));
$pos += strlen($part) + strlen($find);
}

return( join( $replace, $parts ) );
}

function txt2html($txt) {
// Transforms txt in html

//Kills double spaces and spaces inside tags.
while( !( strpos($txt,’  ‘) === FALSE ) ) $txt = str_replace(‘  ‘,’ ‘,$txt);
$txt = str_replace(‘ >’,'>’,$txt);
$txt = str_replace(‘< ‘,’<’,$txt);

//Transforms accents in html entities.
$txt = htmlentities($txt);

//We need some HTML entities back!
$txt = str_replace(‘&quot;’,'”‘,$txt);
$txt = str_replace(‘&lt;’,'<’,$txt);
$txt = str_replace(‘&gt;’,'>’,$txt);
$txt = str_replace(‘&amp;’,'&’,$txt);

//Ajdusts links – anything starting with HTTP opens in a new window
$txt = stri_replace(“<a href=\”http://”,”<a target=\”_blank\” href=\”http://”,$txt);
$txt = stri_replace(“<a href=http://”,”<a target=\”_blank\” href=http://”,$txt);

//Basic formatting
$eol = ( strpos($txt,”\r”) === FALSE ) ? “\n” : “\r\n”;
$html = ‘<p>’.str_replace(“$eol$eol”,”</p><p>”,$txt).’</p>’;
$html = str_replace(“$eol”,”<br />\n”,$html);
$html = str_replace(“</p>”,”</p>\n\n”,$html);
$html = str_replace(“<p></p>”,”<p>&nbsp;</p>”,$html);

//Wipes <br> after block tags (for when the user includes some html in the text).
$wipebr = Array(“table”,”tr”,”td”,”blockquote”,”ul”,”ol”,”li”);

for($x = 0; $x < count($wipebr); $x++) {

$tag = $wipebr[$x];
$html = stri_replace(“<$tag><br />”,”<$tag>”,$html);
$html = stri_replace(“</$tag><br />”,”</$tag>”,$html);

}

return $html;
}

?>

Coppermine Photo Gallery

Coppermine Photo Gallery is an advanced, user-friendly, picture gallery script with built-in support for other multi-media/data files. The gallery can be private, accessible to registered users only, and/or open to all visitors to your site. Users, if permitted, can upload pictures with their web browser (thumbnail and intermediate sized images are created on the fly), rate pictures, add comments and even send e-cards. The site administrator determines which of the features listed above are accessible by registered and non-registered users. The site administrator can also manage galleries and batch process large numbers of pictures that have been uploaded onto the server by FTP.

Image files are stored in albums and albums can be grouped into categories, which in turn, can be further grouped under parent categories. The script supports multiple users and provides the administrator of the website with tools to manage which user groups can or cannot have personal albums, send ecards, or add comments. Users may also upload to public albums if the website administrator permits it. Permissions to create albums, upload and delete files are all determined by the website administrator.

Coppermine has an optional user selectable theme system with a number of themes pre-installed. It also supports the use of multiple languages and contains it’s own language library. These language files provide, users of your gallery, access in their preferred languages. Coppermine uses PHP, a MySQL database, and either the GD library (version 1.x or 2.x) or ImageMagick to generate and keep records and file information of all thumbnails, intermediate, and full-sized images. Coppermine generates the html code necessary to display its various categories, sub-categories, albums, intermediate, and full-sized image displays dynamically. This drastically cuts down on the number of files and space your gallery would require using standard HTML. The install script (install.php) makes it quick and easy to get started.

Download

Basic MP3 XML Player

This basic MP3 XML player reads the songs from an external XML configuration file and starts as soon as the sound is completely loaded.The download includes the XML configuration file and the FLA file with the ActionScript code for the buttons.You can check to see how the code in this FLA file was implemented and you can easily change the graphics for the audio buttons.

Download

Web 2.0 Colour Palette

Neutrals

Shiny silver [#EEEEEE]

Reddit white [#FFFFFF]

Magnolia Mag.nolia [#F9F7ED]

Interactive action yellow [#FFFF88]

Qoop Mint [#CDEB8B]

Gmail blue [#C3D9FF]

Shadows Grey [#36393D]

Bold

Mozilla Red [#FF1A00]

Rollyo Red [#CC0000]

RSS Orange [#FF7400]

Techcrunch green [#008C00]

Newsvine Green [#006E2E]

Flock Blue [#4096EE]

Flickr Pink [#FF0084]

Muted

Ruby on Rails Red [#B02B2C]

Etsy Vermillion [#D15600]

43 Things Gold [#C79810]

Writely Olive [#73880A]

Basecamp Green [#6BBA70]

Mozilla Blue [#3F4C6B]

Digg Blue [#356AA0]

Last.fm Crimson [#D01F3C]