Friday, July 23, 2010

CSS or Tables?

What is CSS?

CSS stands for cascading style sheets. They are the new technology used to layout and style web pages.

So what happened to old, trusty tables?

For long tables were the only tool available to the web developers to layout their web pages. But with CSS support becoming common, you now have a choice. Both have their strong and weak points, some more than others as you will soon see.

The advantages of tables.

1. Tables have been much longer than CSS, so even today it is easier to find someone who can do a layout in tables.
2. Most of the WYSIWYG editors output table driven layout.
3. CSS support can be buggy, especially in older browsers. So your web pages may display differently in different browsers.

The advantages of CSS.

1. Tables were never designed for layout. So you can get only limited control over layout with tables. CSS is designed for layout. With CSS you can get pixel level control.
2. CSS decouples design from content. So it makes it easier to enforce a standard look and feel across your website.
3. If later you want to change your sites style, it can be as easy as changing one import statement and using external CSS.
4. With nested CSS, pages become large unnecessarily. Moreover until the whole tables is downloaded no part of it can be shown. This leads to a slow website.

So give me the lowdown on this. Which one is better?

With CSS support becoming common, there is no compelling reason to prefer tables. With CSS you get much more control and flexibility. So unless you are unwilling to spend time learning CSS, upgrade to CSS. Today!

Article Source: http://EzineArticles.com/?expert=Shabda_Raaj

Some Background on CSS

Today's World Wide Web is definitely not what it was twenty years ago. I remember one of my first experiences using the Internet in the early 1990s. A friend of mine invited me over to his house to check out a new technology his family recently set up in their home. He showed me baseball scores from a website that published sports information. When he told me that the scores were updated within the previous hour, I was amazed. I remember that there wasn't much color or style associated with the feed we were examining. Just black and white text with team names and scores.

Between that time and the Web 2.0 (enhanced interaction, video, etc.) world we live in now, web pages became much more flavorful. Advanced arrangements, color, and other effects were brought into the presentation of web content to give the information visual appeal. Web pages became burdened by tags specifying font styles and color, table markup for setting up the page layout, and other tags that were not necessarily pertinent to the information being presented. Consistency in the look and feel between one web page and the next for a particular web site became difficult to maintain.

The development of CSS in the late 1990's brought a welcomed improvement to the web. With CSS, the presentation tags that determine color, background images, and other aspects of a site's look and feel can be pulled out from content itself. A common example of how CSS changes the way web pages are developed uses the old HTML font tag, which was used to specify how the text enclosed within it would be presented. Here's an example. Consider a situation where you want the font for each of your paragraphs to have a particular size, color, and style. You might use the following markup to accomplish your formatting:

<p><font example text></font></p>

Using CSS, the font tag would be unnecessary. Instead, your web document would likely access a style sheet (linked to from your page header) that formats every paragraph from a central location. With CSS in place, your paragraph would look like this instead:

<p>Some example text...</p>

The formatting of the font size, color, and face would all be done separate from the content itself. This makes it easier for search engines and web readers to see the actual content (in this case, "Some example text...") instead of having to do extra work parsing through the font tag and its attributes. CSS also reduces the amount of work by a web developer by removing the need to repetitively specify how various elements of a page should look. Although this was a simple example, consider a full page of HTML , with hundreds or even thousands of tags. The difference between CSS and the traditional HTML tag usage becomes obvious.

Using CSS provides a few major benefits over the old school HTML standard, including the following:

o CSS provides the ability to define styles for multiple HTML tags in a centralized location so that they don't have to be specified over and over again.
o CSS allows for separation of content from presentation, which makes content more accessible to search engines and web page readers.
o CSS provides more flexibillty in working with background images, form elements, and other aspects of a web page. There are many more attributes available with CSS than what could be specified with the deprecated HTML standard.

With a little practice, you can become adept at using basic CSS to format your web pages. Becoming an expert with CSS then becomes an issue of accumulating experience with CSS properties and their associated values, and learning the effects of how styles can be applied to tags. You can polish your CSS skills by experimenting with using CSS to arrange and format page mockups. If you become good enough, you might even become comfortable designing from scratch using CSS.

Article Source: http://EzineArticles.com/?expert=Richard_Robbins

Search Engine Friendly Web Design - 3 Ways to Use CSS

This article will point out 3 simple and highly effective web design techniques that use cascading style sheets to improve your web design and make your website perform better in the major search engines.

First of all, what is CSS? CSS stands for cascading style sheets and CSS is a way of separating presentation code from your actual content in web design. Usually you build up a set of CSS style rules that are stored in a separate file that has a .css file extension. You then link to the CSS file from your web pages using an HTML link tag.

There are many, many web design advantages to separating your presentation code off into separate CSS files and this article will tell you 3 excellent ways that you can use CSS to make your web design more search engine friendly.

Web Design Technique 1 - Us CSS to Structure Your Document

Let's consider the facts that we know about search engines. They send their search engine robots to your site to read the content that you have there and the easier it is to find for them the better because they don't waste much time looking. So having said this, what is the point of bogging down your pages with lots of un-necessary presentation markup that could quite easily be stored off in a separate CSS file. Most often this means removed any extraneous table tags and replacing them with a smaller number of HTML div tags which can be formatted using CSS rules. This removes the vast majority of presentational markup and leaves you with nicely formatted content that the search engines can easily find and index.

Web Design Technique 2 - Us CSS to Style Your Header Tags

We also know that search engines place a huge amount of importance on the header tags - h1,h2,h3 e.t.c. that they find in your pages. The thing that puts most inexperienced web designers off using header tags is that by default modern browsers render them in massive black text that looks really ugly. This is where CSS comes in. CSS can be used to easily make your header tags appear in nicely formatted, attractive text that both scores well with search engines and is pleasing to the eye of the user - perfect!

Web Design Technique 3 - Us CSS to Create Rollover Images

Traditionally rollover images are created using 2 graphics for the on and off states that are toggled on and off using some complex JavaScript code. This JavaScript code can bloat your web pages and since it is not content and just appears as gibberish to search engines it can adversely affect your rankings to have lots of embedded JavaScript in your web pages. A much better way to accomplish the same web design effect is to use CSS. Your still need your 2 graphics but you actually create a normal text link in your (that can also have keyword targeted anchor text) and use CSS to format its appearance. This is as simple as making the link a block level element in your HTML, setting it a height and width and then defining it 2 different background images, 1 for when the link is in its 'off state' and when for when the user is hovering over the link.

Conclusion:

Cascading style sheets are a very powerful way of separating presentation code from your actual content and the search engine optimisation benefits the CSS will bring to your web design are undeniable. Why not put these CSS web design techniques to work on your website today?

Article Source: http://EzineArticles.com/?expert=Stuart_Mortimer

Monday, July 19, 2010

All About Floats

The Best Reasons For Using CSS Layouts

In the culture of modern web design, Cascading Style Sheet or CSS has become a popular tool and trend nowadays. With the development of numerous, fast and modern web design applications, the use of tables were no longer effective and efficient as it used to be. Today, CSS is found by most web designers as more effective, efficient and acceptable in their growing industry of web design. Such advantages are as follows:

• Consistency - With effective use of the "inheritance and cascading" features of CSS, a global style sheet can be used to affect style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made easily, simply by editing a few rules in the global style sheet.

• Accessibility - Most of CSS features are accessible to many websites accessibility standards in different countries and industries of the world like the government. It is also accessible to JavaScript which most websites use.

• Reformatting Friendly - At CSS, a simple change of one line and a different style sheet can be used for the same page. This helps and provides the user the option to tailor a page or site to different target devices. Also, devices not able to understand the styling will still display the content.

• Flexibility - CSS is so flexible that combining it with the functionality of Content Management System (CMS), you can program it into content submission forms. Hence, the contributor is able to select and submit in the same form the layout of an article or page he is submitting, though he is not familiar with or able to edit CSS or HTML codes.

• Enhancement Friendly - With a clean CSS-layout, it's easier to optimize your website for mobile device such as iPhone; and in creating animation and effects, say with flash.

• Printer Friendly - With the CSS media type "print", users can specify a style sheet that is only used when printing. This can be very useful and allows for neatly styled printouts that hide non-essential parts of the page and only contain the main content.

• Modem Speed - In CSS, style sheets are used on multiple pages without being reloaded because they are usually stored in the browser cache. Therefore, the download speeds are increased and the data transfer over network is reduced.

• SEO Friendly - CSS makes your website SEO friendly, thus boosts your search page ranking. Since search engines do not go through the bundles of HTML codes to get to the indexed codes, if you use external CSS files to design and determine the design attributes; the HTML code will be clean and it will result to better search engine rankings. In CSS, you could easily make the main content of your site to show up above the header or navigation menu in the code of your website; thus will help to show search engine crawlers the importance of your content. Because modern search engines such as Google, Yahoo and MSN love light-weighted websites. They want to see your content; the text, not the code. With CSS you practically externalize excessive code into external file, thus leaving the actual page clean and simple.

Though the use of pure CSS alone meets a number of difficulties and drawbacks, yet it offers more than any other framework in the market today. Which framework you choose is really a personal decision. Different frameworks are better for different types of web designs, and for different designers. CSS being: SEO-reformatting-enhancement friendly; fast-loader, accessible, usable, flexible and consistent, can definitely give a boost to your business inwardly and outwardly.

For your virtual assistant/outsourcing services needs in web design and management, visit us online at http://www.remoteworkmate.com/web-design-virtual-assistant/.

Article Source: http://EzineArticles.com/?expert=Carla_Ramos_Loteria