Useful web-tool for webmasters

What is web-color kit?

Using this tool you can easily select the color palette for the new website.

This web-utility is intended for generating of Cascading Style Sheets (CSS) to define color attributes for your web pages. You just need to pick up the background color from "Available colors" table and page automatically will change the background and link colors. Simultaneously CSS code will be generated and ready for coping in "CSS code": text area.

Note: Bear in mind that here is represented only the Safe Web Colors

After it you just need to press "Copy Code" (IE users only) button and then paste (how to paste) it into your page <head> section.


CSS code:

  

Link Samples:

Yahoo!!! - Greatest Catalog
Google - The most popular search engine
Java Script Vault - Collection of useful JavaScripts
javascript.internet.com - JavaScript tutorials, reference, code, and help.
del.icio.us - A social bookmarks manager
CSS generator - Olnine CSS tool

Source Code:

Download script.js

Available colors:

 How to paste CSS code:

Basically when you put your CSS code internally within a page, all the code is downloaded everytime a user uses the page. But when an external sheet is used, the user only downloads on a heavy change of the file, or a click of the refresh button.

You may think this is a bad thing, but some people who use a heavy amount of CSS in their pages (me for example) use external stylesheets to lower the amount of bandwidth usage.

Using an external style sheet to lower the bandwidth is a good tactic, especially when using a 10kb stylesheet, or even sometimes a 60kb style sheet for your site.

In short, use external style sheets to lower bandwidth, use internal styling if you insist on it

The code for a internal style sheet:

<html>

<head>

  <title>Web-color kit</title>	

  <!-- begin CSS code -->	
	
  <style type="text/css">

   body {background-color:#999966; color:#000000} 

   a:link {color:#000000} 

   a:visited {color:#0a0a00} 

   a:active {color:#000000} 

   a:hover {color:#999966; background-color:#000000} 

  </style>

 <!-- end CSS code -->
	
</head>

The code for an external style sheet:


<html>

<head>

  <title>Web-color kit</title>	

  <!-- begin CSS code -->	
	
  <link rel="STYLESHEET" href="style.css" type="text/css">

  <!-- end CSS code -->
	
</head>

kostenloser counter CSS Tutorial