10 essential tips to get started with CSS

As we discuss about CSS Sprites (a very handful technique for web performance) in earlier post,here I am going to discuss about some useful basic CSS tips for beginners.Now a beginner who is going to design web interface found it easy to deal with CSS.It can be extract independently and provides flexibility to designer.
One should have a clear structure of design before starting with its CSS, if structure doesn’t match standard rules than you might face difficulty in cross browser compatibility and your css create different layout in various browsers.

1.Use <div> avoid< table>

As many beginners who starts working with css and html go for table based structure to achieve a coherent and consistent look.Using CSS and DIV tags reduces markup code, separates content from its visual presentation, speeds up page downloads, and brings your code closer to Web standards compliance–all while making your website more appealing to search engine spiders.
Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website’s functionality.
The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages.With the use of CSS and DIV tags, we can achieve the effected layout, reduce our markup code noticeably, get faster page downloads, and separate content from its visual presentation.

2.Debugging tools for CSS
CSS bugs are difficult to find ,and when you have large css file and there are numbers pf css file including in layout than it become more difficult to sort out the problem,because you stuck between error and bug.Debugging tools provide easy tweak to handle with these typical conditons.

3.Role of <id>and<class>

ID and Class are two major selectors in css.
It is often hard to decide when to use a class versus an id for an element. Here is an easy way to think of the difference:

Use a class tag if:

1. The style is used in various places throughout the document.
2. The style is very general.

Use an id tag if:

1. The style is only used once ever in the document.
2. The style is specific to a certain area of the document.

Remember that an id can only appear once in any HTML document. Once you’ve used the id, it should not be used again on that page.
class vs id
4.Use Shorthand CSS
Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property.

5.list with CSS

<ol>for an Ordered List (where the order of items is important, so items are numbered)
<ul> for an Unordered List (normally shown as items with bullets)
<li> for each item in a list, ordered or unordered.
You find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

list 6.Use measurelt tool for typography measurement: px vs em

Measurelt tool provides help in creating a pixel perfect design layout.This measurement gives an idea of how tall lowercase letters are and how large the bodies are of characters with ascenders and descenders.
measurement in css

7.Specify multiple fonts

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
Defining font family is a good habbit for every css designers,as different platforms use different fonts.Each time you are not supposed to define same font again and again, instead of it would be a good prctice define it in a body,and if you want to use special font for specific display then define it seperately.

8.CSS reset sheet

Some tag has default value..for example in tag padding-left:40px; has default margin value. So it would again be a good practice to reset all these value to “zero” and set them as per need of design.

9. Always code for Firefox

This may seem a little weird because the majority of users use IE as a browser. However it is a lot easier to code for Firefox (or any other standards compliant browser) and then fix for IE using conditional statements such as…

10.Keep CSS Codes Clean

Whenever you start writing css always remember one thing that use minimum number of classes and div for your design,try to define similar property in one class and div.
If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly.

<ul><!–[if IE 6]>
<link rel=”stylesheet” href=”/includes/css/clean/iefix.css” mce_href=”/includes/css/clean/iefix.css” type=”text/css” /><![endif]–></ul>

You may also like...

40 Responses

  1. katharnavas says:

    10 essential tips to get started with CSS #css http://bit.ly/9gtVh

  2. Rahul Jadhav says:

    RT @katharnavas: 10 essential tips to get started with CSS #css http://bit.ly/9gtVh

  3. 29visual says:

    Get started with CSS http://bit.ly/LFZ5M thanks to @techprone

  4. Hey very useful tips. CSS always sounds like a rocket science to me…
    This is very helpful

  5. RT @tweetmeme 10 essential tips to get started with CSS | Tech Prone http://bit.ly/Aide5

  6. 10 essential tips to get started with CSS – http://bit.ly/wKmhR

  7. Honey Singh says:

    For Newbie #Designers / #Developers: 10 essential tips to get started with #CSS http://bit.ly/18cQh5

  8. 10 essential tips to get started with CSS http://bit.ly/b8xkkc

  9. This is a very helpful article for beginners. I have been working with CSS for awhile, but this is a great review. Thanks for sharing.

  10. I just want to tell you that I am just newbie to blogging and site-building and certainly loved you’re website. Very likely I’m going to bookmark your blog . You actually come with terrific well written articles. Bless you for revealing your website page.

  11. 319598 211914of course like your web-site nevertheless you require to check the spelling on quite a couple of of your posts. Numerous them are rife with spelling issues and I to discover it extremely bothersome to inform the reality nevertheless I

  12. make me thin says:

    979236 260584What a lovely weblog page. I will undoubtedly be back once again. Please maintain writing! 94214

  13. 581516 712352Wow! This could be 1 certain with the most valuable blogs We

  14. 288578 86675Good post. I be taught 1 thing far more challenging on entirely different blogs everyday. It will all of the time be stimulating to learn content material from other writers and apply slightly 1 thing from their store. I

  15. You’re so awesome! I do not think I’ve read something like this before. So nice to find somebody with a few original thoughts on this subject. Really.. thank you for starting this up. This website is something that is needed on the web, someone with a bit of originality!

  16. 1033 805747Bookmarked. Please also discuss with my web site. 668519

  17. 875540 911959Youre so cool! I dont suppose Ive learn anything like this before. So nice to find any person with some authentic thoughts on this subject. realy thank you for starting this up. this website is something that is wanted on the internet, someone with a little bit originality. useful job for bringing something new to the web! 390245

  18. homeInsur! says:

    Can I just say what a comfort to uncover a person that really understands what they are discussing on the internet. You actually know how to bring an issue to light and make it important. More and more people really need to read this and understand this side of the story. I can’t believe you aren’t more popular given that you definitely possess the gift.

  19. Very good post. I certainly appreciate this site. Thanks!

  20. 992482 404100If I ought to say something, then absolutely nothing will stop the chatter within 546674

  21. 112474 673612There is an ending. Just remember that I meant for this to be an art game. I do feel like I spent an inordinate amount of time on the far more traditional gameplay elements, which could make the meaning with the game a bit unclear. In case you mess about with it though, you will uncover it. 972568

  22. 840997 930796You created some decent points there. I looked on the net for any problem and located most individuals goes along with together with your site. 372789

  23. Ontwerp says:

    391803 433570As I web site possessor I believe the content matter here is rattling fantastic , appreciate it for your efforts. You should keep it up forever! Good Luck. 674022

  24. 304045 894789Hi. Thank you for creating this web site . I m working on betting online niche and have located this web site making use of search on bing . Will likely be positive to appear a lot more of your content material . Gracias , see ya. :S 19725

  25. voyance gratuite en ligne perpignanVisiter ce nouveau blog : voyance en direct

  26. see here says:

    188284 941336Nice read, I just passed this onto a colleague who was doing some research on that. And he really bought me lunch as I discovered it for him smile So let me rephrase that: Thank you for lunch! 180287

  27. An interesting discussion is worth comment. I think that you need to write more about this issue, it might not be a taboo subject but typically people do not speak about such topics. To the next! Best wishes!!

  28. I am wanting to start my own business and need to know how to start a website for a cheap/free price.. I am looking to start my own photography business and want to get a website up. I am planning on using this for a way to let people know about me, give them different albams of an axample of my work and then a way to contact me. I would love for it to be cheap or free in order to get started..

  29. This design is wicked! You definitely know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

  30. Hello! This post couldn’t be written any better! Reading through this post reminds me of my good old room mate! He always kept chatting about this. I will forward this page to him. Pretty sure he will have a good read. Many thanks for sharing!

  31. Howdy just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and both show the same outcome.

  32. Greetings from Carolina! I’m bored to death at work so I decided to browse your site on my iphone during lunch break. I really like the knowledge you provide here and can’t wait to take a look when I get home. I’m surprised at how fast your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyways, fantastic site!

  33. Thanks for sharing your ideas. I’d personally also like to convey that video games have been ever evolving. Better technology and innovations have made it easier to create authentic and fun games. Most of these entertainment video games were not actually sensible when the concept was being experimented with. Just like other areas of technology, video games also have had to evolve through many many years. This is testimony towards fast continuing development of video games.

  34. I am thinking about becoming a ‘ProBlogger”. I know Blogging is a very slow business, but still i want to know how much time will it take me to start earning at least $100.. I can work everyday for approximately 11 hrs. Can i expect start earning $100 within two months.. Please folks help, give me some idea on how much hard work it’s going to be..

  35. How can I keep up with posts made on the Blogspot websites?

  36. Everyone loves what you guys are up too. This kind of clever work and exposure! Keep up the very good works guys I’ve included you guys to my own blogroll.

  1. October 21, 2009

    […] 6-  10 essential tips to get started with CSS […]

Leave a Reply