1. Border radius.

We've all seen it over the web. Rounded corners are everywhere. Before CSS3, you either needed to do it with images, or some special (or crazy) JavaScript. No longer. CSS3 has the ability to have rounded corners without the need to get things complicated. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

You can also target individual corners, for a nicer effect:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome. For an example, check Twitter. For more information, check css3.info

2. Border Images

The next feature is a must. Before CSS3, borders had to be of a standard pattern, or just a simple line. Now, you can use your own images and create some stunning effects. This is how we do it:

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

This can also be applied on a per-side basis, allowing seperate images per side for that added sparkle.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Supported in Firefox 3.1, Safari and Chrome. For an example, see Blog.SpoonGraphics. For more information, check css3.info.

3. Drop Shadows!

No more photoshop! No more photoshop! You now don't need photoshop to include drop shadows to your sites! Here's how it's done:

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

To do it on a text element:

text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only). For an example, please visit 24ways For more information, visit css3.info (box) or css3.info (text)

4. Transparency

Before CSS3, PNG's played a vital part in Web Design. Now a CSS3 value lets you do the same, with a lot less time and effort needed. Here's how we do it in CSS now:

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect. Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

color: #000;
opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes). For an example, visit 24 Ways (RGBA). For more information, visit: css3.info

5. @Font-Face

There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule lets you use whatever font you want. Easily. Here's how:

@font-face {
font-family:'Helvetica';
src: url('/images/Helvetica.otf') format('opentype');
}

The rest of the settings are then called as usual:

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: if you are brave enough, you can make font-face work in IE (thanks for heads up, Jon Tan)) For an example, please visit TapTapTap. For more information please visit css3.info

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules too.
Google Chrome was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users. According to statistics, almost 50% of all Internet users should be able to view these features.

Downsides.

Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place.

Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This invalidates your style sheet and if you pride yourself on being "valid" don't use them.

Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup. Which means a bigger file, which means a slower site load.

Potentially horrific usage: 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.

1. First of all, Could you lead us through a brief history of your life? Where you live, what you do?

I was born in Central NY and moved to Rochester, NY to attend college at Rochester Institute of Technology. There I studied Graphic Design and graduated with a BFA in 2001. I am the Creative Director at Fuel Brand Group where I am responsible for all of the design and the general creative direction of the Fuel Brand Group and its network of sites.

2.How did you get started out on the web and what inspired you to get into coding?

I’m not really a coder, I’m more of a designer. I’ve jumped into bits and pieces of it but I don’t consider myself a coder by any stretch of the imagination. I save that for the experts!

3.What languages do you code and which one do you think is more 1. powerful, 2. simple and 3. you enjoy more?

I enjoy English the best I’m also a big fan of JQuery.

4.What sites you use for inspiration and do you recommend any to our readers?

I recommend Fuel Your Creativity, Design By Grid, Six Revisions, Web Designer Wall, and PatternTap.

5.Do you have any other hobbies? If so what are they and why do you enjoy them?

I enjoy hardworking because it gives me the chance to clear my head, so more ideas come to me!

6.Do you run a PC, or a Mac, why?

Mac…because apple kicks ass.

7.What software couldn’t you live without and could you name 3 reasons?

Photoshop because 1) ease of use, 2) &3) Because I wouldn’t be able to do my job without it.

8.What’s the program you use to code in? What is so good about it?

The little coding I do is usually done in TextMate and CSS Edit. They just work for me.

9.When you first started out, how did you promote yourself?

When I first started out I dove into the blogging community and got my name out there by commenting. Twitter has also helped promote me and my sites.

10. Finally, Where can we find you on the web, Be that you’re twitter, portfolio or other?

Twitter: http://twitter.com/adellecharles
Fuel Brand Group: http://fuelbrandgroup.com
Fuel Labs: http://adellecharles.com/temp
Fuel Your Creativity: http://fuelyourcreativity.com

So i thought...well, why can't i add this bookmarklet to my site?, in case people want to read the articles that I've written without visual distraction. So I did, and you can see it on any of the single post pages on my site.

It's really simple, just go to the Arc90 Readability Bookmarklet Generator and pick your settings, then right click on the bookmarklet, and select "copy link" or "copy link address", then all you have to do is set up a div with the text of your choice in it:

<div id="readability"><p><a href=" ">Make This Post More Readable</a></p></div>

And set up some style rules in your CSS file for that DIV:

 #readability {
background-image: url(images/readability.png);
background-position: 12px left;
background-repeat: no-repeat;
padding: 5px 5px 5px 24px;
}

And then simply paste in the link from the bookmarklet into the 'href' field of your link:

javascript:(function(){readStyle='style-novel';readSize='size-large';readMargin='margin-medium';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();

And you're done! don't forget to download the book icon (if you want it) from here, the icon is from the awesome famfamfam silk icon set. Don't forget to adjust the path to it in the CSS I gave you.

And the results speak for themselves, here is an article from the guardian before using readability:


And After:

So there! now your posts are more readable there's no excuse not to be writing top-notch content! Don't forget that you can style this to look like whatever you want! Enjoy...

A Note On Browser Compatibility

I can't see anything on the official website with regard to this, but i'd assume that it's fairly exclusive to modern browsers, and in the case of the IE's you should probably see it working with IE7+, but i can't verify that. But it should be fine in your Safari's, your Firefox's and your google Chrome's, as well as any other browser that is up to date.

1. First of all, Could you lead us through a brief history of your life? Where you live, what you do?...

Sure! My name is Ben Debnam, I have been a freelance web designer for a few years now, my company is Goo Creative (http://www.goocreative.co.uk). I live in Kent, England and absolutely love what I am fortunate enough to do every day! For as long as I can remember, I have always been interested in creative topics, whether its anything design related, animation, music or building weird random stuff. However, my journey started whilst at Disney World and I was peering through the glass on the Animation Tour at what was MGM Studios, now Hollywood Studios. I'll explain how in the next question..

2. How did you get started out on the web and what inspired you to get into coding?

I had always loved animation since a very young age (like, 20 years ago!), and when I found out about this thing called Macromedia Flash 3 I wanted to create my own short movies. I found that when I had finished, I wanted to publish my movies to the web, which got me started with Frontpage Express and a trial of Dreamweaver 3. I discovered putting my thoughts on the web in a way of visually communicating ideas was something really interesting to me. As time went on and I had my first couple of flash jobs I was becoming more interested in the html side of things and less in the Flash. I have to say, I did enjoy the design side more than the coding side and still do to this day but I found people wanted to pay me for building them websites. This at the time was strange as it was a geeky hobby of mine, could I actually make a living out of something I enjoyed?

3. What languages do you code and which one do you think is more 1. powerful, 2. simple and 3. you enjoy more?

Well I'm primarily a designer and a front end developer, which I think is something all web designers should be nowadays. I code in XHTML, CSS, some PHP and some jQuery. I also use Expression Engine as my CMS of choice. I think CSS and jQuery are incredibly powerful. jQuery I feel is still finding its feet. There are a lot of people doing some really great stuff with it but I have a feeling there is more to come! I love the simplicity of XHTML, CSS and Expression Engine. Everything neatly fits together, if you do something stupid then you'll get stupid results (most of my IE CSS problems are where I've tried to cut corners or have been sloppy). EE has stolen my heart when it comes to doing something more than your few page static site. I'm so grateful for it's flexibility and I thoroughly enjoy working with it. My clients seem to love it too, http://www.shearsgreenjuniorschool.co.uk and soon to get an update http://www.hygienesolutions.co.uk.

4. What sites you use for inspiration and do you recommend any to our readers?

I have just over 300 site feeds in my RSS Reader, most of which I use for inspiration. I currently like the tuts+ network nettuts aetuts psdtuts etc. They have some great articles. Smashing Magazine is another great one, and have some of my work featured in there a couple of times (thanks guys!). I always find Apple's site a great source for web gui, and keeping things simple! Other inspirational sites are just where ever I land that I like and then take a peek through their source code. Other sites worth checking out (design) would be ffffound and of course amazingcoders (Cha-Ching!)

5. Do you have any other hobbies? If so what are they and why do you enjoy them?

I've been a pianist since a very young age, my piano has been my life long friend. I'm also a very keen photographer! My other hobby is collecting Pixar Toys & other designer Vinyl Figures and have a couple of shelves full of Vinyls (it gets expensive!)

6. Do you run a PC, or a Mac, why?

Mac. For me, its a no brainer. The Mac has always suited me perfectly, I love the experience, the Apple Stores are fantastic places to be when I visit, plus I love their design. However like my friend Dan Philibin, I use VMWare with Windows XP for Cross Browser testing.

7. What software couldn’t you live without and could you name 3 reasons?

OSX, iTunes and Photoshop. OS X because it is the nicest OS out there. I love the way it just works, looks beautiful and has really crazy awesome features. iTunes because I wouldnt be able to concentrate if it wasn't for my 600GB iTunes library. Photoshop because it is where I spend most of my daily hours!

8. What’s the program you use to code in? What is so good about it?

Coda - everything in one place, superbly built app - and the guys at Coda are seriously talented folks! I used to love the code view with built in FTP that Dreamweaver had. Coda just removed the bits I didnt need, and made it really really great to use.

9. When you first started out, how did you promote yourself? If at all?

Friends of family and friends of friends. I promoted myself with a credit on each site I built. I used to talk to businesses and places I used to regularly visit and offer them a website. It was a great way to get started as you could pick and choose the work you wanted.

10. What was the first coding job you ever got?

Coding up a site for a local sheet metal firm. This was about 9 years ago and not online anymore.

11. Finally, Where can we find you on the web, Be that you're twitter, portfolio or other?

You can find me at my portfolio, Goo Creative or at my twitter.

1. First of all, Could you lead us through a brief history of you’re life? Where you live, what you do?

I'm a 21 year old Undergraduate Software Engineer studying at the University of Newcastle, Australia. I live just a half hour
away from campus in a quiet suburb called Medowie, where I have spent my entire life. I graduated secondary school with a 96.7 University Admissions Index (100 being the highest), and for the past three years have maintained an 87% mark average in my University courses. I have two brothers - one starting university this year and one nearing the end of primary school - a cat and a dog.

2. How did you get started out on the web and what inspired you to get into coding?

It was simple really. In the days before social networking sites became popular, my mates and I decided to create a forum where all of our friends could sign up and chat. The forum was to be appended to a website with jokes, anecdotes and news from our lives in Newcastle. Although we had grand ideas, none of us actually knew how to create a website past using site builders available at places like Geocities (I feel dirty just remembering it). So I volunteered to learn whatever was necessary to ensure our site was a success. So I began my foray into the elegant and sometimes frustrating world of web markup and styling. Over the years our site fell apart due to lessening interest from its creators and the rise of MySpace and Facebook, but I was already hooked on the intricacies of coding.

3. What languages do you code and which one do you think is more 1. powerful, 2. simple and 3. you enjoy more?

There's a fairly standard set of languages that all web engineers should be familiar with. XHTML, CSS and Javascript are the fundamentals, although any good web engineer should be very familiar with at least one server-side language. PHP is common and simple to use, but I prefer working with Java. It's more complex, but vastly more powerful, and adheres closely to the object-oriented coding paradigm that I'm comfortable with. Given a choice, I love to write applications in C++ purely because it's a more interesting and enjoyable language than Java, but C++ plays a very minor role on the Internet.

4. What sites you use for inspiration and do you recommend any to our readers?

I've never used websites for coding inspiration. Often I'll stumble across a problem that requires a very in-depth search to find a solution, but I find web engineering has a solid process and thus the only area in which you can let your creativity run free is the elegance of your code. I do dabble in the design side of websites though, and there are plenty of resources for inspiration there. I suggest taking a look at the following URL, which has a set of inspiring websites broken into categories: http://vandelaydesign.com/blog/design-inspiration/

5. Do you have any other hobbies? if so what are they and why do you enjoy them?

When I'm not coding, my four main activities are reading novels, playing computer games, watching movies and playing cricket (Sport of Kings). I especially enjoy my novels. At a young age I read Tolkien's Lord of the Rings trilogy, and since then I've had a voracious appetite for fantasy series, although I do enjoy a good crime mystery. In regards to the computer games, I tend to keep returning to the classics and don't get as excited about new releases as I once did. The exception being the development of Starcraft 2 and Diablo 3. I'm on the edge of my seat waiting for those games.

6. Do you run a PC, or a Mac, why?

I use a PC, mainly because I'm comfortable with the user interface of Windows. I find it ridiculous that operating systems have such an avid fanbase. In the end it's just two different user interfaces, and you use the one you like best. Neither OS has any further advantage over the other.

7. What software couldn’t you live without and could you name 3 reasons?

Adobe Photoshop. Hands down. Even though I am primarily a coder, most jobs I'm contracted to do involve taking a .psd and developing a coded template for the design. The slicing and structuring is my responsibility, and without Photoshop I would be up the proverbial creek without the proverbial paddle.

8. What’s the program you use to code in? What is so good about it?

For simple jobs I tend to use Notepad++ because of its clean interface and good syntax highlighting. However, when I'm in need of a proper IDE I lean towards Eclipse. I have used Netbeans in the past, but I'm more comfortable with Eclipse.

9. When you first started out, how did you promote yourself? If at all?

Word of mouth. I have no interest in starting a business until I've graduated from my degree, so the amount of work I get through word of mouth is sufficient. There's also plenty of forums out there where people go to request coding jobs, and if you have the ability you can throw your hat in the ring and make the client an estimate. Many of those clients will become recurring customers if you do a good job.

10. What was the first coding job you ever got?

It wa simply to take a .psd design and create a web template for the client. In fact a good deal of my jobs are simply that. There are many more people looking for markup and styling than there are looking for custom content management systems. You may consider markup and styling to be easy, but it's also easy money.

11. Finally, Where can we find you on the web, Be that you're twitter, portfolio or other?

In short, you can't. My portfolio has been offline for a few months now, and I don't currently have plans to find new hosting. I am, however, a moderator at the MickM.com forums, so if you have any enquiries, or just wish to chat, you can find me there.

**Before we start, please note that this script does NOT work in Safari 4**

Step 1
Download the script by clicking this link (right-click and save target as).

Step 2
Now, we have to add in the code to the page. Let's say we're adding the code to Amazing Coder's homepage: (the Scrollovers code is in bold).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amazing Coder</title>
<meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://amazingcoder.com/feed/" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://amazingcoder.com/feed/rss/" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://amazingcoder.com/feed/atom/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://amazingcoder.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://amazingcoder.com/wp-includes/wlwmanifest.xml" />
<script type="text/javascript src="http://amazingcoder.com/wp-content/themes/amazingcoder/scrollovers.js"></script>
</head>

We'll also need to add in the CSS after the <head> tag:

<style>
a.scrollover {
/* Default Colour/Styles here */
color: #0C3;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #F93;
}
<style>

Step 3
Now we have to add it to one of our links. I've just created an example page, to display them. This is some code extracted from the page:

<a href="#" class="scrollover" type="scrollover">Example Link 1</a>

You can view the live demo here: http://lpanderson.net/tutorial1/

First of all, Could you lead us through a brief history of youʼre life? Where you live, what you do?

Well, Iʼm Jonno Riekwel. Born in 1986 in Rotterdam, The Netherlands. Iʼve been a freelance website designer for over a year now.

How did you get started out on the web and what inspired you to get into coding?

A friend of mine decided to start designing websites but heʼs almost good at everything. So I though, not this time. I started learning Photoshop etc just to get ahead. To my surprise, I liked it. After designing for a while I thought it would be smart to be able to code the sites I created myself.

What languages do you code and which one do you think is more 1. powerful, 2. simple and 3. you enjoy more?

I only code HTML and CSS. I started with PHP a while back and that went OK but not great. Once it got more difficult I thought it would be better just to focus on HTML and CSS.

What sites do you use for inspiration and do you recommend any to our readers?

I canʼt of course name all 200 sites I follow but  I really recommend cssglobe.com and webcreme.com

Do you have any other hobbies? if so what are they and why do you enjoy them?

Well, I donʼt know if gaming is hobby but I spent a lot of time on my xbox. I think thatʼs gonna be over soon though. Photography is my new hobby now.

Do you run a PC, or a Mac, why?

Iʼve been using a Mac for almost 10 years now, but, 2 months ago I also bought a PC. (Just to check the websites in IE6 and his sucky brothers). I could  do that on my Mac but that would slow the whole thing down. Iʼve tried to code on a PC but the workflow is totally different than on my Mac. Iʼm at least 2 times faster on a Mac.

What software couldnʼt you live without and could you name 3 reasons?

CSSEdit - It speeds up the whole process. You can easily find problems, It kills some problems I have had with other CSS editors too.

Whatʼs the program you use to code in? What is so good about it?

For html I use Textmate. There isnʼt an app quite like it. Itʼs fast, easy and you can do almost everything with it. You can write less to get the same result as in other editors.

When you first started out, how did you promote yourself? If at all?

As a freelancer I knew enought people and could just ask around and tell them I was for hire, but before that I just randomly added people from design forums to IM and started talking to them, asking if they needed their designs coded. That got me a lot of work.

What was the first coding job you ever got?

The first coding job ever was for a friend of my mom. Including framesets, tables, font tags and marquees.

Finally, Where can we find you on the web, Be that you're twitter, portfolio or other?

You can find my portfolio on http://jonnotie.nl. Iʼm on almost every webservice with the username ʻjonnotieʼ. So, http://twitter.com/jonnotie, http://flickr.com/photos/jonnotie etc.

1. Compress your images.

When using the "Save for Web" tool in Photoshop, you can compress our images in order to lower the file sizes. Now normally that's enough for anyone, but if you want the ultimate efficiency, a site named Smush.It makes your images ultra tiny without taking any quality with it.

2. Move script tags to the bottom

Content here...
<script type="text/javascript" src="someScript.js"></script>
<script type="text/javascript" src="anotherScript.js"></script>
</body>

Moving the scripts down to the bottom of the page means that your form, content and images can all load before you start adding in the fancy effects or implementations. This is especially useful if for instance you're using a twitter badge to give your site you're twitter updates, but twitter is down. Having the code at the bottom of the page, means that all of your content can load first, rather than twitter timing out, then your content loading (making the page load very slow)

3. Link your scripts from Google

Not too long ago, Google began hosting scripts such as jQuery. There is one main upside to this:

Caching: Let's imagine that one user visits 10 sites that all link to Google's CDN, the user would only download jQuery once. this is because a browser can tell if a file is modified or not and can choose to load it, or in this case, not have to.

Compress your CSS and JS

Compressing your CSS and JS files can make that tiny bit of difference and can speed your website up quite a bit. Here are some tools to get started.

Javascript Compression Services

• Javascript Compressor
• JS Compressor

CSS Compression Services

• CSS Optimiser
• CSS Compressor
• Clean CSS

4. While creating, learn keyboard shortcuts

Now this may sound straightforward, but I know personally how frustrating it is to have to go three of four menus to get to a very simple function, only to realise when you've got there, there is a keyboard shortcut for it. Learn them. If a function doesn't have a keyboard shortcut, and you have a Mac, you can create you're own by going to Keyboard Shortcuts in System Preferences. Now I don't know if this is possible in Windows, but if it is, please do leave a comment so I can add it into the article, (I hate to leave out people because of their OS.) After creating a keyboard shortcut, make sure you actually use it. Time after time, I've created them and completely forget that I have. When you go to the menu item again, make sure you use the keyboard shortcut and think about it every time you do. Eventually it'll become second nature and you'll be flying through the menus with ease.

5. Finally, don't use tables. 

Let me first explain what a table is for. A table is for laying out tabular data, not a while site. If you want a table of content, use tables. (pretty obvious) If you want a whole site layout, use CSS and Div tags. There are many reasons, but one relates to speed, Nested Tables load more slowly. The most common way to create fancy layouts with tables is to "nest" tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the Web browser to render the Web page. In Internet Explorer, this results in images and text bouncing around on the screen until they figure out where to place them. And in Netscape 4, the page won't display at all.

1. Comment.

CSS comments can be made for a single line or multiple lines, but regardless of how you pass your comments they are always passed to your users reading the file. So, not only does it make it easier for you to get to a certain section in your code, but it lets your users see it too. For instance, you could include a copyright notice, a contact number, a website. Anything! Comments help you out in more ways than one but the most important, it helps you find certain elements in the file. For instance, put a comment above all the link styles, then when you go through your work, you can find and edit the styles to your liking. Quickly. Another use? WordPress uses these comments to get the theme name, copyright and more. For the full syntax for WordPress, please see our Coda Clips post. 

Here's how you comment CSS in the cleanest way.

/* All CSS comments begin with forward slash and asterisk
and end with an asterisk and forward slash regardless if
the comment is many lines in length or if the comment is
only one line. */

At the top of every page I code, I'm adding in the following syntax, not only does this give users information about where it originated and who by, it gives me a chance to say that they can't copy it, redistribute it or anything else of that nature and that they are free to have a look around and see how I've done things.

/* All work copyright 2009, Lewis King. All rights reserved. This CSS file was originally created by Lewis, and  you cannot use it for your own work in full or parts. You're welcome to have a look around to see how things are done, but nothing can be taken without his express written consent. */

Then, underneath that, I categorise everything in to the following sub headers.

/* Main */
/* Reset */
/* Link Styles */
/* Header */
/* Wrapper */
/* Content */
/* Footer */
/* Other */

2. Reset.

Use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something. It can be as simple as removing the margin and padding from all elements:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Now I personally don't see the point in using a big reset like Eric and the YUI, personally, I only reset the padding and margin, like the example above. It's just the way I am, but, if you don't run any sort of reset, it could be a lot of time wasted, so give it a go.

3. Start right.

CSS is worthless without a well formatted document. You need to write your HTML before you write your CSS. If you write the CSS first, it'll be a lot harder to get the end results and will take a lot more time than it's actually worth. After remembering all the elements, how you've named them and what they do, trying to add them into a document that might not work the way you want, is going to take a good few hours. Write the whole HTML document first, then do the CSS. Not the other way round.

4. ABC

By alphabetizing your work, you are creating consistency that will help you reduce the time you spend searching for a specific element. By doing this, you can quickly get to the specific property you want to edit and work on it there and then. It also makes your code cleaner for you to read at a later date, along with your users who want to quickly see how you've done a certain thing. 

5. Use Coda Clips

Back to my favourite coding application again, you must thing we're sponsored by it! Coda includes a little add-on of sorts called Coda Clips. What they do is genius. They are a great way of inserting common elements and syntax into a file with just a click of a button. Open up the Clips menu and you instantly see a bunch of different HTML elements, that you could forget when creating a site from scratch. After choosing the one you want, you simply click it, or drag it to where you want and it's instantly inserted into the page. They come with every install of Coda, even the free trial and are editable down to the finest detail. You can add your own, edit the defaults, and more. For some of our favourites, please go here.

What's your favourite way? How do you speed up your coding? How do you keep your code clean? Post a comment below to start the discussion!

First of all, Could you lead us through a brief history of your life? Where you live, what you do?

Well, I’m a 25 year old gal from Northern Ireland. I grew up with a love of art and drawing, along with a real interest in technology. In fact I remember spending hours on MacPaint on my dad's original Macintosh in the late 80's.

I went to university and studied for a degree in Multimedia Design, which covered a wide variety of interactive design and technologies. I graduated nearly four years ago and shortly after started work as a graphic designer for a local company. Concentrating so much on print work made me miss working on web projects, so after a year I started to freelance in my spare time and build up both my contacts and portfolio. I now freelance though I still have a contract with the print company which fits into my freelancing schedule, as I enjoy working within both the web and print industries.

How did you get started out on the web and what inspired you to get into coding?

My web design knowledge before University was close to zero, I I actually remember spending a lot of time learning HTML in my first few weeks! At university we were exposed to so many technologies in the first two years (like javascript/asp/php etc) that were all so new to me, it really ignited my passion for building websites and learning new languages.

What languages do you code and which one do you think is more 1. powerful, 2. simple and 3. you enjoy more?

I am a front end developer so my main languages are; (X)HTML, CSS, JavaScript, Ajax, jQuery and splashes of PHP.

Most Powerful: CSS drives the look and feel of a site so personally I feel its extremely powerful. With the new features in the upcoming CSS3 specification, such as advanced selectors, multiple background images, opacity, drop shadows etc its going to allow even more creative use of CSS.

Simple: (X)HTML - Its the foundation of any website and HTML was the first language I learnt. Its like an old friend now

Favourite - Im a web standards geek so it has to be CSS. I never tire of working and experimenting with it.

What sites you use for inspiration and do you recommend any to our readers?

A quick rundown of my personal favourites would be:

For sound programming advice and a great source of tech commentary I recommend Coding Horror at: http://www.codinghorror.com/blog

NetTuts is an excellent resource: http://nettuts.com, with some great tutorials, tips and screencasts, its a must bookmark.

For CSS its tough to find a better place to learn new techniques than http://css-tricks.com by Chris Coyier and CSS Play by Stu Nicholl's: http://www.cssplay.co.uk

For inspiration im finding Photography and in particular Flickr groups more and more inspiring. Especially those on typography and grids such as: http://www.flickr.com/groups/thegridsystem/pool/

Elsewhere sites like Web Designer Wall:
http://www.webdesignerwall.com/, Smashing Magazine: http://www.smashingmagazine.com/ and Noupe: http://www.noupe.com/ are all great for keeping up to date on trends and finding inspiration.

Do you have any other hobbies? if so what are they and why do you enjoy them?

Yes I like to step away from my mac now and again My main interests centre around art, music, movies and photography. Although im very partial to some serious Mario Kart action on the wii

Do you run a PC, or a Mac, why?

Well I was always a PC gal. However two years ago I tired of my clunky and ever slowing PC and bought a 20' iMac which then turned into a love affair with apple

It has made work much more enjoyable and productive and when your running your own business those two things cannot be underestimated. Although I still have my PC to perform additional browser testing.

What software couldn’t you live without and could you name 3 reasons?

Adobe Photoshop CS4, reasons being:

1. Photoshop has been my image editor of choice for as long as I can remember, so familiarity and ease with it has to be the number one reason.
2. With CS4 the new photo editing workflow, printing options and the kick-ass Content-Aware scale, together with its fantastic 'standard' features and tools make it for me the most powerful image application.
3. I may be a geek in saying this but I actually enjoy firing up Photoshop and going from a blank canvas to fully fledged design, its the tool I use most and even after years of using it I am constantly learning new ways to improve my process and methods.

What’s the program you use to code in? What is so good about it?

Coda - As it integrates everything that I need; namely a code editor, css editor, preview pane, SSH Terminal, website management and an FTP client. The interface is not only beautiful but very clear and easy to use. I could live without it but I wouldnt want to ;-p

When you first started out, how did you promote yourself? If at all?

I’ve been fortunate in that I’ve had to do very little marketing. I submitted my portfolio site to the main CSS galleries when I released it in March 2007 which sent a lot of traffic to the site which in turn lead to enquiries and from this I started to develop an international client base (mainly USA).

I built on this by becoming involved in the web community by reading and commenting on blogs within my niche and tried to develop my brand within the community. I now attend networking events and conferences such as Barcamp, FOWA, Bizcamp etc and have been interviewed on several sites and podcasts.

Next on the agenda is to dedicate some time to building a blog and writing on a regular basis (about time I know!)

What was the first coding job you ever got?

It was for a local business and was a simple 3 page brochure site. Although the first website I built was in my first year at uni and was completely made in tables with a blue background and white text, its pretty hard to forget!

Finally, Where can we find you on the web, Be that your twitter, portfolio or other?

Portfolio: http://www.postscript5.co.uk
Twitter: @gracesmith
LinkedIn: http://www.linkedin.com/in/gracesmith
Stumbleupon: http://postscript5.stumbleupon.com/
Delicious: http://delicious.com/postscript5
Lifestream: http://www.gracesmith.co.uk

What is your favourite interview so far? Who's do you prefer? (A designers or a coders?) Leave your thoughts in the comments below and be sure to sound off your answer!