CSS Validation and HTML

HTML validation and CSS validation are controversial issues with some people. This article discusses some of the issues that have come increasingly to the fore in web development. The article will also provide a practical method that overworked webmasters can use to improve their website.

What does Validating HTML or CSS Mean? For those who are unfamiliar with what validating a web page means, it basically refers to using a program or an online service to check that the web page that you created is free of errors. In particular, an HTML validator checks to make sure the HTML code on the web page complies with the standards set by the W3 Consortium (the organisation that issues the HTML standards). There are various types of validators - some check only for errors; others also make suggestions about your code, telling you when a certain way of writing things might lead to unexpected results. A CSS validator checks your Cascading Style Sheets in the same manner; basically, most will check them to make sure that they comply with the CSS standards set by the W3 Consortium. There are a few which will also tell you which CSS features are supported by which browsers. Note that validating your web page does not ensure that it will appear as you want in various browsers. It merely ensures that your code is without HTML or CSS syntax errors. Ensuring that your code appears correctly in different browsers require cross browser testing.

Why Validate Your HTML Code?

1. It Helps Cross-Browser, Cross-Platform and Future Compatibility Although you may be able to create a web page that appears to work on your favourite browser (whatever that may be), your page may contain HTML errors (or CSS errors) that do not show up with that browser due to an existing quirk or bug. Another person using a different browser that does not share that particular bug will wind up viewing a page that does not show up correctly. It is also possible that later versions of your browser will fix that bug, and your page will be broken when people use the latest incarnation of the browser.

2. Search Engine Visibility When there are errors in a web page, browsers typically try to compensate in different ways. Hence some browsers may ignore the broken elements while others make assumptions about what the web designer was trying to achieve. The problem is that when search engines obtain your page and try to parse them for keywords, they will also have to make certain decisions about what to do with the errors. Like browsers, different search engines will probably make different decisions about those errors in the page, resulting in certain parts of your web page not being indexed. The safest way, it is held, is to make sure that your web page validates error-free.

3. Professionalism Even if you test your web site with all the various browsers in existence on all the platforms in use (Mac, Linux, Windows, FreeBSD, etc) and find that it works perfectly in all, errors in your site reflect poorly on your skill as a web developer. The issue is two-fold: firstly, a poorly coded web page reveals that either the web designer does not know his stuff or is a sloppy worker; secondly, it affects his marketability.

The Importance of E-Commerce Web Design and CSS

Today’s technology is strengthening at a tremendous speed; the internet has become a vital resource for the majority of the population and counting. More and more people are exponentially learning to use the internet on a daily basis. The internet is a BOOMING industry as you may know.

The majority of all users out there are on some type either a desktop or a laptop computer and this has usually been the case. So designing “to fit” was never really a large issue for web developers until recently more and more users are purchasing and services there internet capable handhelds, cell phones, tablets of all shapes and sizes. The most flexible type of layout that can fit across the majority of these platforms is what is called a liquid layout. It’s a mix of html, PHP/ASP or any flavor code but most importantly CSS. CSS, short for Cascading Style Sheets, a new feature being added to HTML that gives both Web design developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear.

These Style Sheets can then be applied to any Web page. This is a dynamic way to centralize the looks or style of any web site. This can also be applied when using different screen size. With your flavor of code added with CSS you can have the server displays the page to auto-detect which type of browser and or machine the viewer is looking at your site on, therefore it can auto-fit to the best perspective and layout, thus actually delivering your site to all users out there no matter what screen size or ratio they are viewing your site on. This a huge factor when developing one’s site and almost always goes overlooked when choosing a developer or firm to create your companies web site.

Now, if you do not plan ahead in the development stages you can lose a large percentage of viewers coming to your site. It’s one thing getting your traffic there, and to have a snazzy or flashy web design but allowing 100% of the viewers to actually see your site is a point this is far too often overlooked.

Why you should convert to CSS

Introduction

What is CSS? - I hear some of you ask. Well, CSS stands for Cascading Style Sheets and they have been around since the early 1990's believe it or not.

The Wikipedia definition (changed so that it makes sense!) is as follows:

CSS (Cascading Style Sheets) is a language that describes the presentationform of a structured document.An XML or a HTML based document does not have a set style, but it consists of structured text without style information. How the document will look when printedon paper and viewed in a browser or maybe a cellphone is determined by a style sheet. A good way of making a document look consistent and easy to update is by using CSS, which Wikipedia is a good example of.

So, why should we use CSS?

There are many benefits of utilising CSS on your web pages. Before you skip to the disadvantages, I can tell you now that the advantages easily outweigh the bad points. Below is a short, descriptive list of reasons to make the change:

Save on bandwidth

The more HTML code you use, the large the file size of the page. It doesn't take a genius to work that one out - so the most obvious solution is to cut down on the amount of HTML (something that Yahoo! might want to consider sometime, probably saving them ยฃ100,000's). CSS will certainly help to cut down on the amount of code you use, for example, replacing all of your tags (which are now obsolete by the way) with simple style declarations.

In reducing your file size, you will in turn reduce the amount of bandwidth your website consumes each month, hopefully saving you money. Typically, a heavy HTML coded website can measure up to 80KB's in size (without taking images or other media into consideration) - using CSS can cut down the file size by approximately 30-40% - a potentially massive saving if your website is popular. To find out how much bandwidth you would save, check out this bandwidth calculator, provided by CJ Website Hosting.

Cleaner, clearer looking code

Usually, CSS code is written in an external style sheet - you can however, use inline styles. Because of this, not only will your page load faster because a) external files are cached by most browsers and b) a stylesheet loads in unison with your web page - it also makes for much cleaner, clearer code.

Still not convinced? Take the example below as hard evidence:

This code is written without CSS:

Welcome to my website

My website is entirely written using HTML, nothing else.

You can achieve exactly the same result using the following CSS...

body{font-family:verdana,arial,helvetica;font-size:100%;}h3{font: bold 140% verdana;color:#C71585;}#content{color: #00FFFF;}

...and the following (tiny piece of) HTML code:

Welcome to my website

My website is written using the latest in web technology!

Much nicer, I'm sure you'll agree.

Easy to update = less time consuming = cheaper to maintain!

If you use an external CSS file (which I advise you to do), simply changing the style declarations in this one file will allow you to change the appearance of your entire website. For instance, in the example above, you could quite easily instruct the browser to render the heading tag to the right of the page or you could make the content wrap at 100 pixels - all by changing the CSS. Don't get me started on what you can achieve with bulleted lists!

Accessible pages and DDA compliance

Visitors who are blind or visually impaired will prefer a CSS designed website far more than one not using CSS.

This is due to the fact that CSS follows web standards endorsed by the World Wide Web Consortium. Because of this, special web browsers (such as text only browsers which read the content out-loud to the visitor) can interpret the content on the page.

CSS will help make your website DDA compliant. The DDA is the Disabilities Discrimination Act, the Act makes it "unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public", specifically mentioning websites.

Another benefit of using CSS is variable font sizes. CSS will allow you to specify a font size as a percentage, doing so will allow visitors with poor eye sight to enlarge the text size. Tip: Try increasing the font size of a page by holding down ctrl and scrolling the wheel of your mouse (if it has one). You will notice that most websites do not allow you to increase the font size (unless you are using the Firefox browser which forces it) because they use pixel measurements. And those that work but use tags (such as Google) are actually breaking the accessibility guidelines.

Generally, websites designed in css are accessible on all sorts of devices including mobile phones and PDAs. The majority of hand held devices will simply ignore the CSS, leaving behind a readable (but bland) web site behind. A table design however is likely to render too wide for the viewable region.

Increase your popularity in SERPS!

Sorry, there I go again with the acronyms. SERPS stands for Search Engine Result Pages - the set of links returned by a search engine in response to a user query.

I can imagine that some of you are thinking "pull the other one! How can using CSS make my website rank higher in Google or MSN!" - well, extensive use of tables and obsolete tags can confuse search engine spiders which crawl your website for content. Some can even confuse code with content, although the major search engines seem to be very good at stripping out every possible HTML tag or JavaScript snippet - but it takes up valuable processing power that they would rather spend elsewhere.

It doesn't take a genius to work out that, like humans, the search engine will start reading from the top of your web page and just like humans they want to find out how relevant this page is as soon as possible - so cutting down the amount of code will make it easier for the robot to find the relevant text. Research suggests that you will also score "brownie points" with search engines for having standards compliant code that can be rendered across all mediums.

Tip: A combination of well written HTML code, fully utilised CSS and unique, well referenced content is the key to a higher search engine ranking.

Disadvantages of using CSS

As previously mentioned, there arn't any real disadvantages of using CSS - the pros far outweigh the cons. To put it another way, CSS 'div based' design versus table based design is a bit like comparing Liverpool Football Club to Gresley Rovers. There's only ever going to be one winner and everybody knows it.

So on to the only disadvantage I can think of...

Old browser issues

Old browsers, such as the early versions of Netscape and Internet Explorer. may have a hard time displaying CSS, especially as CSS-2 is now available to use and only the most recent browsers support it.

The solution? Download the latest browser! Which reminds me of potentially one more disadvantage; giving yourself a headache whilst attempting to get your website to look identical in Internet Explorer and Firefox - doh! Oh well, practise makes perfect.

In Conclusion

If you are interested in re-designing your website to use CSS, I would start by learning the basics. Find a simple CSS tutorial on the web and work your way through some more complex CSS examples. Then, have a go at doing your own!

How To Design Your Web Site With CSS

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.

CSS - Maximum Benefits

What is CSS?

CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.

Why to use it and how to use it properly

If you don't use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite big. Fact is that we live in a busy world, and people are not will to wait more than 5 seconds web page to load.

From the other side some web developers implement the CSS on wrong way. They write their CSS in HTML code of the page, like this:





…..

What is wrong with this technique? Well, imagine that you have site with more than 50 pages. One day, you decide that you want to change font color and colors of the links on your site. You will have to edit ALL the pages on your site, and do to that you will need time, because you place your CSS in your web page.

Better way is to save your visual attributes in separate, external CSS file, and to link that file with your page like this:





….

Using this technique, you can change the look of your site within minutes, regardless of the number of pages, because your visual attributes are saved in ONE external CSS file. Edit that file, and you are done.

Benefits

Which are the benefits of using CSS? List is quite long and I will list here only the most important.

* Your web page will load faster
* Web page will become more search engine friendly
* You can change you site appearance within minutes
* You can write separate CSS file for handheld devices which will be called up instead of the regular CSS file
* You can forget about creating printer friendly version of your site using separate CSS file when user chooses to print the web page.

PHP Browser Detection and Appropriate CSS Generation - CSS Tips

Here are some of the things I discovered while setting up CSS on a handful of sites:

1. If you don't set a font at all, users will complain because their browser defaults are either too big or too small - as if it's your fault.
2. Using the CSS1 font-size: tag with a specific point size like 12pt breaks some browsers on some platforms (Netscape on Wintel).
3. Even if that weren't the case, point sizes are different on different platforms (Macs display fonts smaller than Windows).
4. And even if they rendered the same across all platforms, it's a really bad idea to hard-code sizes, as there are many people with impaired vision. When you hard-code a point-size, they can't override the size with their browser, and thus can't see your site. One of the worst sites on the internet is CNN.com, which hard-codes very small fonts into their CSS sheet.
5. Because of this, you should stick with scaling percentages or the size syntax (small, medium, x-small, etc).

With those hard-learned lessons in mind, you can design a browser-smart CSS sheet and generate it with PHP. I won't go into details on CSS here. You can view the spec and examples at http://www.w3.org/Style/CSS/Test/19981002/.

Most of that spec was completely ignored by the geniuses at Netscape and Microsoft, which is why it has become such a headache for developers.

CSS Benefits in Search Engine Optimization (SEO)

There are things to consider if your ultimate goal is to optimize your website. Some of these are:

1. File size - Always be reminded that web pages of a particular website should be light in terms of file size. It would be hard for search engine spiders to categorize an overly heavy web page filled with HTML "junk text".

2. Content - An extremely readable content is an important key to remember in order to create a rich content code that will help in optimizing the content of any web page. Always maintain a good content to code ratio. By doing this you will also prevent an overly heavy web page; ensuring a file size that is ideal for search engine spiders to categorize the site.

Cascading Style Sheet (CSS) is an important tool to use in order to benefit Search Engine Optimization (SEO). CSS is used to refine a certain page in order to achieve a page that is spider friendly. Spider friendly page means a page that is created with maximized keywords making it easier for "web crawlers" to recognize and categorize them properly.

Websites designed with the use of CSS are ranked higher than table-based websites because of the following reasons:

1. CSS codes are more accessible because CSS codes are cleaner making them easily readable by search engine spiders.

2. CSS designed web pages load faster than table-based web pages because the code weight is low and lighter than table-based web pages.

3. When using CSS, you can put the most important content and links to the top of the file where "crawlers" can find these essential elements in a quick and easy manner. If you are an Internet Marketing Professional, you should be aware that search engines pay more attention to the text found on the top of the file rather than those located at the end of the file. These important texts are considered clues about the whole content of the website that we are promoting. Do you think it would be wise to put your clues on the end part of your web content?

If you are a wise webmaster you will get the clear and wide view that this article is pointing out - A clear and well presented website for search engine optimization.

Outsourcing CSS - What To Look For

Most web publishers and companies are beginning to realize that cascading style sheets (CSS) is a good idea. CSS allows for individuals to make changes to all of their web pages that link to the CSS file at one time, by simply changing the style sheet. This is much easier than having to change each page one after another as we’ve had to in HTML in the past. For those familiar with it, it’s really simple and something that they can update and upgrade each of their websites with in a timely manner. Unfortunately there are a lot of people out there that have spent countless hours trying to learn CSS with no luck or they simply do not have the time to learn this new and easier approach to formatting. Does that mean that you need to continue to manually update things one page at a time? Not at all, you simply need to outsource your CSS so it can all be done for you! You can learn more about this and how the proper CSS can improve responsiveness and make your website more optimized for search engines at XHTML/CSS Coding Service.

Seeing is Believing

When outsourcing CSS you need to be sure that you are working with a professional individual or company. When shopping around you will want to ask each candidate for examples of their work so you are sure that this person/company can provide you with the type of look that you are going for and will not compromise the integrity of your current website. Remember that CSS allows for one to place text and graphics exactly where they want to, add rollover effects to links, more easily control spacing, and hide items from web browsers, and more. If you know what CSS is capable of you’ll be better able to gauge if someone knows what they are doing. It’s important to not only see the work of each company or individual, but you’ll also want to ask them for references or actual people that you can talk to about their experience and CSS knowledge.

Compare Prices

When shopping around to outsource your CSS project you’ll want to consider price. It’s true that you really do get what you pay for, so consider that when choosing an individual or company to work with. But also remember that the highest priced individual/company won’t always deliver the best work. Price is an important piece of the puzzle, but it must be weighed carefully with the professionalism and ability of the individual/company as well. Many times a freelance CSS professional will provide work that is just as good as a company, but for cheaper. Keep all these elements in mind when comparing prices.

Turn Around Time

The turn around time is also important when shopping for someone to outsource your CSS project to. If you would rather have your website updated sooner rather than later it might pay to go with the company that offers services at a higher price but can have the project completed in just three or four days. Turn around times vary, so you’ll want to be sure to ask this question or inquire on the company’s website before you outsource your CSS project to anyone.

As you can see, there are several important things to think about and to look for when you’re outsourcing your CSS project. Your website is your communication with your clients or the visitors to your website, so you should only entrust the job to someone who is professional, affordable, and will get the job done in the time span that you need it completed.

Webpage Creation in Dreamweaver - How I Deal With Font Conflicts

Dreamweaver would seem to have become the platform of choice for website designers. Simple enough for beginners to master to a workable level and sophisticated enough to keep the master designers coming back.

But it has some very, very annoying conflict issues that can test your hold on sanity.

I ran across this again today so I thought I'd write about it in case someone else finds it useful.

I am by no means a master web designer. I am in fact an Internet MLM Marketer. Websites are a tool to me, not a profession. I fumble my way around bringing websites to life and in the process I run into some very frustrating issues that just don't seem to want to get fixed. Things like: how do I get an mpeg video clip to run in a webpage; my text formats differently in Firefox versus Internet explorer; font changes refusing to take; tables getting screwed up etc. etc.

And there just doesn't seem to be anyone out there who can help me without paying an immense fee for their service. So I struggle along on my own until I finally crack the code thinking: "There must be a better way."

Ever been there?

Well I can't help you with really intricate stuff, but here are some of the things that I have found will save me, and hopefully you, a lot of headaches.

If you're a pro then this article isn't for you.

This is for the beginner like me who still from time to time struggles to get a website up and running smoothly. So if you're a beginner read on.

So there you are--you're sitting there with the blank Dreamweaver page in front of you.

What are you going to do first? Getting it to work right is all about doing it right the first time. Begin as you intend to continue.

Here's what I do ,and don't for a moment think this is gospel (maybe there's an easier way)--its just what I find keeps me out of trouble.

Where fonts for your text are concerned you are best to start by creating a CSS Style Sheet. CSS stands for Cascading Style Sheet and can help keep you out of trouble with fonts that can suddenly go crazy on you. Now this is not the only use of CSS--in fact its amazingly versatile in regard to graphics etc.-- but lets just stick to fonts.

Well get to how to set up a CSS sheet in a follow up article, but the main thing is to NEVER, and I mean never, designate a font that is not listed in your CSS sheet unless you know how to get out of the ensuing mixup. This will help keep you out of lots of trouble with fonts.

There is a great difference between what you see on your HTML editor (which is what Dreamweaver really is--although very sophisticated) and what you see on your web page when you test it as an HTML file on your screen.

And it can get worse when you actually publish it to the web. The layouts of webpages viewed in Internet Explorer always seem to be slightly (and sometimes a lot) different to webpages in Firefox.

Always attach your CSS sheet to the page you are working on and always define your text fonts in your style sheet. If you need a new font then define it in your CSS sheet first and then use it. Some of my style sheets are monsters.

One of the frustrating issues with Dreamweaver is that when you change a font by highlighting it and changing it in the properties window, Dreamweaver doesn't always erase the old font. This can cause conflicts that show up as very unpredictable font changes when you publish your webpage.

What do I do?

As soon as I notice that my fonts or layouts have gone crazy I position my cursor at the beginning of the inconsistency and search in the code at that point for doubled up font definitions.

If you have imported the document or copied and pasted it from somewhere else it will bring all of its old baggage with it, including all of the formatting and fonts from the original document or webpage.

What I do at this point is "cleanse" the document.

I go into code view, select all of the code, copy it to the clipboard and then paste it into a Notebook page. I then go to "edit" and select "find" from the dropdown menu (I can't seem to make "find" work properly in Dreamweaver).

I enter the word "style", position my cursor at the top of the document and click "find next". I then systematically erase every existing style definition in the document (hopefully its not too long).

Your document should now be pure and unsullied, contain no style definitions and be ready for you to attach your CSS Style Sheet.

You then copy and paste the cleansed text back into your code page, making sure to save the original code first in case there's a snafu in your changes.

If you find "font" conflicts arising again, you can simply repeat the process if you can't obviously find the villian at the first couple of tries.

You will know you have problems if you find "non-CSS" styles showing up in your font list in the properties inspector.

A valid CSS style definition will look like this in your font listings:

"Para12ptBlack" or something similar,

while a style that could cause problems looks like this: "style1" and needs to be removed if you want your page to be free of font conflicts.

So look for a line in your code that looks something like this at the point where the problem is showing up:

"style1- Sample Text to Demonstrate Font conflicts."

Dreamweaver defines the "style" in both the "head" and the "body" of your webpage code. Both need to be removed.

Here's an example:

NOTE: Due to constraints form Ezine Articles whereby using HTML tags in the body of my article causes publication issues this is not exactly syntactically correct code but gives you the idea.

----------------------------------------------------------

"head"

style1 (font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold; )

"/head"

"body"

style1 class - Para12ptblueBOLD - Sample Text to Demonstrate Font conflicts.

"/body"

-----------------------------------------------------------

When you changed your font to "12 pt Blue Bold" using an attached "CSS Style sheet" you will notice there are now two styles defined for the same text.

When you re-defined your style from the CSS Style sheet Dreamweaver didn't delete the "style1" from the class definition. This is how the conflict happens - your computer gets confused.

It is these instances of "style 1" and similar, in both the "body" and the "head" that you will need to delete to keep your webpage clear of font conflicts --as long as this is the only issue..

Remember to leave your CSS font definitions intact. You don't want to remove these. These are the good guys.

The line should now look something like this:

class "Para12ptblueBOLD" Sample Text to Demonstrate Font conflicts.

This is a nice clean definition that won't cause problems.

Since you have attached a CSS Style Sheet there will be no Style definition in the "head".

If you've been house cleaning as you go along this will usually fix the issue.

I hope this has been helpful.

Keep a lookout for followup articles on "Setting up simple CSS style sheets" and "Using "Layers to format your page layout".

Free CSS Layouts And Templates

As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you’ll find a list of resources which offer free, gorgeous and valid CSS-based templates - usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.

Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides.

How to Build a Basic CSS Layout

Designing without tables by using CSS layouts is fast becoming the new standard on the Web because of the benefits mentioned in my previous article. Web browsers used these days are now able to render web pages proficiently. In this article I will endeavor to create a basic 2 column CSS layout which you can use for future design projects.

Web Page: http://www.isitebuild.com/css/css-layout.html Style Sheet: http://www.isitebuild.com/css/stylesheet.htm

1. Divide your page into sections - the div id tags allows you to create distinct divisions on your web page. They are identified with a unique id. You can then add a style (css selector) that specifically applies to the div of that id. Remember to include the DOCTYPE (to render your page accurately in the browsers) and meta tags (enables search engines to spider your pages).

wrapper: is the div that wraps around all the other divs like a container for the page elements. header: defines the top banner of the page main: defines the main content of the page nav: defines the navigation of the page footer: defines the footer and sub-navigation of the page

2. Create the CSS code - the CSS code styles the page as a centered 2 column CSS layout with a navigation bar and a footer. The div#wrapper style creates the centered box which acts as a container for the rest of the page content. The width: 80% rule sets the width of the div. The background-color:#FFFFFF rule creates a white background for the div. The margin-top: 50px and margin-bottom: 50px rules create a space of 50 pixels for the top and bottom margins for the div itself.

The proper way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructs the browser to automatically calculate equal margins for both sides, thus centering the div. The border: thin solid #000000 rule adds a border around the outer div. The rest of the CSS code styles the divs for the header, footer, nav, and main content.

The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includes the text-align: center rule to center the header text, and div#footer includes the border-top: thin solid #000000 rule to create a border along the top edge of the div to replace the horizontal rule above the footer in the table-based layout.

The div#nav and div#main styles create the two columns in the middle of the centered box. In the div#nav style, the float: left rule pushes the div to the left side of its parent element (the wrapper div), and the width: 25% rule sets the div's width to 25 percent of the parent element. With the nav div floated to the left and limited to a set width, it leaves room for the main div to move up to the right of the nav div, thus creating the two-column effect. The div#main style includes the margin-left: 30% rule to keep the main text aligned in a neat column instead of spreading out below the nav column. The main div's left margin is set to a value slightly larger than the width of the nav div.

Style Sheet http://www.isitebuild.com/css/stylesheet.htm

If links are placed elsewhere on the page they will inherit the same properties as above..a blue link that hovers to red. What if you wish to create another set of links that are a different color and on passing your mouse over them they are underlined.

4. Create the bottom navigation - to include this in the

section of the page, I use div#footer and code each link accordingly. To make the list go horizontally I use: display: inline;

Now that I have finished creating my style sheet I want to shorten the code on page by linking it to my external style sheet. Here's how:

4. Create an external style sheet - copy and paste all the css code (without these tags: ) into notepad and label it something like "style sheet". Place this style sheet between the head tags of your web page.

This will reduce the code on your page so it will load fast plus the search engines can more easily spider your web page.

4. Add content to your page - after you have got your page looking correctly, you can add more content to it. Adjustments can easily be made to any style on the page (or your whole site) by simply editing one style sheet.

5. Upload your files - be sure to upload your web pages and style sheet to the root directory of your server.

6. Validate your code - be sure to validate your xhtml code: http://validator.w3.org/ and css code: http://jigsaw.w3.org/css-validator/ and make corrections where necessary.

7. Check browser compatibility and screen resolution - check that your page renders well in the popular browsers (IE6, NN7, Firefox)

If you are beginning with CSS layouts, implement then slowly by making small changes to your pages i.e. creating a style sheet for your main headers and fonts only. As you become more familiar with CSS you may eventually build all your future sites with CSS layouts.

Resources:

Basic CSS layout
http://www.isitebuild.com/css/css-layout.html

CSS Style Sheet
http://www.isitebuild.com/css/stylesheet.htm

Benefits of CSS
http://www.isitebuild.com/css/index.htm

Hacked Off with CSS?

For those not familiar with CSS Hacks, they are ways of using styles/classes that only apply to particular browsers. They are used to overcome the display problems mentioned previously by exploiting CSS structure and code. Most involve simple punctuation tricks to fool the problematic browser into accepting a different style to the browsers that display correctly.

CSS Hacks work, but there are two main points to consider.

Firstly, the validity of the CSS may be affected. Invalid CSS hardly seems worthwhile as the main aim of CSS layout is to embrace web standards.

Secondly, designers have performed Hacks to satisfy current and past browsers. They have failed to look in the other direction – will it be futureproof? With the launch of the next version of Internet Explorer this summer (and many more to follow), one has to wonder whether these Hacks, or quick fixes, will break a site.

In essence, we cannot predict how Hacks will be displayed. Designers might like the idea of work needing to be done in the future on a clients site but if the site breaks the client is unlikely to commission the same team to fix it.

The true skill of a designer is shown when s/he creates a design without Hacks that generally looks great and works. Slight differences have to be expected. Trade-offs have to be made – and it is the decisions made that show a quality end product.

Top 12 Benefits of Using CSS for Web Pages

If you are still designing with tables then you are missing out on a lot of the benefits of cascading style sheets (CSS). Tables were not supposed to be used for designing but unfortunately it has been the standard for a long time.

Not any more.

1. Separate content from presentation. An external style sheet can contain all the styles for your web site, then if you want to change the content you only have to edit one style sheet. This is great for a web site that contains hundreds or thousands of pages.

Imagine if you had to edit each page..it would take you forever.

2. Google benefits. Google gives more weight to content closer to the top of your HTML document. Search engines spider the content that comes first in your source code. With CSS you can easily structure the content to appear first with the rest of the source code following it. This will help outrank your competitors who may have their navigation appear first and their content last..

3. Fast loading pages. Tables slow down the loading of your pages because the spider has to crawl through each table. If your tables are nested inside each other your page will load even more slowly. Designing CSS-based web pages will speed up the loading of your pages considerably because the styles are all contained in one style sheet.

4. Small file size. CSS will reduce the file size of your html document. If you look at a web page that is designed with CSS you will notice that the size is very small compared to one designed with lots of tables. This also helps reduce load times.

5. Reduce clutter. CSS allows you to get rid of a lot of extraneous html code therefore making your site code neater and cleaner. This makes it easy to alter the code if you need to make edits.

6. Eliminate javascript. Many people surf the web with javascript turned off because they don't want to be vulnerable to viruses or allow pop-ups. This means that the beautiful javascript navigation you produced will not be seen. You can often achieve the same affect with CSS navigation. These allow for rollovers and other pretty affects and are much more user friendly.

7. Accessibility. If you use CSS2's aural properties it provides information to non-sighted users and voice-browser users. The CSS2 "media types" (used with @media rules) allow authors and users to design style sheets that will cause documents to render more appropriately for certain devices such as braille devices, speech synthesizers, or tty (text telephone) devices.

Learn more about Accessibility Features of CSS http://www.w3.org/TR/CSS-access

8. Save time. CSS will allow you to design your site much faster than tables because there are some styles you can use for every site. I store "often used" CSS snippets in a special file where I can easily access them for any site I design.

9. Save money. CSS will shorten the project development process and eliminate design obstacles that occur from using tables. If designing many web sites you will be able to use the same style sheets or just make a few modifications to them. You will still charge for the design project but it won't take as long as when using tables thus making you more money in a shorter time period.

10. Flexibility of design. You can use pixel precision in your web site designs. By adjusting the margins and padding of the CSS you can easily adjust the position of your content. You can also create very modern designs that can't be duplicated with tables. For example you can use a background image for a header then place your content over it using the H1 tag for better page optimization.

11. Way of the future. The future of the web is moving towards better accessibility with web sites so they can be viewed by as many people as possible. This may be enforced in future web standards therefore if your web site is still using tables or deprecated tags it may become obsolete or disappear from the search engines. This could really hurt your business.

12. Print friendly. When a user chooses to print a web page an alternative CSS document can be called up. This document can specify that formatting, images and navigation disappear and just the page content appear on the printed version.

See creating print style sheets

http://www.meyerweb.com/eric/articles/webrev/200001.html

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.