While the average web designer already knows what CSS is, the average internet user might have no idea what this term refers to. In the hopes that budding web designers find this article, I’ll give a brief explanation about CSS (Cascading Style Sheets) and try to explain, in laymen’s terms, what it actually is.

A Non-Technical Definition

Imagine for a moment that you are writing a book. You’ve spent hours and hours developing a plot, characters, narratives, and other literary devices in the hopes that readers will enjoy your amazing story. You have finally arrived at the point where you would like to publish your content for the world to see. For the purposes of this example, we will call this content HTML. At the moment it is nothing more than plain, boring, simple text. There are no italics, there are no bolded words, there are no big headlines… just standard 10 point text.

When you finally send your story over to the book publishers, they read it over and start thinking about the best way of presenting it. Maybe your story should be written on old, torn up pages – or perhaps a more suitable brillent and pristine white finish would be more suitable? Regardless of what they decide, these are questions specifically related to presentation, not content. For the purposes of this article, presentation is CSS.

As you are probably starting to understand, there is a theoretical division between the content of your story and the presentation. They certainly influence each other, but the words that make up your story have no inherent effect on the aesthetics of your printed book.

The modern web has adopted this philosophy and creates a clear separation of content (HTML) and style (CSS). If you only take one thing away from this entire article, remember that content is HTML and style is CSS.

So what is CSS?

Now that you have a basic understanding of the division between CSS and HTML, it’s time to become a little more technical. Take a look at the little HTML snippet below. It contains a few basic tags, but nothing more…

<p>
This is a paragraph, with some <strong>bolded content</strong>.
</p>

When you look at the above HTML you can see pretty clearly what the author was intending. They wanted a paragraph with some bold text. But it’s important to realize that when a web browser (eg. Chrome, Firefox, Internet Explorer) reads this HTML, it does not have any idea what the “strong” tag actually means. It guesses that you want that text bolded, but it’s really nothing more than a guess.

Enter CSS. CSS is a way to tell the browser exactly how you would like to style your content. Perhaps within your story, you want all “strong” tags to be red instead of bold. Well, with CSS that’s really really easy:

/*
* This is CSS!
*/
strong {color: red;}

At the most basic level that’s all it is. CSS is just a way to tell the browser how it should present your content to the user. These days CSS is way more complicated than just bolding text (it’s used to construct entire layouts).

But Wait, there’s more!

In the olden days, people used to use HTML to style their content. Originally, HTML contained special tags to make text bold, italic, or even blink. The problem with this method of organization became evident when larger sites started publishing their content. Big sites would have thousands of pages, all written in HTML, with huge numbers of tags that would define how content should look.

This created situations where changing the style of your content would require going through thousands of individual documents, modifying the archaic HTML tags that would force text to be bold. With the adoption of CSS, a big site only needs to change one central file to see the changes across their entire site.

Where should I start?

If you actually want to start coding CSS and HTML, then you should take a look at the following resources. They all do a great job of explaining the basics:

• CSS Tricks
• Nettuts – CSS & HTML Basix
• Introduction to CSS Layout

So, before getting to far into your HTML, you’ll need to drop in a small JavaScript reference to HTML5.js, which “shims” in HTML5 support for IE8 and below. It’s easy enough to do this, just use this little code snippet:

<!-- If less than IE9, include the HTML5 shim -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Alright, now that we’ve considered older browsers we can get started with some actual HTML5 code. Starting from the very top, we need the doctype. Thankfully, the HTML5 doctype is simple compared to the ones you’re probably familiar with. Look at the beautiful simplicity of the document below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 Example</title>
  </head>
  <body>
    <p>This is a perfectly valid document</p>
  </body>
</html>

Mmmmm, so much nicer than before…

What About Self Closing Tags?

One of the design choices that I really appreciate about HTML5 is the fact that you can optionally self-close tags. I plan to write my code without the self-closing slash, as I find it less noisy, but there is nothing wrong with self closing tags.

<!-- Totally valid -->
<img src="path/to/img.jpg" alt="valid" />

<!-- Also perfectly valid (and less noisy) -->
<img src="path/to/img.jpg" alt="valid" >

HTML5 Semantics

HTML5 gives us the ability create documents that are incredibly semantic. All the new elements were created with modern websites in mind, as you’ll see in the examples below:

<header>
  <h1>Large Title</h1>
</header>

<nav><ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul></nav>

<section id="content">
<ul id="posts">
  <li><article>
    <h3>Article Title</h3>
  </article></li>
  <li><article>
    <h3>Another Article Title</h3>
  </article></li>
</ul>
</section>

<footer>
  <address>New York, New York/address>
</footer>

That’s a very small example of what we can do with this new kind of markup. For a full explanation of all the new tags, checkout the official HTML5 specifications. It can be a little dry, but it’s worth slowly reading over.

But really, they are kinda nice and having one makes your site seem just a little more professional. So today the gloves come off and we’re going to make a sweet favicon for an application I’ve been working on.

But Where do I Start?

The first step I like to take when making a favicon is to create a 16px by 16px Photoshop document – which is the standard favicon size. For this quick tutorial I already have a nice little logo created – and I’ll be using that to make my favicon.

Keep it Simple, Stupid

Because there is so little space to work with, it’s important to keep your favicon as simple as possible. My starting logo is a bit too busy to make into a favicon, plus favicons need to be square – so what I’ll probably do is lose the text and use either just the envelope edges and the heart.

My Starting Logo, I'll be losing the text and keep just the envelope and heart.

Some Playing Around

After playing around for 10-minutes in Photoshop, I quickly realized that 16-pixels is just too small to preserve the definition of the actual envelope. What I’ve ended up doing instead is using just the edges (red and blue stripes) of my envelope with a heart in the middle. A couple things I noticed as I did this:

1. When transforming things down in size, blacks will sometimes become a little too gray and need to be darkened (using the Photoshop burn tool).
2. Whatever you end up with, run the sharpen tool over it a few times. It really helps clear up any blurry edges that resulted from such a dramatic size reduction.

The final result looks something like this:

Next Up, Turn that PNG into an ICO file…

Now comes the easy part. First, save your favicon as a PNG file. PNG is better than JPG because it is a lossless format, and with such a small image, you cannot afford to lose any quality. Next, head over to this sweet favicon generator – the best tool I’ve found for converting images to the ICO favicon format. To be honest, I tried a few different sites and they all gave me problems except for this one.

Making it Display on Your Blog or Site

Once you have the ICO file on your computer, you need to rename it “favicon.ico”, anything else and it simply won’t work. Next you need to upload the icon to your public_html directory (it won’t work anywhere else). Finally, you’ll also need to include this small snippet of code in the <head> of your HTML files:

If everything is setup properly you should now see a favicon when you refresh your site. I should mention that I did have a problem with Firefox not displaying the icon, but I think it was a caching issue because I verified it with this seositecheckup tool and everything seemed good!

Here is what it looks like using Safari

As it stands, rounded corners are currently supported in modern versions of Firefox, Safari, and Chrome. Unfortunately, you’ll need to use two different declarations to get all these browsers working. The basic declarations should look something like this:

/* Supported in Firefox */
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

/* Supported in Chrome and Safari */
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

The Rounded Example

Below you will find an example of rounded corners in action. If you’re using a modern browser you should see the grey box with rounded corners. (if using IE, I’ve put in a screenshot of what things look like when using a respectable browser)

.rounded {
width: 500px;
padding: 30px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Screenshot Example For Internet Explorer (sigh…)

But What Does the W3C Say?

Due to the fact that border-radius is not officially supported by any browser, it might be a good idea to check out what the W3C has to say about the subject. I was surprised to see how detailed they were and I highly recommend checking out their official specs. As a reference, the official (but currently unsupported) declarations are:

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

There are tons of neat variations you can do, but they go a little beyond the scope of this article. Check out the W3C specs for the full explanation, or, check out some of these links that do a good job documenting css rounded corners:

• CSS3 Info
• The Art of Web
• Zen Elements

One thing I was really missing was my faithful server output that I would constantly monitor. I could check every SQL query, which actions were getting triggered, and most importantly (IMO) – the params that were getting passed into my controllers.

Well finally I’ve found a solution (thanks to this link)!

Long story short – all you need to do is SSH into your hosting and then run the following command (from your application directory):

tail -f log/development.log

This will allow you to see the standard development.log in real time. Hope this helps someone as much as it helped me!

SSH, OSX and Terminal

I’ll retrace my exact steps here, including hot-keys. First we need to open up the terminal – a basic prompt interface that lives beneath all the bling of OSX. Rather than digging around in your applications folder, just hit apple-spacebar to open spotlight. Type “terminal” and it should show up right away.

Inside the Matrix (Terminal)

Now you can start to feel like a hacker. Thankfully, OSX ships with SSH pre-installed, which makes this tutorial very easy. To connect using SSH you need to type:

“SSH username@www.yourwebsite.com”

After pressing enter you’ll be prompted for two things… a password and a yes/no question asking if you want to add a record of the SSH connection (or something like that). While typing your password you can’t actually see the characters, but it is really working. Also, you need to write a full “yes” or “no” in response to the question…

That’s It!

You should be connected and ready to go. There are many different SSH commands, so I won’t go through those right now, but here are a few to get you started:

• ls – Used to list the contents of a directory
• cd .. – Used to go back (or up) one directory
• cd directory/name – Used to navigate to a directory
• exit – Used to end the SSH session
• pwd – Prints the working directory

I would highly recommend reading this article, especially if you work in a large corporate environment. The follow-up response by Dustin is also really interesting, asking designers to take an introspective look at their taste, as well as blaming poor corporate leadership for bad design (taste).

But don’t take my word for it….

Prepare for your mind to be blown by reading Dear Dustin Curtis…

An Aside

This article also ended up leading me to the manifesto of 37signals, another life changing read.

Download Jute Texture

Step 1 – Setup Your Photoshop Document

Go ahead and create a new photoshop document that is 600px by 600px. Choosing a large tile size will make our background seem less tiled, but may require a little more work depending on the image your trying to make repeatable. Specifically, if your source image has a lot of color variation you might want to choose a smaller tile size to make things easier on yourself. The image we are using has a very consistent color scope, so our 600×600 tile size should be easy enough to work with.

Step 2 – Paste in the Jute Texture

Next you need to paste in the jute texture. I’ve oriented mine to the top left and scaled it down until it just fits the canvas. You’ll end up cutting off the right side of the image.

Step 3 – Using the Offset Filter

Now comes the fun part! With your texture layer selected, goto the top menu and choose Filter > Other > Offset. We want to offset our image horizontally and vertically by 300-pixels, allowing us to see where our pattern has its seams. After applying the filter you should see your texture now has 4 defined quadrants. In the next step we are going to clean those up and make our pattern seamless.

Step 4 – Smooth the Divisions

This is the hardest part of making seamless textures. We need to smooth out the dividing lines using photoshop’s many helpful tools. I’ve found two different ways to do this, but the method you use ultimately depends on the texture you’re working with. Some textures are really easy to turn into a pattern, other textures are almost impossible. This jute texture is relatively easy thanks to the consistent color, but there are a few tricks I used to get things just right.

Method #1 – (I found this works better for this texture)

1. Copy areas of the texture that have no seam and paste them (in a new layer) on top of the seams. Adding some feathering to your selection (around 5px) will make things a little smoother.
2. Use the eraser tool (using a soft & small setting) and erase the edges of your new layer.
3. You’ll find that the edges of your new layer look a little blurred and don’t really fit in… to fix this use the sharpen tool along the edge.

Method #2

1. Use the clone tool to remove the seams
2. If you find things are blurry use the sharpen tool to make things fit properly.

TIP: When you have a relativity seamless pattern you can use the burn and darken tools to make the lighting more standard…

It definitely takes a little time to get things perfect, but it’s worth it in the end. It took me around 20-minutes before I had a semi-perfect seamless texture. Below you’ll find the final image:

Download Seamless Jute Texture

Nothing to see here folks, just another entry in the wooden texture department. As always, please use these textures for anything you want, commercial or otherwise. They were taken in my home with my girlfriends Rebel and a sweet German tripod.

Enough talk, more wood texture!?! (click for full size)

If you make something out of these textures and want to share, I’d love to see your work…

Step 1 – Make or Find a Button

For this tutorial I’ll be using my green glossy buttons from a previous freebie post. Feel free to download the source PSD and follow along, or just make your own button style.

Step 2 – Prepare the Button

Before we really get started, it’s important to know what size we want to make our button. For this example I’ll create a button that is quite large, I’m thinking around 300px by 60px in size. So go ahead and crate a new Photoshop document with the dimensions you want.

After you’ve created the document, import my button (or yours) and scale it up so that it fills almost the entire document. If you have a little extra space on the sides it’s not the end of the world, just make sure that your button is perfectly centred on the canvas. To centre somthing perfectly you just need to:

1. With your button folder/layer selected, use the marquee tool (m-key)  to select the entire canvas (apple-a)
2. Without deselecting anything, choose the Move tool (v-key) and use the alignment tools in the top panel to centre your button vertically and horizontally.

A Perfectly Centred Button

Step 3 – Create a Rollover State

Next up we need to create a rollover state. Basically, we need to double our canvas size (vertically) and duplicate our button. From the top menu select Image > Canvas Size… and double the height of your canvas (120px if you’re following my example). Once your canvas size is doubled, divide it vertically with a horizontal guide.

Now you need to duplicate your button and centre it perfectly in the top section. The top button will be what our button looks like when you rollover, for now it looks the same as the bottom.

Next we add a rollover effect. If you’re using my buttons, you can open up the layer styles of the top button and slide the inner glow up to 75%. This will give our button a subtle glow effect when we hover over it.

With your button and rollover effect ready to go, you can now “save for web.” One important thing to consider here is what your background will be like. For my example I’ve made the background transparent and saved my buttons in PNG format. This means my buttons are not supported in IE6, but you could just as easily choose a background color and ditch the transparency, making your buttons IE6 friendly.

Step 4 – CSS Sprites and Some Basic HTML

Now comes the fun part, creating the button. First, we’ll start with some markup, a simple and humble link:

 <a href="#" class="button">My Glossy Button</a> 

I’ve given this link a class so that I can target it easier, but other than that it’s just a plain old link. Moving on let’s do some CSS magic. The basic idea is that we hide the link text using the text-indent property and give the link a background-image that only shows the non-rollover state. On hover we simply shift the background to show hover state, avoiding any loading time that is typical of CSS/Javascript image swaps.

a.button {
display: block;
width: 300px;
height: 60px;
text-indent: -999em;
background: url(css-glossy-rollover.png) 0px -60px no-repeat;
}

a.button:hover {
background-position: 0px 0px;
}

If you’ve done everything right the button should look something like this:

My Glossy Button