CSS Web Design

First, in an HTML document, create a simple unordered list of the items in your menu.

Example HTML for Button List:
<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">FAQ</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>

In your CSS, set the margins and padding of your list to zero and the list-style to none.

CSS for Unordered List:
ul
{padding: 0;
margin: 0;
list-style: none;}


Set the text alignment of list items to center then define them as a block with a left float to line them up. Based on how many items you have in your menu, set a percentage width (divide the number of buttons by 100.)

CSS for List Items:
ul li
{text-align: center;
display: block;
float: left;
width: 20%;}


Define your links as blocks also and add styling to make them look like buttons (background, text color, border, etc.) Give the links a few pixels of padding. Adding a slight margin will separate the buttons:

CSS for Links:
ul a
{background: gray;
border: 1px solid black;
color: white;
margin: 1px;
text-decoration: none;
display: block;
padding: 2px;}

Slight variation:

Using the above code your button list will automatically stretch to fill the available space. If you don’t want the list to stretch to fill its container then add a width to the ul and set margin to auto to center it if desired.

Finishing touches:

You can add a hover style to your buttons using code such as the following.

CSS for Hover Effect:ul a:hover
{background: red;}

Instead of using a solid color as a background you can use images to further customize the look of your buttons.

I just uploaded 3 new Photoshop layer styles designed to be used together to create soft-edged interfaces. Download them from the “Goodies” section of my home page here:

http://kristinbradley.com/goodies/effects.html

Use the “Soft Interface” style to create an interface shape. This style works with a variety of colors or shades of grey. (Works best with mid-range tones.) Then use the soft button style to create buttons to go with the interface you created. Looks nice with buttons using the same color as the interface but experiment with different colors depending on the effect you are after. The final layer style in the collection is the “Soft Indent” style which you can use to further dress up your interface. Add 1 pixel horizonatl lines or 1 pixel “dots” on a new layer about the interface shape you created. It doesn’t matter what color you make these lines. They will take on the color of the underlying interface layer.

http://cssoff.com/

I learned of this competition just recently. I’m not exactly sure who is behind it or the number of entries they are expecting but it looks interesting.

Entrants have 24 hours to create a web page using CSS and HTML from a Photoshop template which will be posted June 1st 2007 when the competition starts.

What’s the difference between styling links using just “a” vs. styling links with “a:link”?

Example 1:
a {color: red;}

Example 2:
a:link {color: red;}

As would be expected if you use “a”, all of your links both visited, unvisited, hover and active will be the same style (red in the above example) unless you also specifically set different styles for visited, etc. links.

If you instead use “a:link” then only unvisited links will take on the styles you have set. Visited links will remain the browser’s default style unless you add another style for “a:visited”. (The same goes for hover and active links).

Normally if you set a style for non-visited links you would want to set a different style for visited links. In that case it doesn’t seem to much matter whether you use “a” or “a:link” to style your links since setting another style for visited links using “a:visited” would work the same. (a:visited is more specific so would override styles set for “a”.)

So is there a reason to use one vs. the other? Well, if for some reason you want all your links to be the same style style whether visited or unvisited then using “a” is the logical choice since it requires the least code. Let’s assume you want different types of links to be different styles however.

For styling your default links it doesn’t really matter which you use. Let’s say though that you want your deafault links in your main text to have different styles for visited, unvisited, hover and active but you want all the links in a special section such as the navigation menu to be the same style regardless. In that case there are some differences between using “a” vs. “a:link” depending on which browser you use.

In Firefox and presumedly other Mozilla-base browsers you only need to use .menu a {color: green;} to overide all the different default link styles you’ve set:

Example 3:
a:link {color: red;}
a:visited {color: black;}
a:hover {color: blue}
.menu a {color: green;}

It doesn’t matter whether you use “a” or “a:link” for your default link style. Your special links must be selected using a class name rather than a generic HTML tag such as h1 however. This works in Internet Explorer with one difference, the special links must be within a container with an ID rather than a class name.

This blog is dedicated primarily to CSS and (X)HTML coding tips and issues as well as things like Photoshop tips and more general design related topics and tutorials, browser bugs, quirks and work arounds.

The intended audience for this blog is web designers and developers or anyone interested in learning more about CSS, HTML and web design.

About Me:
I originally started doing web design and coding while living in Japan. (I planned and taught an HTML class for the Tokyo PC Users Group.) I am self-taught in CSS/(X)HTML coding and web design although I have a B.A. in Fine and Applied Arts from the University of Oregon. I’ve been coding HTML since the late 90’s, started coding CSS around ‘99 (mainly for styling fonts originally) and I’ve been coding table-less CSS layouts since 2001.