Your New Website is Inside

Today’s Internet is a lot different than it used to be. With new developments such as SEO (Search Engine Optimization) and web standards, building websites the same old way just won’t cut it anymore. The W3C (World Wide Web Consortium) creates guidelines and regulations that designers strive to follow to make their sites as accessible and functional as possible. Compliance with W3C standards ensures that your site achieves its full potential across a range of systems. However, the W3C regulations continue to change everyday. Do these new rules and regulations on the Internet mean that your website has to suffer aesthetically? The answer is NO. With CSS (Cascading Style Sheets), web designers have the ability to do anything on the web, from browser compatibility to full control of all the aesthetics of any web page. CSS also gives a more solid foundation for SEO, usability, and compliance with web standards.

From a development aspect of web design, the first great advantage of CSS is cross browser compatibility. Every web designer has sat down at a foreign computer and opened one of their websites only to find that the layout is mangled. Everything is either in a different spot or not present at all. This happens because different Internet browsers, and even different versions of the same Internet browser, display websites slightly differently. Web designers are forced to test their builds on as many browsers as possible to minimize this problem. However, users constantly upgrade their computers and download new features to enhance their experience on the Internet. As a developer, you can never control all the variables, but you can eliminate the majority of the problems by using CSS – an extreme advantage when one considers that everything on the Internet is about usability. If the user is at ease and comfortable then they are more likely to return to your site, purchase your product, recommend your service to others, etc. If they get confused because the navigation moves or doesn’t function properly, they are more likely to move on to another site.

Web designers know that the power of CSS gives them many options, but a great deal of designers do not use CSS to its full capabilities. By learning about this language, you can develop it to do more. The cascading part of CSS is the most important feature and yet it is still the most over-looked. CSS makes it possible for the designer to alter one file and, in doing so; make modifications to the entire site. For example, rather than adjusting every font tag individually, this programming technique allows the designer to alter every font in the entire site by changing a single tag in the CSS file. CSS also creates code that is cleaner and less bulky than other scripting languages. Less code means that the search engine “bots” will have enhanced access to the content on your website. In turn, your website will be indexed more effectively, matching your site with appropriate inquiries from users looking for your services. Older development techniques like frames and tables limit the search engines’ ability to crawl your website, so the bot will leave without registering the content. This significantly limits the search engines’ ability to view and catalogue all of your information, and ultimately limits your presence online.

Increased ease and efficiency is another great benefit of CSS. Once you have obtained a decent knowledge of the programming technique, however, it is very easy to let the styles of the CSS control the way you design. CSS functions much like building blocks. At the bottom levels, building is very easy to accomplish, but the larger you go the more advanced and detailed the work becomes. I see many websites that boast about the designer’s ability to utilize CSS, but the site is rather plain and boring. I am a big fan of minimalism but not when it results from a lack of creativity. Which brings me to the question, has the ease of CSS made designers lazy? For some, the answer is yes, but others use the many advantages of CSS to connect creative design with utility and performance. As a full-time designer, I devote all of my energy to creating graphic-focused, visually stimulating websites with CSS as the structure everything is built on.

A website doesn’t have to be simple or boring to work properly. CSS does not limit the design graphically but instead gives the designer the power to create an aesthetically pleasing and fully functional website. If you took two identical designs and built one with tables and one table-less (CSS), the CSS site would have a higher usability across more platforms, it would rank better with the search engines, and the overall performance of the website would be better. Graphically intense CSS layouts do take more time to think through and build out, but that is why I make custom websites. In the ever-changing online world, CSS-based sites are the most up-to-date and effective way to build W3C compliant websites that push the limits of design and function.

Cascading Style Sheets (CSS) Website Design

Cascading Style Sheets (or CSS for short) have slowly but surely become a website design standard over the past few years. It was not that many years ago that people used Frames to position their content across their web pages and Tables gradually replaced this. Many low-end website developers are still very comfortable with Tables, as it ‘does what it says on the tin’. However, more and more people are now moving over to CSS, as virtually all the layout options can be achieved using the code.

One major problem with CSS is that not all Web browsers produce the same results and it has not been helped in the past by the various browsers employing their own way of interpreting certain CSS conventions. You can think your CSS design looks OK in the current version of your preferred browser and can then be crestfallen when you view your Web pages in another version that has destroyed the formatting. Therefore, when moving over to CSS, it is important that you use the capabilities that are consistently supported across the entire range of popular browsers. It is interesting that the new version 7 of Microsoft's Internet Explorer has fixed a number of earlier anomalies, but many people are now waking up to the reality that IE7 has in fact caused problems arising from their earlier workarounds!

So why not bother with CSS, if Tables work for you? The principal advantages are as follows:

1. Web page code is generally much easier to follow;

2. The amount of code used to achieve the same result is much less. The general view is that by switching to a CSS layout, the typical page size reduction is between 50 - 60 per cent;

3. Download speeds for CSS pages are generally faster than their Table-driven counterparts. This is because browsers have to read through the table code twice before they are able to display the contents. They do this firstly to figure out the structure and then again to understand the content. It should also be recognised that a Table's contents can only be presented to the screen in one go, whereas CSS content will drop in separately, thereby giving a better user experience. It is also possible to govern the order in which specific screen elements appear, so the user is not distracted by the more bulky and slower to load image files. Furthermore, because all the code involved with CSS page layout is held in one external CSS document and is cached, it is faster than Table layouts that need to be interpreted every time a new page is displayed;

4. It is much easier to edit existing pages and to add new pages, particularly in the area of subtle formatting amendments. For example, you can change the font or colour scheme across an entire website in literally minutes;

5. CSS delivers enhanced accessibility. In recent years the number of people using web browsers on hand-held devices has risen significantly and CSS plays an important function in delivering content to PDA's etc through additional CSS documents. This just isn't possible with Table-driven layouts;

6. CSS is considered to be more Search Engine friendly because they can spider CSS pages quicker. However, it remains to be seen if this has any tangible benefits such as an improvement on the your page ranking.

On the flipside, there are a few disadvantages to CSS web page design you should consider:

1. As compared with Tables, CSS involves a much bigger learning curve;

2. Because of cross browser support issues, the time spent implementing workarounds should not be underestimated;

3. New browser versions can catch website developers napping if you are not careful. You can find that earlier workarounds have been overcome and the look of your website has changed overnight.

Ultimately, your decision on whether or not to move over to see CSS will probably depend on your level of technical capability and the time you're able to devote to understanding CSS layout alternatives.

Summary

There has been an inexorable shift away from Table-driven website designs to a Cascading Style Sheet (CSS) approach. Ultimately, it is a personal decision whether to take the leap, as there are no particular technical imperatives to do so right now. But will this all change in the future?

About the author: Nigel Robinson is Product Manager with Fetcher the UK’s products and services directory. He is also a freelancer with Web Affinity

The Power of CSS

by CLIFF RITTER

CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied. It is also always critical to always keep in mind your target audience and the average internet connection speed these users have. By using styles sheets to their full advantage, you can help keep your web page size down to a minimum.

When you sit down to think about the sitemap and the navigational structure of your website, you should consider using cascading style sheets wherever possible. This includes everything from your text attributes to your table padding. Each page you create should be tailored around one or two keyword phrases in order to maximize the relevancy of the content being displayed to the various internet browsers surfing your website. Using this technique allows you to have a web page which, in the search engines spiders view, only contains html and keyword rich text.

Let’s use an example to illustrate the power and capability of cascading style sheets.

Graphic Buttons with Rollover: In the past we created rollover buttons using graphics programs like Adobe Photoshop and/or Macromedia Fireworks, and embedded them on our web page with all the unfriendly code that is needed for the rollover effect. The problem with doing this can be two-fold. First, search engines prefer text links because text is always optimal and you can also put your desired keywords in the text of the link, which can help boost your rankings. Images are also seen as inferior to html, since search engine spiders are not able to scan images as effectively as plain text. When you create navigation with graphical buttons, you lose out on both of these benefits and risk having some of your web pages not indexed by the search engine spiders. This is why well-optimized web pages have text links at the bottom of the page; text makes it easier for search engines to spider your site and compensate for the primary navigation menu.

CSS allows you to create these buttons without having any images visible on your html code (which is where search engines spider). Furthermore, you can embed your desired keyword phrase(s) as the text for your links. Try these steps and you will see how easy it is to simulate the rollover button effect, how much more effective your web site will be for the desired targeted keywords and how much faster your web page will be to load.

Your CSS Code: In CSS you have the ability to create a background image on a particular style. Create your table with an individual cell for each link. In your CSS styles, you need to update the a:link and a:hover styles. For the a:link, make the graphic you have created to act as your button and/or the background image for that style. Then update the font attributes so the text will be visible on top of the background image. On the a:hover style, put the over state of the button as the background of that style and update the font attributes so you can see the text on the page. This is what your actual CSS code should look like for the a:link and a:hover styles:

a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; text-decoration: underline; color: #000000; font-weight: bold; width: 175px; height: 100px; background-image: url(images/home-button.gif); background-repeat: no-repeat; }

a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; text-decoration: underline; color: #006699; font-weight: bold; width: 175px; height: 100px; background-image: url(images/home-button-over.gif); background-repeat: no-repeat; }

This effect creates the perception of a rollover image. To site visitors, it will appear to be a regular rollover button created out of two graphics. The only difference is your cascading style sheet contains the images for both states of the link. This way when search engine spiders visit your website, they will only see clean html code – without any images used for navigation – and your keyword-rich text. As well, your web page should load much faster and be compatible with anyone still using an old dial-up connection.

CSS Above and Beyond: With cascading style sheets, as outlined above, you can create the perception to the user that images are present on the actual page when they are really embedded right into your cascading style sheet. Lets take the rollover button effect one step further. Suppose you want to manipulate your web page code in a way that your relevant keyword phrase(s) appear at the top of the page. With CSS, you have the ability to do this with ease. CSS allows you not only to adjust font and color attributes, but you can also adjust the spacing and alignment of certain elements on your web page. So with this in mind, creating your table structure using

tags allows you to layout your page in a way that the search engine spiders see your important, relevant keyword phrase(s) ahead of your tables and images. The next step is to incorporate your cascading style sheet so you can still use a header designed using graphics, while placing your important keyword phrase(s) at the top of your web page which search engines love. In your style sheet, add these two styles:

#header{ width: 373px; height: 53px; background-image: url(header.gif); background-repeat: no-repeat; color: f7f7f7; }

h1{ text-indent: -100em; margin:0px,0px,0px,0px; }

As you can see, in the #header style, we have included the dimensions of the image along with including the image you want to serve as your header as the background for this style. Make sure you input the correct dimensions for the header image. This needs to be accurate as the style sheet will only display what can fit in the outlined dimensions and will also affect the spacing of your tables and web page. On the h1 style, we have indicated we do not want the text visible on the web page, rather the header image we created which is contained in the #header style. We are able to do this by using the text-indent: -100em attribute of the h1 style. You also want to include the margin attribute so you avoid any unwanted spacing underneath the text contained in the

tag. Then, on your actual web page, put your keywords at the top of the page in an

tag and include the #header style. This is what your code should look like for the text you are trying to display as an

while displaying only the header graphic. (

YOUR IMPORTANT KEYWORD PHRASE

). This can give you a HUGE advantage when trying to optimize a website for a very competitive category and achieve top 10 search engine rankings by making your keywords visible right at the top of the page, in an

tag, while actually displaying a nice header graphic to the person browsing your website. Although many changes have occurred in the last few weeks in terms of Yahoo! adopting their own search engine spider and listings, Google making the switch to geo targeting and the ever growing importance in maintaining quality, theme related link partners, the placement of your keywords is still an important factor in adding to your search engine optimization and ranking success.

Another good practice when designing web pages using CSS is to make sure your web page conforms to W3 standards for both HTML and CSS. This is critical in ensuring your website works across all platforms and browsers and also helps to ensure ALL search engine spiders can index your site easily and effectively. There really is nothing worse then directing a few hundred hits per day in search engine traffic and having 50% of those people unable to view your website because of poor coding, corrupted style sheets or broken links. Always test your web site and have a friend navigate through your website both on a MAC and PC to ensure there are in fact no broken links and all pages are easily accessible and error free.

The power of cascading style sheets is incredible. The above example only scratches the surface of how much you can do for your page in terms of accessibility, functionality, speed and clean html. You can adjust your scrollbar, background image, and even the padding of your tables all in your style sheet. The only key is that you create an external css and link it from the web page using those styles file ( ). This way, you don’t add any cumbersome code on your page that will risk confusing the search engine spiders and use CSS to its full advantage.

By adjusting all these attributes in an externally linked css file, you are keeping your web page small in physical size along with ensuring good clean html code which as we have mentioned above, search engine spiders love! As well, css makes life MUCH easier on the web designer when future updates need to be made. It is far more efficient to manage a website using cascading style sheets then one that contains good old font tags.

Written By: Cliff Ritter, President of Logicalsense.ca

What you need to know about CSS?!

What you need to know about CSS!

Style sheet is a progressive breakthrough for the advancement of web. Today, more and more browsers are implementing style sheets, opening authors' eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets have become – apparent -- and the disadvantage of continually creating more HTML tags -- galore -- for presentation effects with the gradual development of CSS.

Let's understand CSS in the right perspective.

Style sheets in retrospect

Style sheets have been around in one form or another since the beginnings of HTML in the early 1990s.

As the HTML language grew, however, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers . With such capabilities, style sheets became less important, and an external language for the purposes of defining style attributes was not widely accepted until the development of CSS.

Teething problems with implementation of CSS

Many implementations of CSS are fraught with inconsistencies, bugs and other Authors have commonly had to use hacks and workarounds in order to obtain consistent results across web browsers and platforms.

One of the most well-known CSS bugs is the Internet Explorer box model bug; box widths are interpreted incorrectly in several versions of the browser, resulting in blocks which appear as expected in most browsers, but are too narrow when viewed in Internet Explorer. The bug can be avoided, but not without some cost in terms of functionality.

This is just one of hundreds of CSS bugs that have been documented in various versions of Internet Explorer,Netscape Mozilla , and Opera, many of which reduce the legibility of documents. The proliferation of such bugs in CSS implementations has made it difficult for designers to achieve a consistent appearance across platforms.

Currently there is strong competition between Mozilla's Gecko layout engine, Opera's Presto layout engine, and the KHTML engine used in both Apple's Safari and the Linux Konqueror browsers - each of them is leading in different aspects of CSS. Internet Explorer remains the worst at rendering CSS by standards set down by World Wide Web Consortium as of 2005.

Some breakthroughs …

These problems have preisely led the W3C to revise the CSS2 standard into CSS2.1, which may be regarded as something of a working snapshot of current CSS support. CSS2 properties which no browser had successfully implemented were dropped, and in a few cases, defined behaviours were changed to bring the standard into line with the predominant existing implementations..

What makes style sheets significant enough?

Style sheet represents an enormous step forward for the Web. With the separation of content and presentation between HTML and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users

A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.

Functionality and Usage of CSS

CSS is well-designed to allow the separation of presentation and structure. Prior to CSS, nearly all of the presentational attributes of an HTML document were contained within the HTML code; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, in the midst of the HTML code.

CSS allows authors to move much of that information to a stylesheet, resulting in considerably simpler HTML code. The HTML documents become much smaller and web browsers will usually cache sites' CSS stylesheets. This leads to a reduction in network traffic and noticeably quicker page downloads.

For example, the HTML element h2 specifies that the text contained within it is a level two heading. It has a lower level of importance than h1 headings, but a higher level of importance than h3 headings. This aspect of the h2 element is structural .

Customarily, headings are rendered in decreasing order of size, with h1 as the largest, because larger headings are usually interpreted to have greater importance than smaller ones. Headings are also typically rendered in a bold font in order to give them additional emphasis. The h2 element may be rendered in bold face, and in a font larger than h3 but smaller than h1 . This aspect of the h2 element is presentational .

Prior to CSS, document authors who wanted to assign a specific color, font, size, or other characteristic to all h2 headings had to use the HTML font element for each occurrence of that heading type.

Moreover, CSS can be used with XML, to allow such structured documents to be rendered with full stylistic control over layout, typography, color, and so forth in any suitable user agent or web browser.

CSS has its share of inconsistencies as well

CSS may at times be misused, particularly by the author of web documents. Some developers who are accustomed to designing documents strictly in HTML may overlook or ignore the enabling features of CSS. For instance, a document author who is comfortable with HTML markup that mixes presentation with structure may opt to use strictly embedded CSS styles in all documents. While this may be an improvement over using deprecated HTML presentational markup, it suffers from some of the same problems that mixed-markup HTML does; specifically, it entails a similar amount of document maintenance.

Discrepancies compared: CSS vs programming languages

CSS also shares some pitfalls common with programming languages. In particular, the problem of choosing appropriate names for CSS classes and identifiers may afflict CSS authors. In the attempt to choose descriptive names for CSS classes, authors might associate the class name with desired presentational attributes; for example, a CSS class to be applied to emphasized text might be named "bigred," implying that it is rendered in a large red font.

While such a choice of naming may be intuitive to the document author, it can cause problems if the author later decides that the emphasized text should instead be green; the author is left with a CSS class called "bigred" that describes something that is green. In this instance, a more appropriate class name might have been "emphasized," to better describe the purpose or intent of the class, rather than the appearance of elements of that class.

In a programming language, such a misuse might be analogous to using a variable name "five" for a variable which contains the value 5; however, if the value of the variable changes to 7, the name is no longer appropriate.

CSS in a nutshell

CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document structure (written in HTML or a similar markup language) from document presentation (written in CSS).

This separation provides a number of benefits, including improved content accessibility, greater flexibility and control in the specification of presentational characteristics, and reduced complexity of the structural content. CSS is also capable of controlling the document's style separately in alternative rendering methods, such as on-screen in print, by voice (when read out by a speech-based browser or screen reader) and on braille based, tactile devices.

CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure.

Deepak Sharma is a Web Designer at BlueApple, a Web Design and Development Company with a well connected development infrastructure in India having a strong offering superior web services and solutions at competitive costs.

Why Use Cascading Style Sheets (CSS)?

This article explains the advantages that using CSS can bring to a website.

CSS are sadly not currently used by a large percentage of web designers. "Style" tags are much more commonplace, but utilising a separate style sheet to your XHTML code is far more beneficial than adding a separate line of code to each element of your page code to define its look. Besides, the clue is in the name, Cascading Style Sheets are meant to cascade down through multiple pages of your site - designers that use "Style" tags are missing the point.

An obvious advantage of using an independent style sheet for a web site is that it eliminates many lines of code from your pages, as multiple pages can reference the same style sheet. This means that download speeds for users are faster, and bandwidth is subsequently reduced, especially for sites where many pages are viewed per user visit.

CSS have many more features than this though. By using a single independent style sheet, the look of all the pages it references can be changed in seconds. For a designer this eliminates a large amount of copy-coding time and is the best tool for testing various superficial changes. Want to change your headings from Arial font to Verdana? You only need to change one line of code and it's reflected in all the pages that the stylesheet is referenced from.

Just like with style tags, utilising CSS you can change the look of any of your page elements, from images, tables, forms, horizontal rules, the list goes on. You can change them all with one line of code as mentioned above, or set up various classes for when you require variations. Therefore you could have a form where the buttons are blue with a white border, but then another form with white buttons with a blue border, to suit their surroundings appropriately.

The main benefit that can come from using a separate style sheet is the ability to create layouts using div classes to position elements freely on a page. This is a far superior and modern alternative to outdated layout methods, such as tables and frames. CSS layouts can give unparallelled precision and flexibility to a designer.

A much overlooked or misused feature from independent style sheets is using multiple stylesheets for the same HTML page, offering a completely different look and feel to a site.

These two pages use exactly the same XHTML base page, but are using different style sheets. This is a prime example of how different a page can look when the images and colours are changed.

Using this feature you can offer your site visitors a variety of page displays depending on their personal preference. It can also be used for more useful purposes, such as offering a "print" layout for printing out your pages without having to waste ink on superfluous image content.

Coupled with a valid XHTML site, CSS can be a very valuable tool when in the right hands.

Every web designer should be encouraged to use it and reap its many rewards.

Why CSS WILL save your online business?

by JAMES KINSLEY

Weather you are getting traffic to your site or not, CSS has many benefits you simply cannot live without. It will create a better user experience and also could be the deciding factor in the order of the top 10 Google ranking sites for your keywords.

CSS is vital to your websites success. The online world is very competitive so you need every edge you can get. In the constant battle for search engine domination, every single factor in your SEO campaign must be considered essential. CSS is without a doubt vital to your rankings. CSS has advantages as a coding practice because:- • The style of a whole website can be changed by editing one file (saving hours of re-coding) •
Code size is cut down and therefore so are loading times • Users of different browsers see the same end result when your page is loaded • It also has SEO benefits! (as discussed below) CSS files are a way to define the appearance of all/many of your web pages from one file.

This is great because it means that you can change the color of all the text in your website at once, or change its size. You can exercise a vast amount of control over the looks of your site from background color to the space between lines of text from just one CSS file! Having all these controls in an external file also makes your HTML code as small and simple as possible. Search engines love it. Your page code is cut down heavily and this will increase the prominence of your keywords. The more prominent a keyword is, the higher you will rank in search engine results. CSS could be just what you need to push your website to page one search results. CSS will also increase the download speed of your website.

This is a great advantage as visitors will often be put off by a slowly loading page. One massive advantage of CSS files are that they allows for web pages to be cross-browser compatible. In other words, the webpage is displayed exactly the same in, for example, internet explorer as it is in Firefox. You may not have known that there were differences, as it seems ridiculous, however different browsers interpret code differently and so display pages differently. Before implementing CSS, some websites look fine in Internet Explorer 6 but that are almost unreadable in Firefox and vice versa.

CSS files are read the same in all browsers and so you know what your users will be looking at when you publish a page using CSS.

Successful CSS template skins

by Saul Dobney

The CSS mantra is the separation of content and style. The content should be in the HTML and the CSS should take care of how the HTML is displayed on the page. However, most web-designs don't properly separate content and style. The HTML and CSS are there separately, but if you changed the HTML, the styling would fall apart because the CSS relies on elements in the HTML to do it's job properly.

Now this will not matter to anyone putting together a few fixed pages of content which are not going to change appreciably who will benefit from using the CSS for simple tweaks and to ensure accessibility criteria are met.

But if with a site that is properly managed and regularly refreshed and with a lot of dynamic content then it is important that it can be reskinned and adjusted without having to edit the HTML in every page, and without throwing out all the content so far accumulated. CSS is the answer, but only if the content is fully separated from style.

To have sites which have fully switchable CSS skins it is necessary to recognise that in any HTML there are actually two separate elements. There is the content: the text and images that people will read; and the page structure - that is the DIVs (or table) that defines the different elements on the page.

To be successful with CSS skins, the structural elements of the HTML page need to be planned and implemented so as to allow the CSS to make changes to the page regardless of the content.

To take an example, most pages will have a Header, a Left Column, a Main Area, a Right Column and a Footer. These are structural elements of the page. Into each of these structural elements you will place content - for example the company logo into the header, a menu into the left column, the main text into the main area and so on.

With the page considered in this structured way then the CSS can then target specific blocks or areas on the page, without worrying about the content. If the left column text is at 10px and the main area at 12px, you can target these in the CSS with things like .left p { font-size:10px } .main p { font-size:12px }

This means that so long as the pages have the same basic structural elements they can be radically switched around purely with CSS - for example make the left column float left, add background images to the header or main area and so on.

But recognising that HTML contains both structure and content is stage one. To generalise further needs a page structure that is almost flexible enough so that the CSS can produce almost any effect necessary, again without worrying about the content held in each area.

To do this, the basic structures need to be sub-divided one stage further. Within the header DIV for instance splitting out three internal DIVs - left, main, right, will cover almost all the possible combinations you will need to get the CSS to display in any style you want. You just need to place the content in the relevant area.

The benefit of this three part split is that all the standard fancy header tricks such as fade backgrounds to solid color, background images to add rounded corners, gradients in and out of images can now be accomplished just with CSS (use background: URL(); width: to accomplish anything you want). The inner DIVs can also be floated to place one image on top of another.

If this approach is applied to the other structural areas in the HTML, then you have a page where the layout is fully defined by the CSS and completely independent of the actual page content.

Tables vs CSS - Which is better?

by Mike

When I started exploring the design possibilities of the internet back in 1996, NetObjects Fusion was (at that point) a revolutionary WYSIWYG editor that allowed you to place pretty much any components anywhere you wanted on the page. Unfortunately for Website Pros, Inc. Macromedia had also seen the potential in WYSIWYG editors and developed what is arguably the most popular web design tool ever - Dreamweaver.

Dreamweaver has managed to keep up with the requirements of the modern day web developer by constantly updating and improving aspects of its design, layout and functionality. With the latest release of Dreamweaver, Macromedia have again improved on various features but have also come to realise the potential and the need to support (in more detail) the new designer's technique - cascade style sheets (CSS).

Having always designed using table based layouts, I recently (less than 3 months ago in fact) decided it was time to look in more detail at CSS, to learn what it could do to improve the quality of my work, specifically in terms of positioning and layout of website elements. At that point I already had a basic understand of CSS and how to use CSS to influence text styling, link styles, table colours and borders etc. The challenge was (more clearly) to see if designing layouts using CSS instead of tables was (to me) easier and more beneficial - could I be persuaded to change despite my dedication to tables?

My choice of two books (which I'm still reading incidentally), are both written and published by Sitepoint. The first (The CSS Anthology - 101 Essential Tips, Tricks & Hacks) is an excellent practical guide, not only for beginners but also for people (like me) wanting to learn a bit more (or in fact a lot more) about the potential of CSS. Whether you want to know how to justify text, create a pure CSS drop down menu or implement a liquid, two-column layout, this book is an excellent start or continuation for anyone interested in CSS.

The second and probably more relevant book that I chose (again by Sitepoint) is the 2nd Edition HTML Utopia: Designing Without Tables using CSS. This book again goes over the basics of CSS, but in a more concise and brief manor. The main bulk of the book concentrates on more examples of positioning and layout. In short these are two books that I know I'm eventually going to read from cover to cover - two books that will always be to hand and provide the answer to my question when something goes wrong or I don't fully understand exactly what I'm doing (something that happens on a regular basis).

So what have I learnt in the last few months from reading these books, reading relational website articles and listening to peoples points of view on webmaster forums? Quite simply I was quite stubborn in the beginning. I had tried about a year ago to use CSS for layouts but hadn't got very far (although at that stage I had no books to use for reference). This time around I had the knowledge (or more accurately the books of knowledge) but was already expecting my own personal failure (based on my previous experiences). Luckily though I stuck with it and now know a lot more (although obviously not everything, by a long shot) about the potential of CSS.

Obviously (just by looking at my site) you can see that I have indeed changed from table based layouts to CSS layouts - but what truly changed my mind and would I ever go back to tables? Is this site simply a one off?

CSS: Weight loss for your code

by Sasch Mayer

One of the main drawbacks of traditional HTML web design is the tendency to produce almost insupportably large file sizes with anything but the simplest of page designs since formatting requires a substantial amount of code per component unless a rather plain 'default look' is to be retained.

Although there are a number of contributing factors, the burden of responsibility can largely be placed on the shoulders of font and other style tags which have to be added to every text element if an aesthetically pleasing result is to be achieved.

With web sites becoming more complex in their structure and appearance, this led to ever increasing document sizes as the years went on until the sheer amount of code required for presentation far outweighed the text contained within the page leading to slow loading times, a serious headache for search engine spiders and the coining of the phrase 'code to content ratio'.

Help became available to designers in the shape of CSS (Cascading Style Sheets).
Originally conceived in 1994 to provide an effective means for designers to control the appearance of their web pages, CSS became a W3C recommendation in 1998 and has been gradually gaining popularity within the web design community since about 2003.

By removing bulky text formatting code from HTML documents and placing it in a central data file which controls the appearance of the entire web site, CSS not only provides a means of achieving a more uniform overall appearance, it also serves to substantially reduce the size of each individual HTML document.

For example; to display text in a certain font, colour and in bold would require the following HTML code:
Note that < > brackets have been replaced with [ ] brackets to display the code correctly:

[font color="#0000FF" face="Arial, Helvetica, sans-serif"][strong]Example Text[/strong][/font]

Lots of code for very little content, as you can see.
With CSS controlled design however, the text can be displayed in the same manner with the use of a span tag controlled by the Style Sheet:

[span class="C1"]Example Text[/span]

Same end result, half the code.
If you repeat this process fifty or sixty times within a single page your code will be much more lightweight and easily indexed by search engines (if it is also W3C compliant).

Those of you not yet making use of Cascading Style Sheets to reduce the flab in your HTML would be well advised to read up on the technique.

Centring Floated Divs With Clearing Divs

by Free CSS.info

When coding a website in CSS and XHTML many people like to have two columns. To get this you use the "float" attribute in your CSS. The can align one column to the left and the other to the right. What many people find troubling is having two floated columns in a centred holder. When coding a website you usually call this holder the "wrapper". Also when designing and coding a website you generally want to make the site centrally aligned. This is better for different screen resolutions. To do this we usually use the following CSS coding:

text-align:centre; - Placed in the CSS code for "body"

margin:0 auto; - Placed in the CSS code for "wrapper"

When using two column the wrapper must contain two floated divs. Since browsers interpret floats in different ways sometimes it is necessary to use a clearing div. When the wrapper is centred and the columns are floated a problem is presented to us in Firefox. The wrapper does not expand as the columns inside it do. The way we can get the wrapper to expand is to use a clearing div. A clearing div acts as a blank div placed just under the two columns to make the wrapper expand. This is a useful technique which does not involve browser hacks. To do a clearing div put the following in your CSS:

.clear { width: 100%;

height: 1px;

margin: 0 0 -1px;

clear: both; }

Now under the two columns or under a div which is not causing the wrapper to expand simple add the following code:

This is a useful and simple technique. It can be used for many different situations when coding a website.

Rollover CSS Image Menu

by Alan Who?

There are now loads of places on the Internet where one can access free CSS menu's. But of the many that are available very few suceed in replicating the prehistoric roll-over image menu using javascript image replacement techniques, with only lovely CSS. I have managed to create one that works in both decent web browsers and crap ones (Internet Explorer), view the finished CSS menu.

First I needed to remove all padding and margins from the page:

* { padding: 0em; margin: 0em; }

Then the CSS for the #nav container div:

#nav img { border: none; }
#nav li { display: inline; list-style:none; }
#nav li a { float: left; display:block; width: 37px; height: 50px; margin: 5%; }
#nav li a img { border:none; vertical-align:bottom; /* for IE6 */}
#nav li a:hover { visibility:visible; /* for IE6 */ }
#nav li a:hover img { visibility:visible; /* for IE6 */ }
#nav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}

Internet Explorer requires something to happen on a:hover as well as a:hover img.

The menu list items all use different images on rollover so I defined each with a different ID on the anchor element:

#one { background:url(http://www.alanwho.com/examples/css/rollover_menu/1over.png) no-repeat left bottom; }
#two { background:url(http://www.alanwho.com/examples/css/rollover_menu/2over.png) no-repeat left bottom; }
#three { background:url(http://www.alanwho.com/examples/css/rollover_menu/3over.png) no-repeat left bottom; }
#four { background:url(http://www.alanwho.com/examples/css/rollover_menu/4over.png) no-repeat left bottom; }

Lastly I created a div with an id of nav and applied the CSS into the final XHTML:

The Final Rollover CSS Image Menu XHTML.