CSS Menu Maker – Menu Making Contest for Web Designers

Russell Taylor of cssmenumaker.com. The purpose of the site is to provide a library of CSS Menus that webmasters can customize and download. In order to jump start the site and increase the library of available menus he is holding a Menu Making Contest. The grand prize is a free iPhone to whoever submits
the best menu design! Learn more.

CSS tips and tricks for your website

I’ve been writing CSS for about 3 years now and I still feel like every time I open up a blank file and begin writing CSS for a new design I learn something new.

For those of you that are new to CSS or experts always looking for a new trick, here are some of things I do on a regular basis to keep my code organized (kind of).

1. Size text without using pixels

If you’re wondering how some designers get font sizes to work using em as a unit rather than px, it’s easy. There is a trick that was written about a while ago (maybe on ALA) that resets the font sizes for the entire site so that 1.0em is the same as 10px.

body { font-size: 62.5% }


Simply throw the font-size: 62.5% bit into your body styling and you’re done. Now you can use ems to sizes your fonts rather than pixels.

So your paragraph styles might look something like this:

p { font-size: 1.2em; line-height: 1.5em; }


You might be wondering why it matters how you size fonts?  Any major site needs to be able to withstand a user enlarging text (old people use the web too!), and setting absolute sizes is not good practice.

2. Make your code easy to read

When I was looking at some of the CSS coded by Tatem Web Design I noticed that he separated his heading tags nicely. It looked something like this:

h1 {}
    h1#logo { font-size: 2em; color: #000; }
h2 {}
    h2.title { font-size: 1.8em; font-weight: normal; }


Quickly scanning the CSS for the different heading tags is a breeze if you use this technique. It is also helpful if you’re sharing code or working on a large site where you are using the same heading tags (say, h2) in multiple places since you’ll be able to style each one independently and not worry about child classes inheriting attributes from the parent class.

I also use similar techniques for paragraph tags, anchor tags, and any other tag that requires multiple classes to look correct in every instance.

3. Separate code into blocks

This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change.

This is how I usuall break down my site:

/* Structure */

This is where I’d put the primary site structure divs and classes.

/* Typography */

This is where I would list things like paragraphs, headings, and other miscellaneous font styles such as small and strong tags.

/* Links */

This one is simple – all the styling for anchor tags.

/* Lists, images, etc. */

This is where I would style images, lists, and any other elements that didn’t fit into the rest of the section. If I have an unordered list for the navigation I might setup a new section for navigation and setup all the styles for the navigation, including the list and link styles, in this section – it makes editing the navigation much easier.

4. Stop using so many divs!

This has been echoed by a lot of coders and standards nuts, and while I don’t think there is anything wrong with using a lot of block level elements, I laugh a little when I see someone style their article headlines using a div rather than a heading tag. Some people even style their bylines using a div! Try using the small tag or the a span for goodness sake.

5. Style everything at once

I noticed that I was typing “margin: 0; padding: 0;” in just about every element. I remembered seeing someone use “*” to style everything on a page at once. I decided it didn’t make much sense to define margin and padding over and over when I always gave them the same parameters.

It’s easy to do:

* { margin: 0; padding: 0; }


Now you only have to define margin and padding on elements where you actually want some.

Know of any other tips or tricks? Let me know…
Matt Tatem

College to learn website design?

A common question I get from people, is whether it makes sense to go to college to learn web design?I’ve talked about the web design profession in other articles. Yet, as you will see in the following email I recently got, I haven’t dealt with all the issues regarding web design and education:

Hi Mr. Tatem,

Anyway, I am interested in web design. I am in the middle of trying to figure out whether I should go to my local community colleges for courses in HTML, photoshop, Dreamweaver, etc … or an actual art school for graphic art/ web design. Of course cost is a factor.

I am a mother of two, and my work schedule needs to be flexible. I am very creative and have a great eye for design.

My question is, which course of action you recommend? How much education is necessary? Is a degree necessary, if so, what type? associate, bachelors, certificate?

What are the salary potentials in web design working for yourself and for outside companies (I have research outside company positions advertising 40k – 50k, is that realistic?)

I’m not young, (a youthful 44) and I really need to do something in the form of a career for myself, other than taking care of everyone else.

Thank you so much for your time

Laura #####

1. First, let me begin by saying that college degrees always help when looking to get hired as an employee. This is especially true in larger companies, where they have strict rules (in their HR departments) that have to be followed.
2. On the other hand, if you are looking to become an independent contractor, degrees from college won’t help much … if at all.
3. How much education is necessary? Is a degree necessary, if so, what type? associate, bachelors, certificate?
4. The most important thing to have in the website design field is skill and experience. If you have a solid portfolio, where you showcase your talents as a web designer or web developer; that will go a long way to securing a job.    … When I hire people, I look at their past work and skills before their degrees.
5. I would argue that if you have say, a bachelors in some other field (art, history) and then you supplement that with a certificate in website design, you would be better off than if you just had a tech certificate only. I have found that companies tend to like university graduates more than tech school grades.

Website Design Salaries

• I can’t speak to exact salaries, as this will change from state to state or country to country. But I know that in large companies, degrees play a big role in terms of your earning potential. But again, more important than a college degree, is your skills.

Website Design’s Most Valuable Skills

• Typically, the more technically advanced your skills are, the more money you will make. And this applies to both freelancers and employees. So unless your a fantastic artist (in the top 1%) I would be working towards learning more and more advanced skills like PHP, Javascript, Flash and AJAX. Not only will you be able to command a higher wage, you will be opening yourself up to many more job opportunities.

Case in point .. me!

When I was a really active contractor, I found myself more and more busy as I learned new languages. Over the years, I have done commercial work with around 9 programming languages! When you have that kind of flexibility and experience … it’s hard NOT finding work.

Matt Tatem
www.tatemwebsitedesign.com