Basic Tips for SEO

  1. Use Correct Doctype
  2. Use Semantic code while htmlizing your website.
  3. Use Meta Content and Meta Keywords
  4. Use unique page titles
  5. Use SEO friendly page name or URL
  6. Use Alt tags for Images
  7. Use Heading Tags (e.g. H1, H2)
  8. Use Valid HTML and CSS Code (Make your code W3C Standard)
  9. Use Div based coding and avoid using Tables
  10. Make a Detailed Sitemap
  11. Use Breadcrumb
  12. Use Footer links
  13. Use Optimized images and code to make your web site load fast
  14. Use External JavaScript and CSS files
  15. Use a meaningful and helpful 404 error page

Best CSS Directories or Galleries

www.cssbeauty.com
www.cssdrive.com
www.stylegala.com
www.cssmania.com
www.cssremix.com
www.cssvault.com
www.bestwebgallery.com
www.csselite.com
www.screenalicious.com
www.unmatchedstyle.com
www.designlinkdatabase.net
www.screenfluent.com
www.designsnack.com
www.cssheaven.com
www.cssimport.com
www.cssglobe.com
www.cssreboot.com
www.mostinspired.com
www.thebestdesigns.com
www.cssbloom.com
www.csscollection.com
www.csstux.com
www.cssbased.com
www.css-website.com
www.designshack.co.uk
www.ceeses.com
www.cssclip.com
www.my3w.org
www.csshazard.com
www.artnetz.de
www.css-design-yorkshire.com
www.css11.com
www.cssimpress.com
www.e-motionaldesign.com
www.cssprincess.com
www.cssgaleri.com
www.cssblast.ru
www.creative-pakistan.com
www.netzfruehling.de
www.najdizajn.com
www.edustyle.net
www.csssmoothoperator.com
www.coolsitecollection.com
www.cssgalaxy.com
www.per.fectio.net
www.cssflavor.com
www.onepixelarmy.com
www.piepmatzel.de
www.cssbrain.hu
www.w3c-compliance.com
www.stylegrind.com
www.submitcss.com
www.cssgallery.ro
www.cssgreen.com
www.csszengarden.com
www.webcreme.com
www.prowebart.net
www.designexpanse.com
www.csssnap.com
www.menthe-fresh.fr
www.csscoosite.com
www.csscool.cn
www.csstown.com
www.cssleak.com
www.divinecss.com
www.cssloggia.com
www.cssstyle.me
www.cssperk.com
www.cssgallery.com
www.cssshowcases.com
www.cssglance.com
www.cssmix.nl
www.css-design.fr
www.designawardsgallery.com
www.addesignlink.com
www.cssfreshblend.com
www.cssenvy.com
www.nicestylesheet.com
www.wowcss.com
www.css-imagine.com
www.cssfights.com
www.cssluxury.com
www.cssdepot.com
www.csswebsites.nl
www.cssarts.com
www.csscutie.com
www.cssdance.com
www.csskid.com
www.cssbay.com
www.wooki.es
www.beautiful2.com
www.swellcss.com
www.noonewebdesign.com
www.cssvote.com
www.pixelcss.es

You can also submit your site to 150+ CSS Directories to showcase. Here are the two sites who does this job for you.
1. Easy CSS Gallery Listhttp://www.thecssgallerylist.com
2. CSS Galleries Submission Helperhttp://www.meecss.com

CSS Tooltips

No need of javascript to make tooltips. I got this simple css trick to make it.

CSS Code

a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}

a.mytooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:200px;
}

a.mytooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}

HTML Code

<a href=”#” class=”mytooltip”>Vikas Khera<span>https://vikaskhera.wordpress.com</span></a&gt;

CSS Tips & Tricks

Here is a list of CSS tips & tricks that will make your coding so much easier.

Sequence of the links is very important

a:link { color: #000; text-decoration: none; }
a:visited { color: #666; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
a:active { color: #333; text-decoration: underline; }

Use future proof CSS hacks method
<!–[If IE 5]>
ie 5
<![endif]– >

<!–[If lte 6] >
ie 6 and lower
<![endif]–>

<!–[If gte 7] >
ie 7 or higher
<![endif]– >

Use group selector
h1, h2, h3, h4, h5, h6 {
font-family:verdana;
margin:0;
padding:0;
}

Cross Browser CSS Transparency Setting
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

PNG Fix for IE6
.png_ie_hack {
background-image: url(../images/pngimage.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/pngimage.png’);
}

Remove links or textbox hightlight border
a, input { outline:none; }

Hidden text for search engine
a { text-indent:-999em; outline:none; background: url(image.jpg) no-repeat 0 0; width:100px; height:50px; display:block; }

Click here for more details on CSS Optimization.

Optimize your stylesheet

If your website uses large stylesheets, optimizing the CSS code can help your code to load and render faster. CSS shortcuts shortern the cascading stylesheets rules into one efficient line of code.

Fonts

.MyClass
{
font-weight: normal;
font-size: 14px;
line-height: 12px;
font-family: arial, verdana;
}

You can simply use:

.MyClass
{
font: normal 14px/12px arial, verdana;
}

Background Images

#MyID
{
background-image:url(images/Vikas.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#r1f1f1;
}

Can be shortened to:

#MyID
{
background: #f1f1f1 url(images/Vikas.gif) repeat-x top;
}

Borders

.MyClass
{
border-width: 1px;
border-color: #e0e0e0;
border-style: solid;
}

Shortcut:
.MyClass
{
border: 1px solid #e0e0e0;
}

Margins/Padding

#MyID
{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}

Use a single line of code, like this:

padding: top right bottom left;

#MyID
{
padding: 10px 5px 20px 5px;
}

The margin or padding shortcut can be be shortened further.

margin: top right bottom left;
margin: 10px 20px 10px 20px;

Can be shortened to:

margin: top/bottom right/left;
margin:10px 20px;

You can even take this one step further.

margin: top/bottom/right/left;
margin:10px;

If you do not want any margins or padding with a web object, you can set all of the values to zero.

margin: 0;
padding: 0;

Color

color: #000000;

shortcut:
color: #000

color: #FFCC00;

shortcut:
color: #FC0;

Web 2.0 Design Guide

The list below is a summary of many of the common features being used on “Web 2.0” sites.

Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t mean your site will look Web 2.0.

  1. Simplicity
  2. Central Layout
  3. Fewer Columns
  4. Separate Top Sections
  5. Solid Areas of Screen Real-estate
  6. Simple Navigation
  7. Bold Logos
  8. Bigger Text
  9. Bold Text Introductions
  10. Strong Colors
  11. Rich Surfaces
  12. Gradients
  13. Reflections
  14. Cute Icons
  15. Star Flashes

Source: http://2-0.net

Important reasons for using web standards

For web programmers who are already using web standards, this list may come in helpful when you want good arguments and feel free to add any extra benefits you can think of. If you’re new to the idea of web standards and are unsure on whether you should spend the time to study all about them or not, here are some of the most important reasons for doing so.

Get better search engine rankings
Well-written content delivered through clean, well-structured, and semantic markup is delicious food for search engine spiders and will help our rankings. This will lead to increased traffic, which is what most website owners want.

Maximize website visitors
You don’t know which browser visitors will use to access your site. The only thing you can be logically sure of is that they are using something that can parse HTML. By using web standards properly you make sure that you have completed your job in making your website work with the largest possible number of browsing devices.

Faster page loading
Clean and well-structured HTML that separates structure and content from presentation will be smaller and faster for visitors to download.

Accessibility
Web standards do not guarantee that all features of our website will be accessible to people with disabilities, but it is a very good start. Make sure your html documents are valid, well-structured, and semantic, and you’re well on the way towards having an accessible website.

Make our HTML easier to maintain
When we need to update our website then we will like to browse through a clean and well-structured document. Using CSS to organize layout also makes it much easier to make overall website design changes.

Look professional
Our colleagues, competitors, friends and potential employers will be able to look at our work and know that the person likes to keep up with changes in technology and make sure that his knowledge and skills are always current. It will make us look like a real web professional.

Making our clients feel good
Use web standards combined with best practices for accessibility and give your clients a chance to talk about how they cater to all people, and how they find it important that everybody can use their services or find information about their products. You will also avoid the bad publicity that can be caused by shutting out visitors like disabled people, Mac users, and mobile phone users.

Future-proof content
If we separate content from presentation and use current web standards, we have done the best we can to ensure that our website content can still be read even after fifty years or hundred years.

Good business sense
Any business owner will like to have more visitors, a faster website, improved search engine rankings, potential good publicity and it does make sense to do so.

Accurate way to do things
Web standards provide the way to build the web from the beginning and now that we can surely do something the right way and have a really important reason to feel good about ourselves.