Tools for CSS layout

1. Keep lines for all different sizes fonts: Baseline Rhythm Calculator

2. Horizontal layout

body {
font-size: 12px;
line-height: 1.6666666666666667em;
margin: 0; padding: 0
h1 {
margin: 0;
font-size: 1.6666666666666667em;
line-height: 1em;
margin-bottom: 1em;
h2 {
margin: 0;
font-size: 1.5em;
line-height: 1.1111111111111112em;
margin-bottom: 1.1111111111111112em;
h3 {
margin: 0;
font-size: 1.3333333333333333em;
line-height: 1.25em;
margin-bottom: 1.25em;
h4 {
margin: 0;
font-size: 1.1666666666666667em;
line-height: 1.4285714285714286em;
margin-bottom: 1.4285714285714286em;
p, ul, blockquote, pre, td, th, label {
margin: 0;
font-size: 1em;
line-height: 1.6666666666666667em;
margin-bottom: 1.6666666666666667em;
p.small {
margin: 0;
font-size: 0.8333333333333334em;
line-height: 2em;
margin-bottom: 2em;
table {
border-collapse: collapse;
margin-bottom: 1.6666666666666667em;

Bit Mask Tricks (PHP & MySQL)

Very useful for testing switches:

MySQL test:

SELECT * FROM menus WHERE (Roles & BIT) = BIT

MySQL set:

UPDATE table SET field = (field | 8 )

MySQL reset:

UPDATE table SET field = ((field | 8 )  ^8)


if (($VALIDATION & 8) == 8


function setflag (&$var, $flag, $set = true)
$var = $set ? ($var | $flag) : ($var & ~$flag);

Get correct ID from MySQL INSERT with ON DUPLICATE

A way to make things work is to use a dummy column, so if you have a table with auto_increment column ID and unique key a,b and a smallint dummy column for instance, the query might look like this:


Now, SELECT LAST_INSERT_ID(); will return the correct ID.

Setup Picasa in Czech

1. try Ping

2. get IP address

3. edit Host file c:\WINDOWS\system32\drivers\etc\hosts

4. add line with IP and add CZ

The Best CSS Tools List



Layout-o-Matic a tool  which allows to select a layout type, width, and other options to the left, and then click Download or View and pick up your multi-column CSS layout starter kit (turning it into something unique and beautiful not included). You’re welcome to use the resulting generated layouts for any purpose, personal or commercial.

CSS Creator creates a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

CSS HTML PHP Website Template Maker  is a PHP/HTML/CSS template generator  that creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout. The resulting template is  a combination of several files i.e. this is a true PHP, html, CSS template that makes it easy to control multiply pages at a web site.

CSS Rounded Box Generator is a tool to generate HTML and CSS for rounded corner boxes.

Firdamatic is an online tableless layout generator that allows you to create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only .

Free CSS Template Code Generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look of an entire site.

Page Maker – The Generator Form v2.90 CSS Source Ordered Variable Border 1-3 Columned Page Maker

QrONE CSS Designer online CSS style editor.



JotForm is a great Web based WYSIWYG form builder. You can select a form type(Contact Us, Satisfaction Survey, Job Application, Suggest Website , Membership Registration, Party RSVP , Wedding Attendance, Reservation, Submit Product, and others). Your new form will be created with the default fields on the selected form.

Accessible Form Builder makes it possible to generate XHTML-compliant accessible forms quicky and easily. Including the option of selecting what type of input you need.

CSS Form Code Maker is a HTML/CSS form generator  that creates a nice looking layout for forms. Add a ‘little color’ to the forms.



Typetester is an online application for comparison of the fonts for the screen. Its’ primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

CSS Font and Text Style Wizard is 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.

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

korhoen typeviewer – a css typeviewer. Choose font size, font family, font weight, font style, font variant, text transform, text-align, line-height word-spacing letter-spacing.


css tab designer

CSS Tab Designer is a unique and easy to use software to help you design CSS-based lists and tabs visually and without any programming knowledge required. With the CSS Tab Designer, you can quickly design your list visually, choose from a variety of styles/colors (60+ different designs/colors supported), generate strict XHTML compliant code.

Colly’s CSS rollover generator allows to create two distinct styles of rollover button, using CSS and just one image. You can optionally allow some background space above your image in which to place CSS- controlled rollover text.

CSS Menu Generator generates both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the effectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

List-O-Matic generates CSS-styled navigation menus based on list items.

List-O-Rama!  allows you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish. The code is automatically generated and inserted in your page.

Formatters and Optimizers


CSS Tweak enables you to optimize your CSS from your Mac’s desktop. The widget accepts CSS files dropped onto it. Once you drop a CSS file in, you are presented with tweaking options. You can choose to enable or disable any of the options, just the same as on the CSS Tweak website. Once you hit tweak, the CSS file is sent to the CSS Tweak server, tweaked, and then sent back and saved in the same location as your original file.

CSS Compressor is an utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality). In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

Tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements. JavaScript and PHP both fall into that latter category.

CSS Beautifier offers a variety of options, among them – Style Rule Settings, Style Property Settings, Alphabetizing Feature and De-Capitalization Feature.

CSS Formatierer und Optimierer is based on csstidy 1.3dev. The service is available in 4 languages : English, Deutsch, French, Chinese. It provides different compression layouts; you can sort selectors, properties, regroup selectors, optimize shorthands, compress colors, compress font-weight, discard invalid properties and add timestamps. It also allows to create a custom template the system will use to format the code. Note that your code should be well-formed. This is not a validator which points out errors in your CSS code.

Clean CSS is a tool to optimize and format your CSS. Note that your code should be well-formed. This isn’t a validator which points out errors in your CSS code.

Format CSS Online automatically formats your CSS (cascading style sheets) so they are easy to read and edit.

Online CSS Optimizer is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

Online CSS Optimiser/Optimizer is a tools which takes in a CSS file, and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. It removes comments, white space (such as excess spaces); converts RGB values to Hex, converts Hex values in the format #RRBBGG to #RGB; changes zero values with a size specified to 0, changes values such as border: 1px 2px 1px 2px; to border: 1px 2px; and more.

Color Tools

I Like Your Colors! is a tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.

CSS Color Chart This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palettes with either HTML or CSS. Click on the color code to select it, then you can copy and paste it. Click on the Toggle button to convert from Hex to RGB and back. The charts are printed in tabular fashion so you can narrow your browser window with the palette and compare the colors to your design side-by-side.

Online CSS Scrollbar Color Changer allows to change the color of your HTML scrollbars for Internet Explorer. Enter your colors in hex format, e.g. “FF0033″ or click the color chip for a popup color picker. The CSS for the scrollbars that you create is displayed automatically below. Copy it into your HTML page to easily change the scrollbars for your website.