Tuesday, July 27, 2010

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:

<html>

<head>

<title>My Page</title>

<style>

A

{

font-family: Verdana;

font-size:8pt;

color:black;

text-decoration:none

}

</style>

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:

<html>

<head>

<title>My Page</title>

<link href="myStyle.css" rel="stylesheet" type="text/css">

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.

Avoiding standard HTML commands like:

<font color="#0000ff"><font size=2>Product</font></font></font>

will help us to reduce file size, but that is not the only benefit. Using CSS word product in this example will be moved more close on the top of the document. Search engine will pick up more content and less code.

Imagine that you have 3 columns table on your page. When you see the code, you will notice that first come code for your table, and after that it come your content. Positioning your 3 columns using CSS instead of standard inline elements:

<table width="90%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="381" height="150" valign="top" bgcolor="FFEDD4">

My Product

</td>

<td height="150" valign="top" bgcolor="FFEDD4">

When CSS is used, your code might look like this:

<div id="leftcontent">

My Product

</div>

Again your code is much more clear, and your content is moved on the top of your document, making your HTML page search engine friendly, and reducing your file size.

Content is one of the most important factors in Search Engine Optimization, and you will benefit with removing the unnecessary code in your HTML and create search engine friendly web page.

Validate it

Browser war is far behind us. Reality is that most of the people today use Internet Explorer, but you should try to be on safe side and ensure that your CSS code is valid. Not all browsers interpret the CSS on same way. You can validate your CSS here: http://jigsaw.w3.org/css-validator/

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

Friday, July 23, 2010

7 CSS Layout Tips

The most difficult thing in CSS to get right is the layout of your site. Here are a couple of tips dealing just with that. Some of these tips are not exactly new, or rocket science, but hopefully they will save someone a bit of bother somewhere!

Tip 1 : Clear out the default padding and margin settings before you start working.

Different browsers have different default margin and padding sizes so you want to start with a clean slate, so to speak. Use this command:

*

{

margin: 0;

padding: 0;

border: 0;

}

to clear all default margin and padding settings. Also note the border, which is set to 0. Please note that if you do this, you will also get rid of the pesky purple border round click-able images, although some people argue that the purple border is necessary for accessibility and usability. But lots of people do not like the purple border round images, and this is one way that you can get rid of it in one fell swoop without having to set img border=0 for each image (which is against the strict markup rules in any case).

Tip 2 : To center your layout, use a container div to contain all your content

Declare it as follows:

#container

{

margin: 0 auto;

width: xxxpx;

}

There are a couple of points here to take note of. DO NOT declare the width to be 100%. This defeats the whole object since you will just have to declare the sub elements within the container and then center THEM using margin : 0 auto. This is VERY BAD since it means that instead of declaring the central layout once, you will have to declare it in multiple places for each element within your container.

Tip 3: Work from the top down

Literally start working on your CSS layout starting from the top most elements in your design, as well as the 'top' elements in your HTML, such as the body, as well as your main containers.

Declare your CSS commands on the highest level possible and try and declare something once only and let it cascade throughout. Only override the commands at a lower level when strictly necessary. This prevents a verbose CSS file that is difficult to maintain and understand. For example, if you have { margin : 0 auto} settings on each and every sub div within your container - you are in trouble.

Tip 4 : Document what you are doing and use Firebug and the Firefox browser to debug

You are not writing your CSS code just for yourself, some day some poor sod will have to debug it. Make numerous comments inside your CSS file to explain why you are doing things in a specific way.

Fitting in with this, you might find yourself having to fix someone else's CSS more often than you think (or even your own, for that matter). Use the Firebug add-on for Firefox to debug your CSS. This is a life-saver with regards to giving you an insight into exactly where your design might be broken and why.

The only problem with this is that your design might work perfectly in Firefox, but not in IE5, IE6 or IE7. This brings us to the next tip.

Tip 5 : Decide which browsers you are going to build your CSS for and test from the start

Some purists insist on making sure that your website work for all possible browsers, others only make it work for the 'major' browsers. How do you know exactly which browsers are used the most? Once again W3 Schools come to the rescue.

On the following page, you can see which browsers are the most popular: http://www.w3schools.com/browsers/browsers_stats.asp. From this page you can see that something like IE5 is only used by about 1.1% of browsers. It is up to you whether you consider it worthwhile to build your CSS to be compatible with this browser, or whether you are just going to test your compatibility with IE6, IE7 and Firefox, for example. Whatever you do, when you start building your CSS, start from the top, and test each and every setting in each of the browsers as you go along. There is nothing worse than building a perfect website in Firefox, then finding out right after you have coded a 1000 line css file that it is broken in IE6. To then debug and fix your code after the fact is a nightmare.

Tip 6 : Here is an embarrassing little tip for fixing your CSS in IE6 or IE7

Let's say your design works perfectly in Firefox, but is broken in IE6. You cannot use Firebug to determine where the problem might be since it WORKS in Firefox. You do not have the luxury of using Firebug in IE6, so how do you debug an IE6 or IE7 stylesheet? I often found that it helps to add {border : 1 px solid red} or {border : 1 px solid purple} to the problematic elements. This way you can often see why certain elements do not fit into the space available. It is an embarrassing little tip since it is so primitive and simple, but it works!

Tip 7 : Understand floats

Floating of elements is essential to understand, especially in the context of getting your floated elements to work in the different browsers!

Basically elements such as divs are floated to the left or the right (never to the top or the bottom, only sideways). Here are a couple of things to take into consideration with floated elements. Each floated element must have an explicit width specified. If you are making use of floated divs to create a 3 column or a 2 column layout, rather specify the widths in terms of percentages rather than fixed widths, and if you do use percentages, make sure that the percentages do not add up to 100%, this will often cause the right most column to drop below the rest, clearly indicating that you are trying to fit something into the available space that is too wide for it. Rather use percentages that add up to slightly below 100%, such as 25%, 49%, 24% for a left column, middle column and right column.

Floating elements can be extremely complex to understand and it is worth while to spend some time on good sites that provide specific guidelines and tips, such as the Position Is Everything website.

Conclusion

These CSS tips for layout should hopefully save you some time and effort when you next have to panel-beat a table-less design into submission!

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

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

Thursday, July 15, 2010

CSS Interview Questions and Answers

How do I place text over an image?
To place text or image over an image you use the position property. The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.

<div style="position: relative; width: 200px; height: 100px">
<div style="position: absolute; top: 0; left: 0; width: 200px">
<image>
</div>
<div style="position: absolute; top: 20%; left: 20%; width: 200px">
Text that nicely wraps
</div>
</div>

what CSS is, why not start coding?

CSS is sort of like scripting language made for the web. In contrary with HTML, DHTML, JavaScript, VBScript and many others. CSS is strictly for formatting your web-page and now many new browser support it. (NOTE: Older browser do not support CSS, so please check your browser version and make sure whether it supports it or not. You may have to update your current Browser.)

The way the code goes into your Web-page is through a variety of ways. The way CSS works is that is the code is set between the<head></head> tags. You can put the CSS code after </title> which is what most people do. Now, here are the following ways of making your webpage with CSS enabled features:

1.) Writing your CSS code within your HTML source code. This is how it would look like:

<html><head><title>My First CSS!</title>
<!-- Now begin the CSS coding! -->
<STYLE TYPE = "text/css">
<!--
body {
background-color: #eeeee;
}
p {
text-align: left;
color: black;
font: Verdana;
font-size: 80%;
}
a {
text-decoration: none;
color: black;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: red;
font-weight: bold;
}
-->
</STYLE>
<!-- End CSS code -->
</head><body></body></html>

2.) Linking to your CSS file. This tells the webpage to find the .css file and use it as the CSS code. Here is the code that would allow you to do:

<html><head><title>CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head><body /></html>

As you can see from the code above, the <link> tag is pretty helpful. What it does is that it links to the style.css file which has all the css code. Just like embedding an image throught he <img> tag.

Now to explain a bit from the first example. CSS code isn't very hard to understand.Take for example the body { ..} part. What it does is that it formats how the <body> tag in HTML would work. That is a very simple way of formatting the body tag with the CSS. To help you understand better, here is a simple syntax for CSS:

selector { property1: value1; property2: value2;}

The "selector" sort of relates to the html tags used for outputting etc...

We all know that <a> is a tag used for links. You will see in the example about a:hover and a itself. <br>What a does it just sets the characteristics of the format. You can set how you want a link to appear using the font size, weight etc..

Then comes the "a:hover". What does is also pretty self explanatory. It acts on when a person moves the mouse cursor over the links.

ADVANCED CSS FEATURES:

CSS can be even used to change the appearance of the scroll bar at your right side. Unfortunately, that only works with IE. You have to be using IE in order for this to work. Here is how to change some appearances of your scroll bar:

The CSS statements for doing this are:
1) scrollbar-3dlight-color
2)scrollbar-arrow-color
3) scrollbar-base-color
4) scrollbar-dark shadow-color
5) scrollbar-face-color
6) scrollbar-highlight-color
7) scrollbar-shadow-color
8) scrollbar-track-color

<style type="text/css">
<!--
BODY {
scrollbar-arrow-color: green;
scrollbar-face-color: #FFFFFF;
scrollbar-track-color: rgb(12,35,244);
}
// -->
</style>

How to customize your textboxes.
Here is the code on how to do it:

<style type="text/css">
<!--
BODY {
scrollbar-arrow-color: green;
scrollbar-face-color: #FFFFFF;
scrollbar-track-color: rgb(12,35,244);
}
TEXTAREA {
scrollbar-arrow-color: green;
scrollbar-face-color: #FFFFFF;
scrollbar-track-color: rgb(12,35,244);
}
// -->
</style>

That above code, has some similarities. The textbox area is treated with the same function statements as for the scrollbar. The scrollbar statements goes in the BODY selector.

Why does my content shift to the left on some pages (in FF)?
That'll be the pages with more content? The ones that have a vertical scrollbar? If you look in IE there's probably a white space on the right where there would be a scrollbar if there were enough content to require one. In Firefox, the scrollbar appears when it's needed and the viewport becomes about 20px smaller, so the content seems to shift to the left when you move from a page with little content to one with lots of content. It's not a bug or something that needs to be fixed, but it does confuse and irritate some developers.

If, for some reason, you'd like Firefox to always have scrollbars - whether they're needed or not - you can do this :

CSS html {
height:100.1%;
}

Source : http://www.techpreparation.com/computer-interview-questions/css-interview-questions-answers4.htm

Wednesday, July 14, 2010

CSS Interview Questions and Answers

Why do style sheets exist?

SGML (of which HTML is a derivative) was meant to be a device-independent method for conveying a document's structural and semantic content (its meaning.) It was never meant to convey physical formatting information. HTML has crossed this line and now contains many elements and attributes which specify visual style and formatting information. One of the main reasons for style sheets is to stop the creation of new HTML physical formatting constructs and once again separate style information from document content.

What are the advantages/disadvantages of the various style methods?


External Style Sheets
Advantages

* Can control styles for multiple documents at once
* Classes can be created for use on multiple HTML element types in many documents
* Selector and grouping methods can be used to apply styles under complex contexts

Disadvantages

* An extra download is required to import style information for each document
* The rendering of the document may be delayed until the external style sheet is loaded
* Becomes slightly unwieldy for small quantities of style definitions

Embedded Style Sheets
Advantages

* Classes can be created for use on multiple tag types in the document
* Selector and grouping methods can be used to apply styles under complex contexts
* No additional downloads necessary to receive style information

Disadvantages

* This method can not control styles for multiple documents at once

Inline Styles
Advantages

* Useful for small quantities of style definitions
* Can override other style specification methods at the local level so only exceptions need to be listed in conjunction with other style methods

Disadvantages

* Does not distance style information from content (a main goal of SGML/HTML)
* Can not control styles for multiple documents at once
* Author can not create or control classes of elements to control multiple element types within the document
* Selector grouping methods can not be used to create complex element addressing scenarios

What is inline style? How to link?

Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurrence.

<P STYLE="text-indent: 10pt">Indented paragraph</P>

What is imported Style Sheet? How to link?

Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows creating one main sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to specific elements (or documents) that may require additional styling. By importing partial sheets to the main sheet a number of sources can be combined into one.
To import a style sheet or style sheets include the @import notation or notations in the STYLE element. The @import notations must come before any other declaration. If more than one sheet is imported they will cascade in order they are imported - the last imported sheet will override the next last; the next last will override the second last, and so on. If the imported style is in conflict with the rules declared in the main sheet then it will be overridden.

<LINK REL=STYLESHEET HREF="main.css" TYPE="text/css">
<STYLE TYPE="text=css">
<!--
@import url(http://www.and.so.on.partial1.css);
@import url(http://www.and.so.on.partial2.css);
.... other statements
-->
</STYLE>

What is a Style Sheet?

Style sheets are the way that standards-compliant Web designers define the layout, look-and-feel, and design of their pages. They are called Cascading Style Sheets or CSS. With style sheets, a designer can define many aspects of a Web page:

* fonts
* colors
* layout
* positioning
* imagery
* accessibility

Style sheets give you a lot of power to define how your pages will look. And another great thing about them is that style sheets make it really easy to update your pages when you want to make a new design. Simply load in a new style sheet onto your pages and you're done.

What is alternate Style Sheet? How to link?

Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as persistent and/or preferred .
Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of an alternate style, e.g.:

<LINK REL=Stylesheet HREF="style.css" TYPE="text/css">

Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute to the LINK element. There can only be one preferred style, e.g.:

<LINK REL=Stylesheet HREF="style2.css" TYPE="text/css" TITLE="appropriate style description">

Alternate style gives an user the choice of selecting an alternative style - a very convenient way of specifying a media dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.:

<LINK REL="Alternate Stylesheet" HREF="style3.css" TYPE="text/css" TITLE="appropriate style description" MEDIA=screen>
<LINK REL="Alternate Stylesheet" HREF="style4.css" TYPE="text/css" TITLE="appropriate style description" MEDIA=print>

Alternate stylesheet are not yet supported.

How can you set a minimum width for IE?

To set a minimum width, the CSS property is 'min-width'. This can be very useful and works well in good browsers. IE doesn't understand 'min-width'. However, it has a proprietary property called 'expression' which allows us to feed it javascript via a stylesheet. Below is how to set a (780px) minimum width for IE...


<!--[if gte IE 5]> <style type="text/css">
body {
width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? "780px" : "auto") : "780px") : "auto" );
}
</style>
<![endif]-->

As the property is non-standard, it won't validate with the W3C validator, so if we put it in the head like this (above) - in an IE conditional comment - the validator will ignore it and the page will get a clean bill of health.

Which browsers support CSS?

It depends on your definition of "support." If you are interested in those browsers which makes some attempt at supporting CSS, no matter how partial or bug-ridden, then the list is:

* Internet Explorer 3.0 and above
* Navigator 4.0 and above
* Opera 3.6 and above
* Konqueror
* Arena
* Emacs-w3
* Amaya
* Lexicon
* XPublish by Media Design in·Progress

If instead you're interested in those browsers which are known to do a credible job of bug-free and mostly completel support for CSS1, then the list narrows somewhat dramatically:

* Internet Explorer 5.0 for Macintosh and above
* Internet Exporer 5.5 for Windows and above
* Netscape Navigator 6.0 and above
* Opera 4.0 and above

While none of these browser can be claimed to have a perfect implementation of CSS1, they are all quite good and can be relied upon to operate in a consistent fashion for most of CSS1.

Tuesday, July 13, 2010

CSS Interview Questions and Answers

What is CSS?

1. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurrence of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size.

2. CSS is a web standard that describes style for XML/HTML documents.

3. CSS is a language that adds style (colors, images, borders, margins…) to your site. It’s really that simple. CSS is not used to put any content on your site, it’s just there to take the content you have and make it pretty. First thing you do is link a CSS-file to your HTML document. Do this by adding this line:

<link rel="stylesheet" href="style.css" type="text/css">

The line should be placed in between your <head> and </head> tags. If you have several pages you could add the exact same line to all of them and they will all use the same stylesheet, but more about that later. Let’s look inside the file “style.css” we just linked to.

h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Red;
font-weight: bold;
}
#footer {
background-color: Gray;
}

4. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. This is also where information meets the artistic abilities of a web-designer. CSS helps you spice up your web-page and make it look neat in wide variety of aspects.

What are Cascading Style Sheets?
A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can assign various rendering properties to HTML elements. Style rules can be specified for a single element occurrence, multiple elements, an entire document, or even multiple documents at once. It is possible to specify many different rules for an element in different locations using different methods. All these rules are collected and merged (known as a "cascading" of styles) when the document is rendered to form a single style rule for each element.

How do I center block-elements with CSS1?
There are two ways of centering block level elements:

1. By setting the properties margin-left and margin-right to auto and width to some explicit value:

BODY {width: 30em; background: cyan;}
P {width: 22em; margin-left: auto; margin-right: auto}

In this case, the left and right margins will each be four ems wide, since they equally split up the eight ems left over from (30em - 22em). Note that it was not necessary to set an explicit width for the BODY element; it was done here to keep the math clean.

Another example:

TABLE {margin-left: auto; margin-right: auto; width: 400px;}
In most legacy browsers, a table's width is by default determined by its content. In CSS-conformant browsers, the complete width of any element (including tables) defaults to the full width of its parent element's content area. As browser become more conformant, authors will need to be aware of the potential impact on their designs.

If background and color should always be set together, why do they exist as separate properties?
There are several reasons for this. First, style sheets become more legible -- both for humans and machines. The background property is already the most complex property in CSS1 and combining it with color would make it even more complex. Second, color inherits, but background doesn't and this would be a source of confusion.

What is class?
Class is a group of 1) instances of the same element to which an unique style can be attached or 2) instances of different elements to which the same style can be attached.

1) The rule P {color: red} will display red text in all paragraphs. By classifying the selector P different style can be attached to each class allowing the display of some paragraphs in one style and some other paragraphs in another style.
2) A class can also be specified without associating a specific element to it and then attached to any element which is to be styled in accordance with it's declaration. All elements to which a specific class is attached will have the same style.

To classify an element add a period to the selector followed by an unique name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters). (Note: text between /* and */ are my comments).

CSS
P.name1 {color: red} /* one class of P selector */
P.name2 {color: blue} /* another class of P selector */
.name3 {color: green} /* can be attached to any element */

HTML
<P class=name1>This paragraph will be red</P>
<P class=name2>This paragraph will be blue</P>
<P class=name3>This paragraph will be green</P>
<LI class=name3>This list item will be green</LI>

It is a good practice to name classes according to their function than their appearance; e.g. P.fotnote and not P.green. In CSS1 only one class can be attached to a selector. CSS2 allows attaching more classes, e.g.:
P.name1.name2.name3 {declaration} <P class="name1 name2 name2">This paragraph has three classes attached</P>

What is grouping ?
Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).

1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}

To reduce the size of style sheets and also save some typing time they can all be grouped in one list.
LI, P.first, .footnote {font-style: italic}

2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}

What is external Style Sheet? How to link?
External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css. <HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>

Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}
div.myClass { ... }

If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.

Three selectors: h1, .warning and #footer, what they do ?
An element points at a HTML-tag somewhere on your page. In the example above we want to style the <h1>-tag. Note that using an element like that affects all tags with that name, so using p { margin-left: 100px; } gives all <p>-tags a left-margin.
Using a class is just as simple. When writing .your_class you style all tags with a class with the name “your_class”. In the example above we have .warning which will style e.g. <div class="warning"> and <em class="warning">, that is, any element with the class warning. Classes are used when you want to style just a few of your tags in a way, perhaps you want some of your links red? Add a class to all those links.
You need one more building block: the id. This time you style an element with the attribute “id” set to the id you have chosen. Ids work exactly like classes except for one thing; you can only have one id with a certain name in each of your HTML documents. In the example above we style <div id="footer">. If you look at the example it does make sense: a HTML document may contain several warnings but only one footer. Ids should be used when you want to style just one specific tag.
Using those three building blocks will take you far but when you get to more advanced layouts you might want to combine the building blocks into more advanced selectors. Just to give you two examples of what you can do: em.warning to style only those <em>-tags with the class .warning set. You can also use #footer a to style only the links that are nested inside the tag with id “footer.
Each of the selectors has a set of declarations tied to them. Each declaration has a property, describing what we want to change and a value, what we should change it to. An example: a { color: Blue; font-size: 3em; }. You have the selector a there, so all links in your document will be styled. We have two declarations: color: Blue and font-size: 3em;. Lastly each declaration consists of two parts: the property color and the value Blue.
there is a LOT of things you can style and play with. Additionally (close to) all tags are equal in CSS, so you can set e.g. borders and colors of any element just like you could with a table if you used only HTML.

What are Style Sheets?
Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).

What is CSS rule 'ruleset'?
There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} - CSS rule (ruleset)
{text-indent: 10pt} - CSS declaration
text-indent - CSS property
10pt - CSS value

'Fixed' Background?
There is the possibility to use the HTML tag bgproperties="fixed", but that is IE proprietary, and dependent upon the 'background' attribute (deprecated in HTML4).

With CSS, you can declare the background like:

BODY {
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/yourimage.gif);
background-repeat: no-repeat; /*no-tiling background*/
background-position: center;
background-attachment: fixed;
background-color: #hexcolor;
color : #hexcolor;
margin: 10px;
}

that shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating - in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls ...

What is embedded style? How to link?
Embedded style is the style attached to one specific document. The style information is specified as a content of the STYLE element inside the HEAD element and will apply to the entire document.

<HEAD>
<STYLE TYPE="text/css">
<!--
P {text-indent: 10pt}
-->
</STYLE>
</HEAD>

Note: The styling rules are written as a HTML comment, that is, between <!-- and --> to hide the content in browsers without CSS support which would otherwise be displayed.

What is ID selector?
ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit.

#abc123 {color: red; background: black}

<P ID=abc123>This and only this element can be identified as abc123 </P>

What is contextual selector?
Contextual selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, a search pattern, where only the last element in the pattern is addressed providing it matches the specified context.

TD P CODE {color: red}

The element CODE will be displayed in red but only if it occurs in the context of the element P which must occur in the context of the element TD.

TD P CODE, H1 EM {color: red}

The element CODE will be displayed in red as described above AND the element EM will also be red but only if it occurs in the context of H1

P .footnote {color: red}

Any element with CLASS footnote will be red but only if it occurs in the context of P

P .footnote [lang]{color: red}

Any element with attribute LANG will be red but only if it is classed as "footnote" and occurs in the context of P

How do I have a background image that isn't tiled?
Specify the background-repeat property as no-repeat. You can also use the background property as a shortcut for specifying multiple background-* properties at once. Here's an example:

BODY {background: #FFF url(watermark.jpg) no-repeat;}

What does \ABCD (and \ABCDE) mean?
CSS allows Unicode characters to be entered by number. For example, if a CLASS value in some Russian document contains Cyrillic letters EL PE (Unicode numbers 041B and 041F) and you want to write a style rule for that class, you can put that letter into the style sheet by writing:

.\041B\041F {font-style: italic;}
This works on all keyboards, so you don't need a Cyrillic keyboard to write CLASS names in Russian or another language that uses that script.

The digits and letters after the backslash (\) are a hexadecimal number. Hexadecimal numbers are made from ordinary digits and the letters A to F (or a to f). Unicode numbers consist of four such digits.

If the number starts with a 0, you may omit it. The above could also be written as:

.\41B\41F {font-style: italic;}
But be careful if the next letter after the three digits is also a digit or a letter a to f! This is OK: .\41B-\41F, since the dash (-) cannot be mistaken for a hexadecimal digit, but .\41B9\41F is only two letters, not three.

Four digits is the maximum, however, so if you write:
.\041B9\041F {font-style: italic;}

Source : http://www.techpreparation.com/css-interview-questions-answers1.htm

Sunday, July 11, 2010

How to Create and Validate Your Own HTML and CSS

When I write an article--or any web page, for that matter--I like to begin with basic HTML, XHTML, and CSS documents I know contain valid code. After reading this tutorial, you will be able to use this approach, too.

There are two types of basic, standards-based documents that I use to write web pages. The first has a Document Type Definition(DTD) of XHTML 1.0 Transitional, just like WordPress uses. The second is a basic HTML document with a Document Type Definition(DTD) of HTML 4.01 Transitional. These definitions tell the browser which specification the document uses. For example, the DTD would be used to tell a browser if the document was HTML or XHTML. The DTD is the first line of code in a web page.

The syntax rules for HTML and XHTML are different in some ways. You must use the correct syntax for the DTD you use or your code will not pass at W3C.This is so even though the browser you use might display your page as expected: browsers are very forgiving with respect to non-standard code.

For the content on my web site, I use the HTML 4.01 Transitional DTD because I am comfortable with its syntax.

The best way to insure that you are starting with a standards-based web page is to first copy a known good skeletal web page and paste it into a basic text editor. Next, save the code as a text file with the ".txt" extension. You could name the file, my-html-template.txt.

You can also paste the code into the W3C Markup Validation Service to check that it is up to snuff: if the code passes the validator "in the green," you know your code is good. Simple skeletal web pages, can be found at W3 Schools. Other code, such as the DTD for HTML and XHTML, can also be found there.

It is very common to find that online web pages fail W3C validation with a massive number of errors. Sometimes this is because the wrong DTD is specified for a page; at other times, the failure is due to using non-standard or deprecated code. If you start with a valid, basic template and correct any validation errors that show up, your pages will always be "in the green" when they are published to the Web.

Once you have a valid basic template, you can begin to add your content between the body tags and extra code between the head tags.

Normally, I do not use hard carriage returns inside a paragraph. The editors I use all have a "word wrap" feature that enables me to see all the text I write without having to use the horizontal scroll bar. The actual line length of the published content will be determined later when the page display is styled.

I do use a hard carriage return after the last sentence of a paragraph and add an extra one between paragraphs. Hard returns can also be added for extra space between other elements, such as image code.

If you have added content to the my-html-template.txt file, save it again with a ".html" file extension. You can then open it in a browser. What you will see is that all of the content runs together. That is because browsers look for line break tags and not carriage returns. You can fix this by doing a find and replace with your editor: just find every carriage return and replace it with a break tag. When you open the HTML document again, the various parts of the content will be neat and tidy but not very pretty. CSS styling will fix this.

If you are just "dropping" the content between the body tags into a visual editor on the web, such as a WordPress editor or the article content box at EzineArticles, you don't have to worry about the line breaks as they will be added to the HTML code for you.

Copy and paste the CSS code below into your text editor. Save it as "my-template. css" in the same folder in which you saved your HTML template file.

body

{

background: #fffef2;

color: black;

line-height: normal;

margin: 3% 25% 3% 25%;

min-width: 400px;

}

The link meta tag associates a CSS file with the HTML document. Copy and paste the link tag shown below between the head tags in the my-html-template.txt file you saved. Replace the bracket characters with "", respectively.

[link title="Template Style Sheet" rel="stylesheet" href="my-template.css"type="text/css"]

If you have added some content to your my-html-template.txt file, when you now open the file in a browser, you will begin to see some pretty nice formatting. The page content is now centered in about the middle half of the page, there is a nice background color, and the text is Verdana. This is all due to the specifications in the CSS code for "body."The "body" code determines the overall appearance of the page.

You can also validate your CSS code. W3C has a CSS code validator. Just copy the CSS code and paste it in the validator's text box and click the "Check" button. You will find that the code above passes "in the green," as it should.

In order to apply display formatting, the content to receive the formatting must be identified. Content can be bracketed with HTML tags which contain names that reference styling definitions in the CSS file. Examples of these tags are "div" and "span". When a browser encounters an HTML tag and finds a name reference, it looks in the CSS file for the styling and then applies the styling to the web page display. If there is no styling referenced in the HTML tags the browser will use its defaults for the display.

W3 Schools has comprehensive information and tutorials about CSS.

Building your own (X)HTML and CSS templates--and then putting them through the W3C validators--is a great way to insure that your web pages will always be standards-based. You don't need an expensive web-development software package to develop your templates; you can use a basic text editor. Use the text editor to build the web page structure and add the content. Use CSS to style the display of the content. If you are publishing your content online, you will probably be able to drop the content from your text file (between the body tags) right into the editors text box without any changes. If you want to view your document in a browser as you create it, you might have to add break tags between content elements and then save the file with a ".html" extension. If you validate your web pages as you create them, you can always be sure that when they are published online, they will validate "in the green."

An extended HTML version of this article, including lots of HTML and CSS code, can be found at www.selectdigitals.com
Please feel free to visit my WordPress Blog at
www.blog.selectdigitals.com
for additional (X)HTML and CSS tips and tricks.

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

Thursday, July 8, 2010

Advantages of CSS

What is CSS and why is it useful?

CSS stands for "cascading style sheets". A single CSS file can contain positioning, layout , font, colors and style information for an entire web site. The file can be referenced by each html file on the site.

CSS is a means of separating the content of an html document from the style and layout of that document. It's useful to be able to do this for a number of reasons:

Making changes to the layout

CSS makes it very easy to change the style of a document. Let's say we wanted to move the picture in the title of this page to the right by 10 pixels. This would be a nightmare in a table based design. We would have to open every page and alter the table width manually.

Fortunately we have used CSS, and all we have to do is open our CSS file which stores the layout of the site, and change the number relating to the position of the image. That will change his position throughout the whole site.

The look and layout of a site can be changed beyond recognition just by altering the CSS file. This makes CSS indispensable for large web sites.

File Size

Probably the mostly useful feature of CSS is that all of the style and layout is removed from the html, so the html page size is very much smaller. The CSS file is downloaded just once by the visitor's browser and re-used for different pages on a web site. This reduces the bandwidth requirements for your server and also ensures a faster download for your visitors.

Search Engines

A search engine robot will normally consider the content in the start of your html code is more important than the text towards the end of the code. For a table based page the contents of the navigation bar will normally show up as the page description in search engine results. With a CSS page the navigation can be moved to the bottom of the source code, so the search engine displays your content instead of your navigation.

Accessibility

Separating style from content makes life very easy for visitors who prefer to view only the content of a web page, or to modify the content. These could be blind or partially sighted people who might use a screen reader to interpret a page.

Consistency

Layout and position of navigation can be completely consistent across a site. This was previously possible only using frames.

Disadvantages of CSS

CSS does not work consistently in different browsers. Microsoft Internet Explorer and Opera support CSS in a pretty logical way. Unfortunately their logic does not conform to current CSS standards.

Netscape and Firefox conform more closely to the standards, so a site could look quite different on Internet Explorer from the way it looks in Firefox. This discrepancy restricts the CSS features that can be used on a site - because Firefox is becoming more and more popular the site must be designed for both Firefox and Internet Explorer.

Dreamweaver MX design view has it's own set of limitations (although I'm told Dreamweaver 2004 is an improvement).

CSS doesn't work at all in very early versions of Internet Explorer and Netscape. These browsers will display your page as plain html. This is not necessarily a problem - a quick look at our logs suggest that less than 0.1% of visitors are using browsers that are incompatible with CSS, and they will still be able to use our pages, just without the layout.

Article Source : http://www.vordweb.co.uk/css/advantages-of-css.htm

Wednesday, July 7, 2010

Tuesday, July 6, 2010

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

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

Sunday, July 4, 2010

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

Why a CSS Website Layout Will Make You Money

Although CSS layouts have been around for years, they haven't become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) - nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at http://www.thecounter.com/stats/2004/August/browser.php).

So, why should you convert your website from its current table-based layout to a CSS layout? It'll make you money. Simple really. And here's four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It's not unusual to see reductions of 50% or more in file size when switching from CSS to tables. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

The main reason for this dramatic decrease in file size is that presentation information is placed in the external CSS document, called up once when the homepage loads up and then cached (stored) on to the user's computer. Table layouts on the other hand, place all presentation information inside each HTML, which is then called up and downloaded for every page on the site.

Additionally, CSS can be used to replace JavaScript image rollovers, again allowing a large reduction in overall page size. See the article, CSS navigation menu for more on this (http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml).

A higher search engine ranking

A CSS-based website will appear higher in the search engine rankings for three reasons:

- The code is cleaner and therefore more accessible to search engines

- Important content can be placed at the top of the HTML document

- There is a greater density of content compared to coding

A higher search engine ranking means more site visitors, which, provided your website is usable, should lead to an increase in enquiries or sales.

Faster download speed

A faster download speed will make you money? Well, yes. Slow download speed is often cited as one of the biggest usability complaints for websites. A faster download speed therefore leads to increased usability, and a web usability redesign can increase the sales/conversion rate by 100% (source: http://www.useit.com/alertbox/20030107.html).

CSS downloads faster than tables because:

- Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content

- Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered

- Tables encourage the use of spacer images to aid with positioning

- CSS generally requires less code than cumbersome tables

- All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads

- With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it

Increase in reach

The more people you can reach, the more visitors you'll get to your site and the more enquiries or sales you should get. A CSS-based website is compatible with PDAs, mobile phones, in-car browsers and WebTV. Don't underestimate the importance of this: In 2008 alone an estimated 58 million PDAs will be sold (source: http://www.etforecasts.com/pr/pr0603.htm) and one third of the world's population will own a wireless device (source: [http://www.clickz.com/stats/markets/wireless/article.php/10094_950001]).

You can make an additional CSS document specifically for handheld devices, which will be called up in place of the regular CSS document, thereby ensuring your website is accessible to this lucrative market. This isn't possible with a tabular layout.

Conclusion: Switch to CSS!

Switching your website from a table layout to a CSS layout can be a long, arduous process, especially for large websites. Given the money making possibilities though, it could very well prove to be well worth it.

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

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 ndeavor 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 ayout 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 nderlined.

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


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