Whenever you have multiple CSS and JavaScript files, to download each file, your browser makes a separate request to the web server for each of these files. This entire process increases the time to load your file. Hence, by converting all the CSS files to a single file and all the JS files to a single file, you cut down the number of requests.

This is where Scriptalizer.com comes in.

What does it do?

Turn this…

Into this…

Using Scriptalizer.com is really simple. All you need to do is upload your JS and CSS files to Scriptalizer and it will combine these into a single JS and a single CSS file respectively.

As an additional feature, it even minifies the resultant JS and CSS file to further reduce the total file size. Thus, the resultant is an extra speed boost to your site.

Sadly, the problem is that you need to upload your files, which is a manual process. So, it won't work automatically with all the files on your site. However, on the plus side is that you need to do this only once.

Via: Andy Jarrett

Our Friend: WebberZone Domains - .com, .net, .org, .biz domains at $8.95/yr only! Private Registration FREE!

There are plenty of articles out there written by great CSS masters that will tell you about what’s, why's and who’s of CSS. So if you want an in-depth analysis of CSS you'd better off reading an article by Eric Meyer or by some of the other CSS greats out there.

This article is about bringing you up to speed with CSS 3 and how it makes the life of an average graphic designer who has to deal with css on a daily basis, easier.

In truth, I'm no CSS wizard. My CSS programming skills are just a little better than average, at best. I have no problems with converting a design into basic html and CSS and can even hack it for IE6, but that's about it.

However, CSS 3 has made life a lot easier for most of us designers. And hopefully with the introduction of IE 8, IE 6 will gracefully go to its resting place and the internet will become a better place.

Here are some of the features of CSS 3, for more information you can always check out w3schools or css3.info.

• You can now have rounded corners without having to use images. This is by far the most exciting feature of css 3, for me. You now don't have to worry about creating images for all the rounded corners in your design. You can just program it in.
• You can now have multiple background images for a single element. You no longer require multiple divs just for your backgrounds; you can have different images separated just by commas.
• You can now have an image as a border. That's right; you can now use an image as a border style. This should definitely make for some interesting designs.
• You can now adjust the transparency of your images or elements using CSS. You no longer have to create transparent gifs or pngs to place in your design. Not to mention, soon enough you won't have to write a separate style sheet for IE6 to fix your transparent pngs.
• You can now use a drop shadow effect using CSS. This has to be one of the coolest features of CSS 3. Being able to use a drop shadow effect just using a couple of extra lines of code is so much easier than rendering your images, slicing them up and then worrying about how your pngs will display in different browsers.

And finally,

• You can use custom fonts in your design and have css call the font in from an online font directory using @Font-Face. This will make for some new an interesting designs and sites. You're no longer restricted to that handful of fonts that are used all over the internet.

Some downsides: Not to spoil everyone's fun, but as things stand right now, not all of the new CSS 3 features are supported by all the browsers. For the IE users, most of these features will work only with IE 8. Even for the others, there's still a short wait until all browsers are CSS 3 compliant.

Not to mention, with all these new features there's a chance that people will overuse the preset effects.

To quote Chris Spooner from the popular BlogSpoonGraphics,

Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!

Our Friend: WebberZone Domains - .com, .net, .org, .biz domains at $8.95/yr only! Private Registration FREE!

In fact, I've had this running on this blog as well as my personal blog for a long time now, where I displayed post details.

Would you like to run this on your blog? Well, here's how you can do that.

One highly popular JavaScript that is used for this is called Tabber.

Features

• Converts your HTML into a dynamic tabbed interface.
• Does not require you to set up a list of links, or anchors for the tabs.
• Plug and play: no need to know JavaScript, just make a few simple changes to your HTML.
• Use CSS to customize the appearance of the tabs.
• Gracefully degrades if JavaScript is not present and allows a different set of styles to be applied when JavaScript is not present.
• Gracefully supports printing (try a print preview on the example.html page) and allows a different set of styles to be applied when printing.
• Multiple tab sets on a page – you can even nest one tab set within another.
• Set the initial tab to be displayed.
• Use javascript to control which tab is displayed.
• Define onLoad and onClick callback functions to perform more advanced functions, such as loading the tab content dynamically using AJAX.
• Use a cookie to remember which tab was selected so it remains selected when you return to the page.
• Object-oriented, extensively-commented code.
• MIT license so you can modify and use in commercial projects.

Implementation

Implementing Tabber on your website or blog is extremely simple. You just need basic HTML knowledge.

Start off by adding the following code in the between the <head> and </head> section of your page.

The script above includes the tabber.js file. We also disable automatic startup.

Just before the </body> tag, add the following code. The code will cause tabber to run.

The following HTML code will generate the necessary tabbed interface.

You have two ways of creating the titles of the tabs as the code shows above. The first is using the <h3> tag. The second is to use the title attribute for the div. I prefer using the <h3> tag as it makes the text better formatted in case the your website visitor doesn't have JavaScript enabled.

Setting the class="tabbertab" for the div will create a new tab when tabber activates.

The best part about tabber is that you can create as many tabbed interfaces on your blog as you need.

There are several advanced uses of Tabber. However, for creating simple tabbed interfaces, this is all you need

You can however cover one more step of customizing the look of your tabbed interface by editing the included CSS file (simply rename example.css to tabber.css.

Do you have tabber implemented on your blog? Or do you use any other script for the same?

Our Friend: WebberZone Domains - .com, .net, .org, .biz domains at $8.95/yr only! Private Registration FREE!

Color Archiver is one such utility. Developed by Priya Ranjan, Color Archiver allows you to pick and save colors and thereby create a color palette. You can then quickly browse and select these colors for your future usage.

Color Archiver becomes a perfect tool when you are designing your website and / or working with CSS files.

It also includes a search feature to help you find colors by name thus finding those already existing ones.

Download Color Archiver

Our Friend: WebberZone Domains - .com, .net, .org, .biz domains at $8.95/yr only! Private Registration FREE!

If you have missed reading the Techtites Daily this week, below is a list of everything I covered this week.

Apr 23 – Money Making Monday: Get paid to surf

Apr 24 – Test drive the new Google design

Apr 24 – Tool Tuesday: Opimize your CSS with CleanCSS

Apr 26 – Tip Thursday: Shae your Feedburner feed via Twitter

Have you liked the articles so far? Do you have any suggestions for us? Do write in and let us know.

Our Friend: WebberZone Domains - .com, .net, .org, .biz domains at $8.95/yr only! Private Registration FREE!

The speed of your site also depends on your CSS, the complex the code, the slower is the site. Using repeated tagsTo make your site without loosing any CSS juice, you will need to optimize your CSS, make it simple and clean.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

This is sometimes the default code style generated by softwares and even written by coders. But isn't it too much heavy? How about trying this which is a optimized code instead of the above code:

margin: 10px 20px 10px 20px;

But on a part it is impossible to find all the silly errors in a CSS file of any theme. So for that there is a website / tool called CleanCSS.

CleanCSS optimizes the code, merge similar selectors, remove whitespace, remove useless properties etc. The interface of the website is also very easy, just paste your CSS in the box given, select the properties you want to clean, click the Process CSS button and bingo! It will find all errors and unnecessary things from your CSS and will remove it and will give you a error-free optimized CSS. You can even check that is your CSS valid or not ( I'm sure your CSS will be valid after being processed by CleanCSS ).

Note : Hi, My name is Rishi and I am thankful to Ajay for giving me the opportunity to blog @ Techtites. I maintain a tech blog and call it Rishiraj. I hope that you will like my posts over here and the once already @ Rishiraj.

Our Friend: WebberZone Domains - .com, .net, .org, .biz domains at $8.95/yr only! Private Registration FREE!

I didn't have IE6 with me and hence was stuck. Tracked down Luminus who spent a good deal of time and bandwidth over his bad internet connection patiently hitting Ctrl+F5 everytime I asked him to.

And, I was finally able to debug the problem. For those interested, this was caused because I missed the overflow: hidden in the #content div.

Additionally the advertisement to the top was placed within the content div causing the page to be stretched. IE6 got confused with the CSS (it never understands the idea of width and just expands any content greater than the width of the div. So it conveniently pushed the sidebar to the bottom.

To solved the problem I did two things. One, move the ad outside the #content and added the overflow: hidden.

The problem should be fixed now and you will be able to browse this site without any problem in all major browsers and operating systems.

If you do find a problem, please do comment and let me know. It's difficult with the limited access to browsers that I have!

I've been using Internet Explorer 7 at home and didn't realize that this site is all screwed in Internet Explorer 6 until it was pointed out to me.

I'm at a friends place trying to debug the problem, but it just doesn't seem to want to go away!

I'm totally clueless about how to get the site to display properly on IE6. There are no issues with Opera, Firefox and IE7.

In IE6 the sidebar goes to the bottom and the top menu button gets narrow in height when there is an image.

Any CSS experts out here would like to help me debug this problem?