10 CSS Tips Every Web Developer Should Know

March 4th, 2009 · 9:31 pm @ Dave Woods  -  27 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

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


  1. kimblim

    1 year 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

    1 year ago

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


  3. Dave

    1 year 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

    1 year ago

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


  5. Jaap

    1 year ago

    Good post! Thanks!


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

    1 year ago

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


  7. Tips css « Proyecto F

    1 year ago

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


  8. Socail Network Software

    1 year ago

    Beautiful blog btw.
    thanks for the tips.


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

    1 year 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

    1 year 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

    1 year 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

    1 year ago

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


  13. Harry M

    1 year ago

    Nice post, thanks…


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

    1 year ago

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


  15. web designer - david calvert

    12 months ago

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


  16. The Right Thing

    12 months ago

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


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

    12 months ago

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


  18. Linkit 02.3. - 13.3. | Valontuoja

    12 months 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

    12 months ago

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


  20. Webdesign Meppel

    11 months ago

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


  21. Mark

    11 months ago

    Wow. Epic Win. Legendary Article.


  22. Dave Woods CSS « EgonDev

    11 months ago

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


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

    10 months ago

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


  24. Raleigh Web Developer

    10 months 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

    10 months 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

    9 months 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

    6 months 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/


Leave a Reply

Categories

Latest Articles

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