Site Design and Layout using css
13/12/2009

Why?

css is a powerful element of web technology. It enables you among other things to control the look feel and in some case’s interactivity of your web site.
An example application of a css class would be for your page titles. Let's say that you want every page title to be red 25px high and underlined.
You could apply these elements to your title page by page like this.

<h1><font size="25px" color="red"><u>Page Title</u></font></h1>

Which would display this:

Page Title

This would give you the desired effect and the end user would know no different.

However Let's say you need to change the style of all your headers to be 26px high, bold and Blue.
If you only have 5 pages this is not a problem you can change one and copy and paste accross the other 4 and the margin for error is tiny.
What if you have 100 or even 1000 pages your margin for error becomes much greater and it becomes a time consuming task.
If you had instead utilized css and used a class to define your style it would be a single change that is required and it would be global.
For Example:

css file:

.HeaderStyle{ color: Red;font-size: 25px; text-decoration: underline}

Page header:

<h1 class="HeaderStyle">Page Title</h1>

Simply Changed to:

css file:

.HeaderStyle{ color: Blue;font-size: 26px; font-weight: bold;}

Page header:

<h1 class="HeaderStyle">Page Title</h1>

As you can see the text for the class in the css file has changed but the html has remained the same for the header text.
This is the key strength of css for me and saves me a lot of time when I want to chage the way my site looks and feels.

Alternatives

There are alternative to using css and you may come across instances where you cannot or should not use css for either layout or styling. Some of these reasons may be that you are working on a site that has not utilized css and you only need to make small changes, You may need to work around a css bug or browser compliance issue (see Apply a different or additional Style Sheet Based on Browser), or you may simply feel that css is not appropriate in these instances you can make use of the following.

Style declared in resx file (asp.net)
Tabular layout
Declare attributes in html

However I would stress that most of the time css provides a robust way of laying out and styling your website and I would always use css styling from the start of any project and try to avoid the use of both tabular layout and html style tags. I do however use Styles declared in resx files if I am using css and one such use of this on my site is the flag image next to the language dropdown.

How To

For this I have used an asp.net example but the principal is the same for php etc.

Create an aspx page called Test.aspx and place it in the root of your site.Create a Style Sheet called Test and place it in the root of your site.

Add the following code in to your css file imediately below the last } contained in the file.

.TestClass{ font-size: 23px; font-weight: bold; color: Red;}

In the head section of you page just above the </head> tag add the following code .

<link href="Test.css" rel="stylesheet" type="text/css" />

Create a label or copy the below

<asp:Label ID="lblTestCss" runat="server" Text="This is a Test"></asp:Label>

Add the following text in to the first label tag

CssClass=”TestClass”

It should look something like this

<asp:Label ID="lblTestCss" runat="server" CssClass=”TestClass” Text="This is a Test"></asp:Label>

Run your project and you should see a page with the following content.

This is a Test

That is essentially it!!

A few consideration’s/points to note.

• If you are using asp.net masterpages then the link to the css only needs to go in to the masterpage and not each page providing they are using the masterpage
• If you are using Visual Studio or Visual Web Developer you can drag the css file on to the page in design view and it will insert the relevant link
• In Visual Web Developer 2008, Visual Studio 2008 and Visual Studio 2010 there is a Manage Styles Window that can be accessed from the View Menu. It is fairly intuitive and easy to use

Summary

That is essentially it!!

A few consideration’s/points to note.

If you are using asp.net masterpages then the link to the css only needs to go in to the masterpage and not each page providing they are using the masterpage
• If you are using Visual Studio or Visual Web Developer you can drag the css file on to the page in design view and it will insert the relevant link
• In Visual Web Developer 2008, Visual Studio 2008 and Visual Studio 2010 there is a Manage Styles Window that can be accessed from the View Menu. It is fairly intuitive and easy to use

Further Information

W3C - CSS tutorial starting with HTML + CSS
W3C - Cascading Style Sheets Home Page
Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages (Programmer to Programmer)