CSS templates

Intro: In the last article “Top 5 Design Principles Behind Web 2.0 Templates” I talked to you a little about Web 2.0 templates and how one of the characteristics of Web 2.0 are central layouts. In this article we discuss the pros and cons between liquid layouts vs fixed width commonly know as central layouts. The author Moe Tamani explains what both design layout really mean and examines the best approach for you to use on your website.

As every experienced web designer should know, there are two types of layout that you can choose from when designing web pages. One is the fixed width layout and the other is the liquid layout. The fixed width layout sets the width of the web page at a specific value, no matter how wide the viewer’s internet browser window is, whereas liquid layouts adjust their width depending on the width of the visitor’s browser window. The choice between these two layouts is not always an easy one and we will explore in depth the factors that will influence your final decision.

Fixed width layouts mean that you have a preset width which you will design the rest of your web page around. The main advantage of this approach is that it gives you greater direction and control over the eventual organization of your web page. Fixed width layouts are best used with print backgrounds, because these help maintain a consistent appearance even across different internet browsers and operating systems. In a liquid layout, however, the overall layout of your page is a percentage function of the size of the browser window being used to view it. They are useful for maximizing the use of space provided by any screen resolution or browser window size. Web designers who are tasked with conveying as much information as possible in a limited amount of space will often choose a liquid layout. It is important to both you and your web design company that you understand which layout would suit the needs of your client better.

Which layout you eventually choose will greatly affect the final look and feel of your web site, not to mention the functionality of the site. The ease with which visitor’s can scan through your site for relevant information and identify the content that they wish to find is largely dependant on your choice of layouts. It is thus absolutely essential that you understand the needs of your client and the kind of website that they want you to build in order to design a web site that reinforces the marketing strategies of your client. Your web design company is also likely to stress the importance of choosing the right layout when you take on any projects.

The Web Design Benefits and the Drawbacks The pros and cons of each layout type are listed below, so you will be able to make a better-informed decision regarding which type of layout you should use for a particular project.

Fixed Width Layout o Pros * Pages that you design look exactly the same when viewed using any internet browser or operating system. * Images and other non-textual objects will not overwhelm the textual content of the page, regardless of the size of the browser window or viewing monitor. * The scan length of your pages stays constant no matter how wide the viewer’s browser window is. o Cons * Viewers using smaller browser windows or monitors to view the site will probably have to scroll horizontally to see the entirety of the page. This tends to annoy online visitors. * A large amount of whitespace is usually generated when viewers use large browser windows to view the site, resulting in wastage of otherwise useful space. Also, more vertical scrolling may be required than should be necessary. * Font size changes can adversely affect the overall layout of the page. Large increases in font size can cause the layout of your page to become distorted, making it messy and unappealing.

Liquid Width Layouts o Pros * Layout adjusts its size to fit any browser window size. * All the available space in the browser window is utilized, enabling larger windows to display more information while not compromising the viewing experience using smaller window sizes. * You can achieve consistent relative widths, ensuring that your web page can accommodate your client’s varied design requirements such as font size changes. o Cons * Liquid layouts do not allow you to fix the width of the page and other elements on the page, making proper organization difficult in some situations. * Columns containing text may become either too wide or too narrow for comfortable viewing of the text. * Fixed width elements on the page may not be correctly displayed. Some browsers may attempt to correct for a lack of space for fixed width elements by increasing the width of the element, thus disrupting the order of the other elements in your layout.

Often, the best approach to use is to use both types of layout within the same web site or even within the same page. The type of layout you use may be dependent on which part of the site you are currently working on. A good example is fixing the width of the central column of the page so that text contained does not become distorted while allowing the layout for the rest of the page to be liquid, making viewing of side-bars and other elements more flexible. With practice and diligence, you will eventually learn the best combination of both layouts to use in any situation that you encounter.

About the Author

Moe Tamani is a SEO web design consultant Dallas Web Design.

Share This

I am guessing an article on this subject has been posted prior to this one, I should hope a few have! However I hope this will provide a refreshing angle on the subject and branch to some other interesting bits of stuff.

I am sure that anyone who has taken even only a few steps into web development has come across the gigantic force that is Microsoft’s Internet Explorer. Even for the most experienced coders, the most popular browser of this age has always been a prominent foot across the path of our websites technological progression and the possibilities of which the internet is yet to yield. Maybe not crushing ideas, but certainly making it a lot harder to bring these ideas from paper to browser.

However, although IE, wielding its scathing weapon the Microsoft corp. and therefore for-fronting the battle as the windows default has dominated the market; we have weapons which allow us the fight back! I think I’ll cut the metaphors here and get back to business… Well, how can we fight back? And more importantly, what can be done to keep our designs looking slick in the interim… Yeah before the proper browsers take over!

I’ll start with the fighting back. Personally my favorite method would be to utilize a conditional comment and tell people what they should be doing! Something like this…

Realistically I wouldn’t try this method though, probably not the most tactful way when it gets down to it. You could however place a banner showing your support of these less buggy browsers such as firefox. This websites great for this promoting firefox business, very nice banners right here: http://www.spreadfirefox.com/?q=affiliates/homepage

Conditionals are pretty clever little buggers though, for general use they can become quite useful. And you’re not just limited to

. The comments understand other operators as well; you’ve got the NOT operator which is an ‘!’. So “if not IE” would be

In addition to this there are “greater than” = ‘gt’, “greater than or equal to” = ‘gte’, “less then” = ‘lt’ and “less than or equal to” = ‘lte’. These can be used when referring to browser versions, so

could be used to warn users about a feature unavailable to them when browsing your site with IE version 5.0 and below.

But we are not here to help out the Internet explorer users; we’re here to convert them! Doing your bit locally can make all the difference. If you are round at a friends and he/she happens to log on to the internet using IE (boooooo), make it your concern that the very first thing that is done is the downloading of firefox (sorry Opera etc I’m a bit biased to the mighty fox.) Of course if the loging on to the internet part does not occur in the general flow of things it must also be your concern to make sure it does!… “Umm, you mind if I check the train times?” Okay I’m getting a bit carried away here, although very important to the advancement of the human race, you need not devote your life to spreading firefox.

The great progression in the internet and its uses over the last few years has meant that the look and the feel of a site has come under a lot more scrutiny, especially with ever rising amounts of traffic as more and more people connect to the internet. Complicated uses of graphics and CSS mean that when it come to interpretation by different browsers, everything can go wrong. The Browser that is renowned for taking perfect code and screwing with the end results is of course Internet explorer. It is so tempting just to say screw it and ignore the IE users and their browser, but with over 58% still using a version of IE this really isn’t plausible solution.

So okay we’ve got to fix the problem. Where to start?

Well firstly it is a must to make sure your code is valid. Just from an incorrectly written Doctype or wrongly phrased line of css can through internet explorer into all sorts of funny modes where anything can happen. Make sure you get a green light here http://validator.w3.org/ and here http://htmlhelp.com .

Good stuff, that’s one step in the right direction if anything. Now if the problem still exists, what now?

Most of IE’s rendering blips are caused by bugs, which can be worked around with quick alterations or what are called hacks. Chances are your problem has been experienced by people before you and a fix has been fabricated already.

So what’s going wrong? I will list a few of the most common bugs, some which I myself have experienced and a link to some relevant articles explaining in depth the fixes.

My borders have gone crazy! - fix…
http://www.positioniseverything.net

Margins doubled, pushing my content down and generally mucking stuff up - fix…
http://www.positioniseverything.net

Contents there one minute gone the next, the peekaboo bug - fix…
http://www.positioniseverything.net

You may have noticed that all those fixes above are at one website. Basically “Big John” and co of Position is Everything .net have done a fantastic job among some other geniuses out there, so why don’t I just give you guys a link to his site, the chances are you’ll be able to find a fix there… http://www.positioniseverything.net

You’ve now with a bit of time and effort (it sucks doesn’t it, and it really is unnecessary effort!) probably been able to fixed up your site. But what if something still purists, what can you do!? Well here is what I do…

Firstly if you know something which could be causing the inconsistencies in your site when rendered by different browsers, try just experimenting with this particular element of the code. Say the content part of your page is being pushed below your side navigation and you recon that IE is playing with your margin values but it’s not the double margin bug. Just adjusting the values of margins can bring results. This is a good time to introduce an excellent piece of free software called CssVista. If you know css well it can also be an excellent tool when in depth analysing your code when looking for problems. Check it out here
http://litmusapp.com/cssvista/

If you can still find no joy using this experimentation method I’m afraid the best hope is now to do what I really find annoying especially since if browser bugs didn’t exist it probably wouldn’t be necessary. We’re going to have to start again. Now don’t panic we’re not going to redesign your site from scratch, we’re going to make a mock up page of your current design, testing for rendering problems all the way.

Okay, well your average website nowadays is divs inside divs inside divs. So first step is to create you’re outermost div and in your css give it all the position you want and a background-color so that you can see it. Now add the divs that are contained with-in this one and do the same thing, giving them all nice bright colours so you know exactly where they are. Now test it like crazy, anything going wrong so far? Basically keep going like this, until something starts to look weird, then think why it doing this? What have I just done to make it go weird? Google and other free recourses can be come very useful now. Yahoo answers is fantastic for everything so it is always worth a try at http://answers.yahoo.com.

That’s about it really; Give that a try and well, good luck!

So, we’ve had a quick look at how to rid the world of Internet Explorer and how to get by in the time being. I’m not a fan of Microsoft attempt at an internet browser but not really in the league of this guy http://toastytech.com/evil/index.html.

Basically guys have fun and make sure you’re not supporting the IE domination by using it!

Pete Taylour is co-owner of the fast growing ebook site http://www.liqiuidebooks.com the only place to go for your cheap and free ebooks. With strong interests in a huge amount of different music styles Pete and friend are soon to embark on some crazy mix submission site for upcoming DJs across the globe, be sure to keep your eyes peeled for that and make sure you check out Liquid Ebooks at http://www.liquidebooks.com

About the Author

Pete Taylour is co-owner of the fast growing ebook site http://www.liqiuidebooks.com the only place to go for your cheap and free ebooks. With strong interests in a huge amount of different music styles Pete and friend are soon to embark on some crazy mix submission site for upcoming DJs across the globe, be sure to keep your eyes peeled for that and make sure you check out Liquid Ebooks at http://www.liquidebooks.com

Share This

There are only three parts to Cascading Style Sheets (CSS), and once we understand what they are and how to use them, CSS becomes very easy and exciting to use. One of the best parts of CSS is that you can create an external Cascading Style Sheet which you can use for all web pages on your website. You can also have one CSS for all of your articles and a different one for all of your press releases. Making one change in your CSS, you are able to effect changes to a few web pages or to hundreds of web pages without ever touching any of the different web pages themselves.

Below I am going to break out each one of the parts of CSS and explain them in non-techie terms:

1. Selector 2. Property 3. Value

This is what these three parts will look like when they are all put to together:

The first part is the selector. In techie terms, a selector is the (x)HTML element that you want to style. Now what does this really mean to the person who doesn’t know about (x)html code and really doesn’t want to learn it, but does want to make changes to their own websites. Absolutely nothing, right? It just went over your head and now you are at a loss (oh how well I know that feeling!). Well, let me show you what some of the most common selectors are, and I know that you will begin to feel more comfortable with selectors.

The first selector that you come across in all web pages is the body, next might be h1, or the p. In (x)html the code is going to look like this:

For the first example, let’s start with the body. Here is the main thing that you will likely do with this simple but important piece of code. Let’s say you want the main background color of your website to blue or #0000ff (which is the hex code for blue). It will look like this:

OK, what does all that mean? It is saying that the “background-color”, which is the property, is going to be blue, which is the value of that property. In simple terms, it means the main background color of your website is going to blue. It is easy to change the background color of your website now just by changing the hex code (#0000ff) to a different color, say red, which would look like this: #ff0000.

Now let’s look at the selector h1:

Here we are defining what h1, or the text inside of our header 1 tags, is going to look like. The first line in the property is the font-family, and the value is Verdana, Arial, Helvetica, and sans-serif. So, in plain English, what we are saying is the font that we want to use for all of our h1 headers is going to be Verdana, Arial, Helvetica, or sans-serif.

You might be asking if we want the main font to be Verdana, why are we also using Arial, Helvetica, and sans-serif as fonts? The reason for this is not all computers are going to have Verdana font loaded on them. If they don’t, then the default font becomes Arial. The same thing holds true for the Arial font, which then defaults to Helvetica and, finally, to what is called a system font or screen font that all computers have on them, which is sans-serif.

Now for the next line, which is font-size: 22pt. The property is font-size and the value of that is 22pt. 22pt is the easiest to use because we all know about 10 pitch, 12 pitch, 14 pitch fonts when we are using our word processors. There are several other different ways to express the size of the font, one of which is small, medium, and large, and is much more complex than just entering the pitch size.

Next we come to the font-weight which is a real easy way to bold all of the text in your header without using any other code to do it. Following along with what we already know, font-weight is going to be the property and bold is going to be the value of the font weight. If you choose not to bold all the text, all you need to do is change the word “bold” to “normal” and you are all done.

The text-align is just that: by changing the word “center” to “left”, you can align your text to the left margin instead of centering it all. I am sure that you are beginning to get the hang of this by now, but just follow through, “text-align” is the property and “center” is the value.

The color of your font or text is going to be the hex code color #000000, or black. If you want to change the color of the font, find the hex code for the color that you want it to be and replace #000000 with it.

The last one here is the background color, which is behind the header text. This background color is different from the body background color in that this color is going to be directly related just to the text in between the header tags or the h1 tags. In our example, “background-color” is the property and “#ffffff” is the value. You can change the background color to any color you like just by replacing the hex code #ffffff, which is white, with the hex color code of your choosing.

In our next article we begin with the paragraph tags and show just how easy it is to get rid of a ton out dated code.

About the Author
This article may be distributed freely on your website, as long as this entire article, including working links and this resource box are unchanged. Copyright 2006 Larry Lang All Rights Reserved. Lang Enterprises Inc. Elite Web Strategies-Empowering You to Empower Your Business.

Share This

There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web designers must wrestle with these differences to make a web site work. This article discusses the effect those different implementations has on design.

What is Cross Browser Compatibility?

If a web page is completely cross-browser compatible, it will look more or less the same in all of the existing web browsers. The most commonly used browsers are Internet Explorer, Netscape Navigator, Firefox and Opera.

Each one of these browser implements HTML, JavaScript and Cascading Style Sheets (CSS) a little differently. Some difference only create cosmetic difference others can break the webpage. The situation gets worse because each browser is free to implement “enhancements” to the W3C standard version of each of these formats.

Then to compound matters even more the underlying operating systems also creates difference in how the computer displays graphical elements and text differently. When you add the fact that people are also using multiple versions of each of the browsers, no wonder web designers get headaches.

So what is a web designer to do?

Obviously, 100% compatibility with all potential browsers is impossible. But it is possible to design your web page so it will work in the most popularly used browsers.

To accomplish that, a web designer must write squeaky-clean code that conforms to the W3C standards to get consistent results across all browser platforms. The whole idea behind the standards is that if each browser adheres to the same set of rules, you will get more or less consistent results in all of the existing browsers.

Conforming can be a real challenge. It will limit some of the neater effects available in specific browsers. There are online code validators available. You can validate HTML code at http://validator.w3.org , the validator can also validate your CSS and links. The service is free.

The validator checks your code based on the DOCTYPE you specify on the webpage. The DOCTYPE tells the browser which version of HTML or CSS the web page is using.

HTML Editors

There are some compatibility issues associated with anything other than hand coding for HTML (and for that matter, even with hand coding.)

Best Choice - The best choice for compatibility is Dreamweaver but you cannot use layers. Layers must be converted to tables to be used.

Worst Choice - The worst choice is FrontPage. FrontPage is loaded with problems because it uses Microsoft and therefore internet explored specific code. Items that will not work in other browsers include:

* Marquees - you can use a JavaScript scroller to create a similar effect that will work in the most common browsers. * bgsound tag - this is IE specific. * Page Transitions - this is IE specific. * Front Page generated Style sheets - this is IE specific and can have unexpected results or crash other browsers. * Front Page generated DHTML - it is better to use JavaScript to create the effects you want since it is more likely to be cross browser compatible. * Hover Buttons - this is IE specific and has been know to crash browsers including older versions of IE. You can use JavaScript, flash or CSS to get similar effects.

Other HTML Editors - the rest of the HTML editors will fall somewhere between Dreamweaver and FrontPage in cross browser compatibility. You just have to test the code your HTML editor generates.

CSS Style Sheets

Not all of your style sheets will work correctly in all of the browsers. However, style sheets rarely crash a web browser, but sometimes the pages will be downright ugly if not completely unreadable. One of the major CSS problems is absolute positioning since most browsers do not support it and it will cause different block to overlap others and create a jumbled mess.

Flash

Flash is great for adding style to a webpage and Macromedia provides flash plug-ins for all of the major web browsers. But don’t build the entire site with flash. Browser for the blind, most handheld devices do not support flash.

A small but significant number of users don’t like it and don’t install the plug-in so they won’t be able to access a flash site. Also, search engines spyders can’t follow the links on a flash site and won’t index it.

Graphic Links

While these are attractive, they have the same problems as flash with browsers for the blind and hand-held devices. Always use the alt tag with graphics.

Bottom Line - even code that is validated may not work correctly in all the major browsers. The best way a web designer can create cross browser compatibility is to test all of their web pages in the most popular browsers to see what happens. Personally, I find that a combination of style sheets and tables works best to ensure my pages look good in all of the browsers.

About the Author
Warren Baker is an Internet business consultant for WebDesigners123. WebDesigners123 connects the Freelance Web Designer with Webmasters who need their services.

Share This

Cascading Stylesheets become more and more important in today’s webdesign.

But before you decide to get started using CSS you should know why CSS is so important and what its advantages are.

1. The content is separated from the design

Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!

This Of course, generates some great flexibility. This flexibility is not available when your website is using tables for layout, inline font tags or inline defined colors.

A single CSS file can contain positioning, layout, font, colors and style information for an entire web site.

2. You site uses less bandwidth and loads faster

Because stylesheets are so lightweight, your website will load much faster. The main reason is because you do not need table layouts anymore for the positioning of elements. Since text loads really really fast your website will be visible in a flash.

This means that visitors will be happier when surfing your website. They only have to download the Stylesheet once, and it’s automatically reused for every page. So the only thing that needs to be loaded is the actual content.

On average a website will load five to ten times faster if it makes use of cascading style sheets.

3. Your website will automatically gain better search engine results

With CSS, you can position any element, anywhere you want. So if your menu is at the bottom of your HTML document, you can bring it up using absolute positioning. The reason this is useful is to make sure the search engine spiders pick up the main content first.

Another advantage you automatically gain is that your HTML code is much cleaner. So the search engine spider will not have to separate the junk code from the real content.

So make sure you put your logo text and your menu at the bottom of your HTML document at put it at the top using CSS!

4. CSS is compatible with newer browsers

Because more and more browsers are used other than Internet Explorer on a Windows machine, you need to be sure that your website is accessible by all major and newer browsers.

By using webstandards, defined by the w3c, you are making sure your content is viewable in the future.

Because there are so many browsers these days, it is impossible to test your website in all these browsers on different configurations. Coding to standards is then the only practical solution.

5. CSS can be used to display the same content on different media.

Because you are able to define different stylesheets for different media you have great flexibility in presenting your content.

The printer for example, is a medium on itself. If someone prints out your website, you will be able to modify the look of it. Add an extra black and white logo, remove the advertisements and change the colors to black and white values. It’s all done easily by using cascading stylesheets. And the best thing is, visitors do not even have to know you created a new Stylesheet especially for the printer.

Stylesheets can also be created specifically for PDA’s and such. As you will understand, this adds some great flexibility to the presentation of your web document.

Conclusion

Cascading Style Sheets are created to make things easier. It gives you great control of your website and makes your visitors happy when they are surfing your website.

You are prepared for the future and will gain better search engine results automatically. Start using CSS to its full potential today! It will suit you well.

About the Author
Hilco van der Meer is an expert on Cascading Style Sheets. He is known as the creator of the “How To Master CSS” course.

This course discusses CSS in a fun and easy way. Apart from the book, he also created CSS training videos for the course. The course can be found at:http://www.HowToMasterCSS.com

Share This

These instructions pertain to Dreamweaver 4, although other versions would likely have similar instructions.

When you edit a CSS stylesheet that controls the text in your CSS template document, you instantly reformat all of the text controlled by that CSS stylesheet. Your edits affect all the documents linked to the style sheet.

To edit an external CSS style sheet:

• Open any document that is linked to the external CSS style sheet that you want to change.
• Do one of the following: Choose “Window > CSS Styles”, or click “CSS styles” in the Launcher.
• In the CSS Styles panel, right-click (Windows) or Control-click (Macintosh) and choose the Edit Style Sheet from the pull-down menu.
• Choose “Text > CSS Styles > Edit Style Sheet”.
• In the Edit Style Sheet dialog box, select the name of the external style sheet and click Edit. A second Edit Style Sheet dialog box displays the styles in the external style sheet. Select the style you want to edit.
• Edit the style however you wish.
  Click Save when you have finished editing styles.

Want to be able to run a small simple website and not have to spend anytime studying CSS and HTML and design software. . Our Cascading Style Sheets templates customization package is only $349.99 includes customizing (CSS version) site name, adding your logo, changing links, basic contact form page, and up to 5 other pages of content. Up loading and testing of site to your server also included. Note that the $62 price of the template is not included.

Learn more

Share This

CSS means “Cascading Style Sheets“. CSS is a system of rules that directly effect the display properties of your web pages such as colors, fonts, colors, and layouts. CSS style blocks are also commonly referred to as rules. These rules can be embedded into an individual HTML page or placed in an external file that will control many individual pages on your website. Thus changing a property in one place in the linked style sheet will immediately make that change on every web page that is linked to it.

“CSS Web Template” is a website design created using Cascading Style Sheets (CSS) technology. Cascading stylesheets provide web developers an easy way to format and to style web pages. CSS will be used even more because it is seen the same way by all browsers, making it the best option during the browser wars.

CSS templates allow enhanced browser and platform compatibility (CSS supporting browsers are used by 99,98% of existent web surfers). Your website will look perfect in Windows, Unix and Mac browsers. The template is primarily tested on multiple platforms to ensure better requirements compliance.

Style Sheets are the easiest way to provide a default font styling for HTML. So you can modify the whole text and link colors on every page by editing just a single CSS file! CSS also makes your coding much easier because you don’t have to repeat the many formatting tags. This streamlined code equals faster download time and reduced bandwidth usage.

CSS templates show 100% compatibility with Macromedia Dreamweaver and MS Frontpage. Other web editors also handle this technology easier than the usual HTML code.

Good news - now you don’t need to fight with complicated HTML tables trying to modify the layout of your site. Our CSS templates use blocks instead of tables. So you can move content blocks by simply dragging ‘n’ dropping them in your HTML editor. Moreover, these tags are better understood by JavaScript and other web programming languages.

CSS technology is a great step forward in web development. Separated content and presentation adds more flexibility to your website. And, you’ll have no problems with future modification of your website. All templates are based on w3c.org technologies and standards that make your website much more user-friendly.

Related Articles
CSS in Flash the return of Crisp and Legible Text

Share This

Cascading Style Sheets (CSS) allows you to create fast loading pages, increase your search engine rankings, and modify your whole site with one style sheet. So why don’t more people use them? This is because they got so used to html design and are afraid or too lazy to upgrade their skills. Some will also use ready made templates that contain flashy graphics, bloated code and sometimes even contains hidden code embedded in the page. In this series of articles I will show you how to create a simple web site using CSS, so you will have no excuse to begin incorporating them into your future designs.

What are Cascading Style Sheets?

Cascading Style Sheets is the name of a simple language that allows you to add any style (font, colors, graphics, links, layouts) to your web pages.

Benefits of Cascading Style Sheets

1. Separate content from presentation - you can separate your HTML markup, text, graphics and multimedia from presentation.

2. Consistent site wide look and feel consistency - you can apply one style for 100s of web pages all at once. So if you had to change the color of all pages on your site, you only have to edit one style sheet. This saves you a huge amount of time, especially if you had to edit each page separately.

3. Web site maintenance - apart from being able to make site wide changes easily through one CSS file, the clean code it generates makes it easier to update. Properly marked up web pages permit them to be maintained by more than one person. It will also work in more browsers. Web site redesigns will take much less time.

4. Improve search engine rankings - search engines generally spider the code at the top of your web page first. For most sites that means the navigation bar will be spidered first (resides at top of page code). CSS enables you to position the code for your content at the top making your page search engine friendly. Properly marked up HTML pages can easily found and properly categorized by search engines

5. Fast loading - CSS reduces the amount of tags used therefore producing clean code. Tableless design can reduce your load time by 25% to 50%.

6. Reduce bandwidth - compacting the amount of code used will reduce the amount of bandwidth needed to host your web pages. Therefore you won’t have to pay higher fees when adding more web documents to your site.

7. Accessibility - increasing accessibility with CSS means being able to serve web content to a larger audience, increasing web site usability, even for non-disabled people. Content can easily be formatted for projection as well as screen display. Tableless layouts display well on hand-helds.

8. Improve the printing of web pages - most printers will only allow you to print a portion of the web page. With CSS your whole document can be printed.

When you use CSS it becomes quick and easy to apply new styles that can not only effect all styles on your web page but even your whole site.

In the next article I will explain how to layout a web page using CSS.

About the Author
Herman Drost is the Certified Internet Webmaster (CIW) owner and author of http://www.iSiteBuild.com. Affordable Web Site Design and Web Hosting. Subscribe to his “Marketing Tips” newsletter for more original articles. mailto:subscribe@isitebuild.com. You can read more of his in-depth articles at: http://www.isitebuild.com/article

Share This

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?

Read the full article @ http://www.michaelthorn.co.uk/021106.php and find out if i really have been converted to pure CSS layouts!

About the Author
Visit http://www.michaelthorn.co.uk for the full article and other articles on web design, SEO and adsense!

Share This