Web Design

CSS

CSS stands for Cascading Style Sheets and it is really what separates the professionals from the rest of the pack of web designers. Wikipedia defines CSS as:

"Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C)."

In essence it means that the presentation of web page is separated from the content of a web page (or any of the above mentioned formats).

In the early days of the Web, a page would consist of the content of that page and all the formatting of that page.

CSS Centering

The number one question when starting to convert from table based layout to CSS is: How do I center a web design layout using CSS?

In the table based layout it is fairly simple, you fire up Macromedia Dreamweaver, Adobe GoLive or Microsoft Frontpage. You create a new page and you insert a table of 1x1 and set the width of the table to the size you want and you set the align to center. And that's it. By doing a standard 3 column layout with 175 pixel sidebars and 450 pixel content area with a 1 pixel gray border, 5 pixels of padding and a gray background, it would be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>CSS Centering</title>
</head>

<body>
<table width="750" border="1" cellspacing="5" cellpadding="0" align="center" bgcolor="#cccccc" height="100">
<tr>
<td width="150">
<p>Left Column</p>
</td>
<td width="450">
<p>Center Content</p>
</td>
<td width="150">
<p>Right Column</p>
</td>
</tr>
</table>
</body>
</html>

which looks like :

centered 3 column layout using a table

To accomplish CSS centering, what you would do first is create a container, then add the 3 columns. The centering of the container is exactly where the problem lies. So lets first create the required html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>CSS Centering</title>
</head>

<div id="left">
<p>Left Column</p>
</div>

<div id="content">
<p>CSS Centering</p>
</div>

<div id="right">
<p>Right Column</p>
</div>

</div>

</body>
</html>

and then add the CSS;

#container {
margin-left: auto;
margin-right: auto;
width: 750px;
background-color: Gray;
}

#left {
width: 146px;
float: left;
border: 2px solid Silver;
height: 100px;
}

#content {
width: 446px;
float: left;
border: 2px solid Silver;
height: 100px;
}

#right {
width: 146px;
float: left;
border: 2px solid Silver;
height: 100px;
}

which looks like:

centered 3 column layout using CSS

And there you have it, perfect..until you check it in another browser like IE6 (quirks mode) or IE5.5. Fortunately, IE6 recognizes the doctype and that should render it as intended. There is a bit of a hack to get the proper CSS centered layout done:

body {
text-align: center;
}

Adding this, centers your layout as intended however it introduces another factor, all your descendant elements are now centered! So in this case you would need to add another entry in your stylesheet to achieve the proper center layout without having everything centered.

p {
text-align: left;
}

Most CSS centered design with a fixed layout use the above example of CSS centering. There is however another method using the margins instead. Given the same html code and CSS, here is the updated container declaration:

#container {
position:absolute;
margin-left:-375px
left:50%;
width: 750px;
background-color: Gray;
}

And here is the result

CSS centering using negative margins

This solutions has a greater range of browser compatibility but remember to do the math correctly. Inspiration thanks to the Zen of CSS Design, it is well worth reading it.

web design xhtml introduction

Every conversation about web design starts with html, the basic language of the internet. HTML is needed in order to display any form of content, making it the building block of the web. HTML enables a visitor to a website to show data to the user's screen and organize information.

HTML now has a number of related buzz words - XML, XHTML and DHTML. XHTML combines HTML and XML into a single format (HTML 4.0 and XML 1.0). Like XML, XHTML can be extended with proprietary tags. Also like XML, XHTML must be coded more rigorously than HTML. Over the years, HTML coders have become sloppy, because Internet Explorer and Netscape had many variations in HTML coding. With XHTML, coders must conform to the rules.

XHTML is HTML using an XML syntax to provide stricter rules and more organization. DHTML is a combination of JavaScript, CSS, DOM, and HTML to provide dynamic web page effects.

Unlike HTML, XHTML takes on the strict syntax of XML. This comes packaged with a few simple rules:

XHTML tags have to be properly closed in the order they are declared
tags and attributes are case sensitive, so they have to be in lower case
All attributes must have a value
Proper HTML entities and character values must be used

Another advantage of using XHTML is that it separates the content from the styling and this is where is starts getting interesting. HTML used to be cluttered with font and styling tags, while XHTML bravely eliminates these. Using a combination of CSS and XHTML, one can create a great looking page with properly optimizated content and great graphics to go along with it.

XHTML comes in three flavors

Transitional - Loose set of XHTML often used for HTML to XHTML transitioning
Frameset - Identical to Transitional, but allows the use of frames
Strict - Firm foundation for XML syntax eliminating the use of all deprecated tags and attributes such as the <font> tag.

The latter is the preferred format of webpages. The standard has been set in the year 2000! Here is an example of a properly formed page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="content-type" content="text/html;charset=utf-8" />
       <title>Title</title>
   </head>
   <body>
    <h1>Your major heading here</h1>
    <p>
      This is a regular text paragraph.
    </p>
    <ul>
      <li>
        First bullet of a bullet list.
      </li>
      <li>
        This is the <em>second</em> bullet.
      </li>
    </ul>
   </body>
</html>

Every tag here is properly closed and formatted properly. Writing proper xhtml will allow you to create better pages by complete separation of content and styling. The styling is where CSS comes into play!