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
Tuesday, July 27, 2010
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
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
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
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
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
Subscribe to:
Posts
(
Atom
)