CSS Web Design

Coding Your HTML

When starting to code a new web page, before cutting up images think of the basic content of the page apart from the visual design. This means the basic text content as well as any images or other elements which are actual content instead of just decoration. Start coding by adding all this content to your HTML page and then marking it up with simple basic semantic HTML tags such h1 through h6 tags for headers, p tags for most other ordinary text, ul for unordered lists, ol for ordered lists, etc. After you are done with this step your content should look organized and readable when viewed in a web browser even before you’ve added any CSS styles.

The next step is to look at the content in terms of related chunks of information thinking partly of how it will work with the structure of the visual design. Use div tags with semantic classnames or IDs to group and divide content into different sections such as “header”, “main-nav”, “sub-nav”, “main-content”, “footer”, etc.

Add any extra div or span tags needed to recreate fine details of the visual design such rounded corners. Use as few of these as necessary and try to use them in a semantic manner if possible. Use existing semantic tags for styling without adding extra markup simply for the design if you can. Also think in terms of creating standard reusable elements that can be used throughout the site rather than creating elements that will only be used once. Don’t give everything a classname. Style elements instead by selecting them by their semantic tags or by the div they reside within whenever possible.

Coding Your CSS

Code your CSS together with each step of coding your HTML. During the first step add background colors and add basic text styles such as fonts. For the second step you can code the rough layout of your different sections as well as adding more background colors and/or images. Finally add in all the remaining fine details to recreate the finished design. (This assumes you are working from a design mockup created before you started writing any code.)

Semantic Coding Summarized

1. Add content to HTML and mark up with basic semantic tags.
2. Use div tags with semantic class names / IDs to group together chunks of related content.
3. Add any extra divs or spans needed for the visual design details (as few as possible).

There may be certain cases in which you want to disable a section of a form yet you still want your users to know it’s there. For example if certain options in the form are only available to paid members but not for users of the free product. Graying out those options for non-paying members can serve as an incentive to encourage them to subscribe to your paid service. (Include some extra text explaining why the options are grayed out along with a subscription link.)

Steps (Ideally you would accomplish these using JavaScript, PHP or another language instead of hard-coding)

1. Add a classname like “disabled” to the containing fieldset or other containing element of the section you wish to disable. (Or if you only wish to disable one or a few scattered elements add the classname to those individual elements.) Use this classname to style the grayed out section.
2. Add the attribute disabled="disabled" to each form element, e.g. inputs, select tags, textareas, radio buttons or check box tags.
3. Add an extra paragraph containing text with an explanation and a link to more information or to a subscription form if appropriate.

Ideas for Styling

If you are disabling a whole section such as a fieldset or applying styles to another element containing the form elements you could add a special background color, special text colors or borders (gray shades would be appropriate).

Another nice elegant way to style your grayed out elements would be to make them partially transparent:

.disabled
{filter: alpha(opacity=60);
-moz-opacity: .60;
opacity: .60;}

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.

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.