10 CSS Tips Every Web Developer Should Know

March 4th, 2009 · 9:31 pm @   -  34 Comments

I’ve written a fair few articles over the past year and thought it might be useful for any new subscribers and visitors to see a summary of the most useful ones. Below is a list of hints and tips which will be useful to anyone starting out in CSS and even the most seasoned professional in the industry may find a couple of things useful.

1. CSS Reset

A consistent starting point across all browsers is a great place to begin when working with HTML and CSS.

2. IE6 CSS Bugs and Fixes Explained

Internet Explorer 6 can be a pain for even experienced web developers but within this article, I explain the main bugs and how to solve these annoying little issues.

3. Block and Inline Elements Explained

It’s important when learning CSS that you understand how block and inline elements work. This guide takes you through the fundamental differences and explains how each can be manipulated with CSS.

4. 100% Height using CSS

This one is a problem that’s encountered quite frequently but once explained is quite a simple technique to achieve 100% height.

5. CSS Equal Height Columns

Creating equal height columns using CSS is tricky but using a background image trick known as faux coumns, it’s easily achievable.

6. CSS Fixed Footer

Another frequent problem is getting a footer to stick to the bottom of the browser window which isn’t dependant on content. This article explains how it’s done.

7. CSS Rounded Corners

Creating rounded corners is usually a tricky process creating lots of small rounded images to simulate a rounded corner. However, this article explains how it can be done by using just one small image.

8. CSS Image Replacement

A number of ways to replace some text with an image using CSS.

9. Float and Clear: A Comparison of CSS Clearing Techniques

Understanding how float’s and clearing float’s works is important in any modern web designers toolkit. This artice explains the fundamental basics of this layout technique.

10. Creating FAQs using a definition list

Definition lists are often overlooked by web designers but can sometimes be more useful than a simple unordered list.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • DZone
  • Reddit
  • StumbleUpon
  • Twitter

34 Comments → “10 CSS Tips Every Web Developer Should Know”


  1. kimblim

    3 years ago

    Knowing your selectors and pseudo selectors doesn’t hurt either: http://kimblim.dk/csstest/ (sorry for the shameless plug, but I thought it was relevant…)


  2. Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web … | Best Web Gallery

    3 years ago

    [...] Dave Woods – Freelance Web Designer UK » 10 CSS Tips Every Web … [...]


  3. Dave

    3 years ago

    @kimblim – yeah that’s definitely worth knowing as well, I also find the CSS selectors section on CSS3.info quite useful as well http://www.css3.info/selectors-test/


  4. Timothy

    3 years ago

    Nice list. And I’m glad that I know all of this (what a relief)


  5. Jaap

    3 years ago

    Good post! Thanks!


  6. My Bad Attitude » 10 CSS Tips Every Web Developer Should Know

    3 years ago

    [...] Woods has collected a bunch of his articles into this top 10 [...]


  7. Tips css « Proyecto F

    3 years ago

    [...] http://www.dave-woods.co.uk/index.php/10-css-tips-every-web-developer-should-know/ [...]


  8. Socail Network Software

    3 years ago

    Beautiful blog btw.
    thanks for the tips.


  9. Fabulous friday link fest | Hi, Im Grace Smith

    3 years ago

    [...] 10 CSS Tips Every Web Developer Should KnowA list of hints and tips which will be useful to anyone starting out in CSS and even the most seasoned professional in the industry may find a couple of things useful. [...]


  10. links for 2009-03-06 - the sweetview blog

    3 years ago

    [...] Dave Woods – Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know (tags: design tips webdesign css web reference programming html) [...]


  11. links for 2009-03-07

    3 years ago

    [...] Dave Woods – Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know (tags: webdesign css) This entry was posted in Delicious. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL. « links for 2009-03-06 [...]


  12. links for 2009-03-07 « pabloidz

    3 years ago

    [...] 10 CSS Tips Every Web Developer Should Know Dave Woods – Freelance Web Designer UK (tags: css) [...]


  13. Harry M

    3 years ago

    Nice post, thanks…


  14. 10 dicas de css que todo Web Developer deve saber — Márcio Henrique Locatelli - Programação Web

    3 years ago

    [...] a pena dar uma olhada: 10 dicas css que todo Web Developer deve saber (em [...]


  15. web designer - david calvert

    3 years ago

    all very good stuff dave – very useful. thanks….


  16. The Right Thing

    3 years ago

    [...] 10 CSS Tips Every Web Developer Should Know [...]


  17. Great Happiness - Webdesign, Pixel Art, Tutoriaux et Liens utiles » 10 Astuces CSS

    3 years ago

    [...] Dave Woods nous dévoile 10 astuces CSS


  18. Linkit 02.3. - 13.3. | Valontuoja

    3 years ago

    [...] Dave Woods – Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know I’ve written a fair few articles over the past year and thought it might be useful for any new subscribers and visitors to see a summary of the most useful ones. Below is a list of hints and tips which will be useful to anyone starting out in CSS and even the most seasoned professional in the industry may find a couple of things useful. [...]


  19. Saturday Geek Links - 3/14/09 | Geeks with Tricks

    3 years ago

    [...] 10 CSS Tips Every Web Developer Should Know [...]


  20. Webdesign Meppel

    3 years ago

    This is truly an amazing list! Contains all important CSS aspects and tricks!


  21. Mark

    3 years ago

    Wow. Epic Win. Legendary Article.


  22. Dave Woods CSS « EgonDev

    3 years ago

    [...] 10 css tips every web developer should know [...]


  23. 網站製作學習誌 » [Web] 連結分享

    3 years ago

    [...] 10 CSS Tips Every Web Developer Should Know [...]


  24. Raleigh Web Developer

    3 years ago

    Very nice list. Even beyond knowing your selectors, you need to know the difference between inline & block elements.


  25. Web In Review for March 5th 2009 | Madyson Designs

    3 years ago

    [...] Dave Woods – Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know – Great info for anyone who is an expert or just dabbles in CSS. [...]


  26. Leer webdesign (800+ tutorials) | Edwin Duinkerken - Freelance webdeveloper en journalist

    2 years ago

    [...] CSS Techniques And Tutorials 16+ Easy CSS Techniques that Simplify the Webdesigner’s Life 10 CSS Tips Every Web Developer Should Know 15+ Tips to Speed Up Your Website, and Optimize Your [...]


  27. Andrew Jhonson

    2 years ago

    This is indeed a great article. CSS always plays a vital role in web design and it always gives you opportunity to make your website Google friendly. I have compiled few factors ‘why Google loves CSS’ that you can check at http://www.bestpsdtohtml.com/get-to-know-why-css-is-good-for-google/


  28. Eswar

    1 year ago

    Really good tips, thanks for share

    Here are good code writing tips http://www.templatespoint.com/blog/2010/10/code-writing-tips/


  29. CSS Styles

    1 year ago

    Excellent tips! I think one should consider it when going to develop a site. It is a great way to develop an attractive website. I have read some articles about css from http://www.csswebstyles.com/category/articales/


  30. web design

    1 year ago

    Beautiful blog btw.
    thanks for the tips.


  31. 10 CSS Tips Every Web Developer Should Know « turtle9

    1 year ago

    [...] http://www.dave-woods.co.uk/index.php/10-css-tips-every-web-developer-should-know/ [...]


  32. web design

    1 year ago

    These are great tips. I have not seen all of these before


  33. Hosting Best

    1 year ago

    Great bit of info, using the curved borders on something im working on at the moment, thanks


  34. Kiefer

    1 month ago

    Thanks i have some tips noted down. helped alot


Leave a Reply

Categories

Latest Articles

Facebook

Buy Me a Beer

Welcome

Hi, I'm Dave Woods and am a freelance web designer based in the UK and work for a variety of small and large businesses throughout the world.

I specialise in HTML and CSS using web standards to provide usable, accessible and search engine friendly websites that are designed and delivered to the highest standard.

Latest Comments

Popular Posts