CSS Website Design India

Webdesign Tips: Css Styling And Layouts

2007-07-16T01:13:00.001-07:00

There are many ways of improving the accessibility of your web site to the visitors. The most important one is using the external Cascading Style Sheet (CSS), which has the purpose of separating the structure and presentation of your web site.

You can bring the best out of the use of Cascading Style Sheets by making improvements in the structural coding of your HTML pages. HTML elements must be chosen for their functional purpose and not for their default style attributes. The result is that the code is cleaner and more easily to be maintained. One of the advantages of using the Cascading Style Sheets is that the people who experience readability problems caused by the appearance of a page can choose to view it without the style sheet or, if they know what to do, replace it with their own user-defined style sheet. In order to leave them this option available, you must make your styles to allow overriding. This way, the visitors will feel more comfortable with that particular web site.

The style sheets specific to the media can be linked to a site to take care of the differences in its presentation in numerous browsers. In order to determine how the page will sound in a text-to-speech device, you can link a separate style sheet to it. A print style sheet will allow you to correctly display the content in a printer-optimized version of a page, if the visitor wishes to print the page.

The result of choosing to use Cascading Style Sheets is a real simple way to provide alternative styles of the same page content, addressing almost all common readability problems. For instance, you could offer an option to have the text in a larger text size. You can have no guaranty that this will solve all visual problems, but is a quite simple attempt at providing clear and obvious accessibility features. There is not much effort involved, so give it a try!

Think about the time and resource you can save by using the cascading style sheets. Your site will be quicker to download and use. Well, after all these features we have been talking about, most of you will agree that using the cascading style sheets is a very good thing. Nevertheless, we must never forget about the fact that your site must be just as accessible and easily used when the visitor chooses not to use any style at all.

Top 100 CSS Directories, CSS showcase, CSS galleries - You Should Know

2007-07-12T21:32:00.000-07:00

Here is the list of top 100 CSS directories, CSS showcase, CSS galleries that ranks websites (using CSS), on the basis of Alexa ranking.

Read More | Visit Website

Creating Tableless Sites - Why and Some Basics

2007-06-20T04:56:00.000-07:00

In a time of web developers who just like to say that 'Tables are Evil' and can't (or won't) explain why, this article will attempt to give you some solid reasons that people create tableless designs. Included are six major benefits of creating tableless sites, and how to sell your desire to alter your website to a resistant manager.

Let's begin with the benefits of a tableless layout. These are only in the order that I feel they should go in, some things are more important to other people, so rank them as you will.

Forces You To Write Well-Formed Code

You cannot have a properly made tableless layout, and use improper and non-standard code. Well, let me correct that - you can (technically you can do it) but it defeats the whole purpose. When you are creating a tableless design, you should be using standards compliant code. I think that anything that makes you get into the habit of always writing clean code is a good thing.

Faster Loading Time This is absolutely a benfit of a tableless layout, and for several reasons. First, on a fundamental level - tables load slowly. For the most part, unless you set the height and width of your table elements, all the text has to be loaded and rendered BEFORE the table sizes itself to the page. Of course, this is what so many people loved about tables isn't it? The fact that they were so easily sizeable. The downside is how much more time they take to load.

Okay, so the solution to that loading time is to set all the values explicitly, right? So now we see another downside. Code clutter that increases loading time. First of all, just by themselves, tables take alot of code. How many td open and close tags does your average table based layout have? Tons. Having to set all the values explicitly only adds to the page size and loading time. There are many experiments that have been done on this topic, I'll point you toward this one that StopDesign did on a remake of the Microsoft website from a tablebased site to a tableless layout. That remake showed a 62% file size reduction of the site, and using their average hits per month for the Microsoft site, calculated that Microsoft would be saving 924 GIGS in bandwidth per day, and 329 Terabytes of bandwidth per year. For any company that pays for bandwidth, these things are important.

Easier to Read Code If you are using standard code, semantic document conventions, and a tableless layout, your code can be so clean that it looks practically like just regular text with a few extra symbols.

That is a great benefit because it not only makes it easier for you to update, but it makes it easier for a non-technical user to make small alterations to. Additionally, if you work as a web developer in a more freelance capacity, it is common for there to be a full-time web developer who has to maintain that site. Clean and simple to read code makes that a easy transition. We like it when people leave us easy to understand code, right? Let's return the favor.

Print Alternate Views When you create a page using a table-layout, you are rather unfortunately locked into a certain layout. Developers who have created table-based websites, as most of us have at some point - particularly if you were in the the industry before the big tableless movement, know that you often have to create a separate printable version of your pages. This can be, needless to say, quite tiresome.

Ease of printing style control is a huge benefit with a tableless layout. You can easily create a single new printing style that applies to all your pages, instead of making them individually. That alone is a huge time saver, but there is more.

While you can control all elements with this approach, the biggest key is organization of information within the page itself. Using the example, let's assume that the display order we want all our pages to print using the following order: The page header first, the content next, the special news after that, then the link list, and then the footer. However! We still want it to display as it would normally when viewing (meaning the header at the top, the links on the left, content in the middle, news on the right, and footer at the bottom). With a table-based layout, you would have to create a new page to do that special printing organization because the print style will read your columns left to right. With a table-less layout, you are not bound by this. You can order the content in your page however you like, and still control the way it looks... all by using the CSS only!

Additionally, because we can put the content in whatever order we want in the HTML, and then move the content blocks around for website viewing using CSS - we can have ultimate control over presentation.

That is very important because the clean code, and ability to alter presentation, means that your site can be viewable by someone on a small mobile phone screen, a PDA, in all text format can be perfect for someone using a text-to-speech reader, or a braille device, and since the code is clean, it is both backward compatible (with older browsers seeing mostly just the text) and forward compatible with new technologies to come. The flexibilty and organization leads to being able to create a powerful website that takes advantage of some of the possibilities with XHTML, and adding in support in your pages for microformats, or taking advantage of using RSS / ATOM feeds from your site to develop a base of regular readers.

Search Engine Optimization Due to the fact that you can organize your most important content at the top of your page, without affecting the layout, your page can be better optimized for search engines. For instance, say that I have a navigation bar on the left side of the page that lists tons of parts of the site that are actually great keywords. I could move that navigation bar code higher up in my actual HTML, without changing the layout, because I'm using the CSS to position the navigation where I want it.

Those search engines can also more clearly find common words throughout your document without having to filter through code. Search engines prioritize websites that have a higher content to code ratio, so putting all your style elements into your external CSS stylesheet makes your site highly content based to a search engine. Tableless layouts, as previously mentioned, decrease page size and loading time - another bonus to search engines.

Additionally, being able to take advantage of the RSS/ATOM feeds (see the section directly above) will aid you in some new technology for site indexing as used by all search engines called ROR. (ROR is an XML format summary of your website, like a sitemap, that search engines can access for additional information about your website.)

Presentation Flexibility Making changes to a CSS based Tableless layout is simple. You can alter the CSS file only, changing as many styles and graphics as you want. The affects cascade through all the pages on your website, and eliminate the need for manually updating many pages.

For one of the best known examples of how powerful presentation can be, you can visit the CSS Zen Garden and navigate through the 'Select a Design' links to see the differences. Each of the different designs uses exactly the same HTML file content. The only thing that changes is the CSS file for each one.

Selling Yourself On Standards Sometimes knowing how to code for standards, and create flexible tableless layouts is not enough. There are some web designers who meet with difficulties from their management. Most often those difficulties are rooted in the management being unaware of the benefits of using tableless content and CSS driven layout.

If you want to design for standards, but you work for a company that is not very forward-thinking in allowing you the time to work on the changes -- try this: Make them think about their pocket-book. Point out the cost saving benefits.

For instance, try grabbing a single page of existing code. Clean it up to standards. Compare the page size to before (including image optimization), and count the difference in bytes saved. Multiply that across the number of site pages, and the number of days per month. Then explain to them the amount of bandwidth cost saved monthly if this was done across the whole site. If that isn't enough, show them how quickly you can make changes to a website once it is CSS driven, and push the idea that you will be able to change the site more rapidly when there are needed updates, and you will have more time to focus on adding in new functionality to the site - instead of spending your time doing maintenance.

Summary Hopefully, this little article will serve as a way to get you started on understanding why to use a tableless layout, what the benefits are, and you can easily take a look at Layout Gala and download just 1, or all 40 of the tableless layout examples to get you started. However, the best step toward moving to a tableless design is to slowly move your website toward a standard compliant version first, before you get rid of the tables. To get to that point, study as much on CSS as you can, read through the articles here and elsewhere on the web, and moving from table layouts to tableless will be just a matter of time.

Thanks to Nicole Hernandez, is a web developer with a specialty in web standards and accessibility. She is the owner of Website Style

What is The Concept Behind CSS?

2007-06-12T04:58:00.000-07:00

The concept behind CSS (a.k.a. cascading style sheets or style sheets) is really simple. CSS allows you to make changes to all of the web pages that link to the CSS file at once by changing a style in the style sheet, instead of having to manually change every style in every HTML file.

CSS allows you to create a single document of code, similar to an HTML file, that lets you specify the colors, fonts, backgrounds, etc. of a web page. The CSS file is then linked to from the web page(s) that you want to have the same styles that you specify.

If CSS did this and only this, they would save you a lot of time to say the least, especially if you have a large or multiple web sites. This alone is worth learning CSS, however, style sheets allow you to do this and much more.

CSS also allows you to:

position text and graphics precisely where you want to
add rollover effects to links
control the spacing between letters, lines, margins, web page borders
specify the units such as centimeters, pixels, points and more
hide content from certain web browsers in certain situations. An example of this is when you have some content that you want to appear only in your web pages, but not in print.

In the end, CSS can save you a lot of time and effort and is very easy to learn.

The Low Down on Cascading Style Sheets

2007-06-03T05:14:00.000-07:00

CSS has been around for more than 10 years already beginning in its development in 1997 but it seems it has been in the public consciousness for only a relatively short time. The reason for this is because it wasn't until the year 2000 that many web browsers began using the capabilities of CSS beyond its more basic color and font characteristics. Of course things are way different now and virtually all modern day browsers feature support for all CSS Level 1 aspects, many aspects of CSS Level 2 and some web browsers have even gone beyond that to support some of the capabilities of CSS Level 3.

Indeed, it is rarely that you find a web site nowadays that does not utilize some form of CSS in their design and development. For better or worse, web sites that rely solely on HTML are quickly going the way of the dinosaur. May industry pundits as well as end users have even gone so far as to consider a thorough knowledge of CSS as being far more necessary than a thorough knowledge of HTML. While in truth they are both equally important and will continue to be an important facet of the web for many years to come, there is no denying the widespread impact that CSS has brought upon the World Wide Web.

CSS was originally developed as a means by which web developers could define both the look and the feel of their web pages. With its inception, web designers were now able to treat content and design as two separate entities, thereby allowing HTML to function more in accord with its intended purpose, which was to focus on the markup of a particular web site's content and leaving the responsibility of the design and layout to CSS.

The term CSS itself is an abbreviation for Cascading Style Sheet. The style sheet in this particular instance refers to the document itself. The concept of style sheets itself is nothing new; designers have used them in their documents for many years. Strictly speaking, style sheets are the set of technical specifications that govern a particular layout, whether it is online or on print. The purpose of these of course is to ensure that any subsequent designs will conform to the predetermined specifications upon printing.

This concept can be translated easily enough to the World Wide Web only in this particular case, Cascading Style Sheets not only determine the technical specifications of a particular document on the web but also has the added function of communicating to the viewing vehicle (in this case the web browser that the end user is using to surf the Internet) exactly how the document that is being viewed is to be rendered.

One of the most important things to remember in all of this is the key word Cascade. Much like a stream of water running of a cliff or elevated area comes into direct contact with the rocks and soil that line the full course of the incline, yet is ultimately only affected in terms of its final destination by the land elements at the end of the slope, Cascading Style Sheets by their very nature flows or cascades through any number of separate style sheets. To follow the stream of water analogy even further, the appearance of a particular web site is ultimately dependent upon the user agent style sheet, which in many cases is the default style that the Web browser will utilize in the task of displaying a particular web page in the absence of any other set of instructions.

Of course more often than not, a web designer will probably provide any number of his own instructions that are embedded in the web page in question. The Cascading Style Sheet in this particular scenario will be tasked with dictating to the web browser which particular set of instructions will have top priority. The most commonly seen usage of this is in the fonts that are used for a web site. Even if your web browser is set to display web pages in a specific font and type size, say Arial narrow 10 points, the font size and family that is specified in the Cascading Style Sheet will take precedence overriding the default values that have been set in your browser.

Cascading Style Sheet go far beyond font specifications however into the areas of XHTML and XML markup. This means that Cascading Style Sheets could be used to define the look of any XHTML and XML markup that you use in your web site.

Clearly Cascading Style Sheets are one of the most powerful tools that any web designer can have in his or her arsenal and they can have a tremendous impact on the whole look and feel of a web site. If you are at all interested in becoming a professional web designer, a thorough knowledge of Cascading Style Sheets is crucial.

Thanks to Mikhail Tuknov is a search engine optimization specialist providing web site search engine optimization (SEO), pay per click (PPC) management and web analytics services.

Your New CSS Website is Inside

2007-05-02T05:10:00.000-07:00

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.

Drew Stauffer is co-founder of Wildfire Productions, a San Diego based search engine marketing and website development company.

Teach yourself CSS the easy way

2007-04-16T05:08:00.000-07:00

I taught myself HTML back in the mid-nineties and was proud of the fact that I was able to accomplish the design of fairly complex web pages with nothing more than a starter HTML book, an HTML reference book, and the knowledge I had stored in my head. But back in those days, we web designers had what looking back was a fairly limited amount of tools with which to work, and the quality (or lack thereof) of sites on the web was lackluster at best.

Fast-forward to today: The hand-coder has more powerful and intuitive software packages available that will still allow us "to get our hands dirty", which brings us to the purpose of this article. With the standardization of the much anticipated Cascading Style Sheets (CSS) in the late-nineties, the web design community has become familiar with a much more powerful and precise method of web page layout.

"But how is an old-time web coder supposed to learn CSS the easy way?!" Well, I say you should learn it the way I, and countless others, have:

1. Download the Firefox browser
2. Install the Html Validator (based on Tidy) 0.5.9 extension
3. Open one of your "old" HTML files
4. View the source, click the "Cleanup the page" button
5. Check the "replace FONT.....tags by CSS" box, then Refresh

Now you have a very neat and tidy piece of code, with all the CSS dirty work done for you! At this point you can copy & paste the resulting code and use it in your project and start figuring out what it's doing. I was amazed at how easily I was able to pick it up and start making changes on my own. When I wanted more information on a certain style it was a just a Google search away to many excellent CSS resources on the web. I find it much easier to learn CSS if I get to apply the modifications to the existing code that I've been working on, and I think you will too.

I hope you find this article helpful and if you follow these steps you should be able to add CSS to your web site design toolbox in no time!

Thanks to Erich Bihlman, of Bihlman Consulting - PC and Internet Tutoring and Website Design in Prescott, Arizona. http://www.bihlman.com

SEO Benefits Of CSS

2007-04-08T05:05:00.000-07:00

This article is most useful if you are somewhat familiar with HTML and CSS. I explain the concepts well enough that you do not have to be an expert, but I want to provide material that will introduce you to more advanced design in ways you can understand.

Like many other web designers, I began laying out web pages using graphical tools and discovered the wonders of tables for layout without anyone telling me to use them. Since browser support for CSS is better than it used to be, and tables cause problems, CSS offers you a benefit you may not have thought about before, the benefit of better SEO.

I want to say right away that quality content should be your highest priority, not SEO tricks. The advice given here will help you get better search engine results because the key to real SEO begins with good page structure and organizing your content. By understanding how search engines "see" your pages, you can build better page structure.

Search engines use what is called "top down" logic in looking at web pages. They look at your code, not the visual display that users see. Human eyes are drawn to the page content right away, even when there are other things on the page. Search engine robots do not see things the same way, but, they are logical and predictable once you understand them.

You have most likely seen search engine results that do not make sense because some obscure content gets displayed instead of the actual content of the page. I will illustrate top down logic so you can understand how to make CSS work for you.

In the mind of a search engine, the gist of your web page is determined first by what content is at the top of the page. If you start with certain words, they appear often throughout the page, and then again at the bottom so it is essentially your closing point, that, in the automated brains of a search engine is what your page is about.

Your well trained eyeballs will probably look for a title, then read the content; so to you, this is the top down logic of the page. Read your HTML code from the top down. You may be surprised how far you have to scroll before you get to the real content, and, how much other "content" a search engine will see first. If you use tables for layout, the top down logic of your code looks like it has the legs cut off and the place settings are on the floor.

Using CSS, you can organize your code so the search engines see your real content first regardless of where it appears on the page.

Let's use a simple HTML example:

Insert all your head info, including a CSS link like below

Heading With Your Important Keywords

Subheading With Important Keywords

Your important content will be here, with keywords. Notice how this is right at the top of your code. No matter where this is on the page, you want it here at the top of your code.

This could have image buttons, text, or both. If using images, make sure to include alt text which should contain keywords. With tables for layout, this would most likely be above the content, now it is below where it should be. The div id above will help you control this.

This example of another div is used to illustrate another SEO principle. Use keywords in it so it is like your closing point. By appearing at the bottom of the code, it makes stronger SEO.

Next, I will show a simple example of how to make the file.css to control the layout. You can use this code in a text editor to see the effects. For simplicity, I will focus on only the layout code, we will not be declaring fonts, sizes, links, etc.

In the HTML example, we have 4 sections (divs). You can divide up by pixels or percentages (or even both). We will be using pixels for simple illustration of the principle here.

/*Begin CSS*/

/*Just for the record, this is a comment in CSS*/

#nav {position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 500px;
padding: 20px 10px 10px 20px;
}

/*To explain the code above, I listed the divs in a different order than the HTML. This order follows the flow of the way I am doing the page layout. It also follows the flow you would have if you set up a table structure in HTML. The nav section butts up against the top left corner of the page (top and left are both 0px). The # sign defines the "id" of the div followed by the name. I set the width to 200px which is like making a table cell that width. I have used the 500px height just as an example so the summary below will start where the nav ends. You want to be sure everything will fit with the sizes you specify. You can also set padding, but unlike a table cell in HTML, you can set each side separately. In the example above, the first 20px is the top, then it declares each side in clockwise order so the left side is also 20px.*/

#summary {position: absolute;
top: 500px;
left: 0px;
width: 200px;
padding: 20px 10px 10px 20px;
}

/*The summary above starts where the nav ends, at 500px from the top. The other settings match for alignment. I did not set a height because it will stretch just like a table cell when you insert your content.*/

#banner {position: absolute;
top: 0px;
left: 200px;
width: 550px;
height: 150px;
padding: 20px 0px 10px 20px;
}

/*The banner will be at the top of the page, but will start at 200px from left where the nav ends. Declaring a height is optional, but it will help for making sense out of where the content below will start. I used 150px just as an example. The reason for 0px padding on the right side is because the remainder of the screen is empty in this layout, no need to pad that side. I limit the width so it will display well down to 800x600 res (the total width here is 750px).*/

#content {position: absolute;
top: 150px;
left: 200px;
width: 550px;
padding: 10px 0px 10px 20px;
}

/*Now the content starts right where the banner leaves off, 200px to the left and 150px from the top. Notice this is last. If you used tables to create the same layout, this would be last in your code too. The search engines would read everything else before getting to the meat of your page. In the HTML used here, it is at the top of your code so the search engines see it first.*/

/*End CSS*/

These are simple examples, but if you can think in terms of top down logic, you can build search engine friendly pages. They will also load faster as complex table structures take longer to load than CSS layout, which is another benefit to CSS.

Thanks to Steve Chittenden, seeks to help business owners and organizations market themselves effectively and succeed. His company, Creative Business Services, provides carefully planned web design, graphic design, writing, and marketing services aimed at achieving this. goal.

Cross Browser Compatibility

2007-03-09T04:59:00.000-08:00

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.

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

5 Reasons To Use CSS

2007-02-20T04:53:00.000-08:00

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.

Thanks to Hilco van der Meer, is known as the author of the Cascading Style Sheets Course How To Master CSS. He's a professional Web Designer for over 5 years now. His course aims at easy to follow and step-by-step examples. More info can be found at http://www.HowToMasterCss.com

How To Style Your Text With CSS

2007-02-05T04:52:00.000-08:00

Styling text with CSS is really simple. We can define colors, underline it, make it bold, define the font etc etc.

We will start with some basics.

First we define the html where we will be working with.

This is the text

1. Colorize your text

We can select the P tag and add some styles to it. p { color:red; }

Now our text will turn red. You can define any color code your want or choose one of the 16 standard color names. The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.

2. Define the size of your text

p { font-size:12px; }

You can define any font-size you want, 145 pixels is not a problem. That is, technically speaking.

3. Make the text bold or Italic You can use the font-style property to create these effects.

Bold: p { font-weight:bold; }

Italic p { font-style:italic; }

4. Overline, Underline, strike-through and none

The text-decoration property is useful to create the underline and the other effects we need. p { text-decoration:underline; text-decoration:line-through; text-decoration:overline; text-decoration:none; }

On default, the text doesn't have any lines at all. Except for the link. You can remove the underline by using the text-decoration:none; setting.

You see, it's quite easy to style your text using CSS. And you can do it all in a separate stylesheet!

CSS - Weight loss for your code

2007-01-25T04:49:00.000-08:00

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.

Further information about CSS can be found at the W3Schools CSS Tutorial.

With many years of experience in the industry, Sasch Mayer is an accomplished SEO copywriter. He is currently working in Cyprus under contract to IceGiant Web Design. Visit the IceGiant site for quality web and graphic design, information and more, non-syndicated articles.

What is CSS?

2007-01-12T04:50:00.000-08:00

1. CSS stands for Cascading Style Sheets.
2. CSS is the technology used to make the layout for WebPages.
3. CSS allows you to make changes to all of the web pages that link to the CSS file at once by changing a style in the style sheet. Instead of having to manually change every style in every HTML file.
4. They would save you a lot of time to say the least, especially if you have a large or multiple web sites.

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

Selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

Cascading Stylesheets Advantages:

1. The content is separated from the design.
2. You site uses less bandwidth and loads faster.
3. Your website will automatically gain better search engine results.
4. CSS is compatible with newer browsers.
5. CSS can be used to display the same content on different media.

So it gives you great control of your website and makes your visitors happy when they are surfing your website.

Tables vs CSS - Which is better?

2007-01-02T04:46:00.000-08:00

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?

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

Web Site Design Company Partners

2007-01-01T00:51:00.000-08:00