CSS tips and tricks

Filed as News on September 8, 2006 9:18 pm

Repost This

Welcome visitors from Digg. The Blog Herald is one of the largest sites covering the blogosphere – and has been so for more than four years.

You can subscribe to our feed and visit our archives for more stories.

I’ve been writing CSS for about 2 years now and I still feel like every time I open up a blank file and begin writing CSS for a new design I learn something new.

For those of you that are new to CSS or experts always looking for a new trick, here are some of things I do on a regular basis to keep my code organized (kind of).

1. Size text without using pixels

If you’re wondering how some designers get font sizes to work using em as a unit rather than px, it’s easy. There is a trick that was written about a while ago (maybe on ALA) that resets the font sizes for the entire site so that 1.0em is the same as 10px.

body { font-size: 62.5% }

Simply throw the font-size: 62.5% bit into your body styling and you’re done. Now you can use ems to sizes your fonts rather than pixels.

So your paragraph styles might look something like this:

p { font-size: 1.2em; line-height: 1.5em; }

You might be wondering why it matters how you size fonts? Bulletproof design. Any major site needs to be able to withstand a user enlarging text (old people use the web too!), and setting absolute sizes is not good practice.

2. Make your code easy to read

When I was looking at some of the CSS coded by Rundle I noticed that he separated his heading tags nicely. It looked something like this:

h1 {}
    h1#logo { font-size: 2em; color: #000; }
h2 {}
    h2.title { font-size: 1.8em; font-weight: normal; }

Quickly scanning the CSS for the different heading tags is a breeze if you use this technique. It is also helpful if you’re sharing code or working on a large site where you are using the same heading tags (say, h2) in multiple places since you’ll be able to style each one independently and not worry about child classes inheriting attributes from the parent class.

I also use similar techniques for paragraph tags, anchor tags, and any other tag that requires multiple classes to look correct in every instance.

3. Separate code into blocks

This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change.

This is how I usuall break down my site:

/* Structure */

This is where I’d put the primary site structure divs and classes.

/* Typography */

This is where I would list things like paragraphs, headings, and other miscellaneous font styles such as small and strong tags.

/* Links */

This one is simple – all the styling for anchor tags.

/* Lists, images, etc. */

This is where I would style images, lists, and any other elements that didn’t fit into the rest of the section. If I have an unordered list for the navigation I might setup a new section for navigation and setup all the styles for the navigation, including the list and link styles, in this section – it makes editing the navigation much easier.

4. Stop using so many divs!

This has been echoed by a lot of coders and standards nuts, and while I don’t think there is anything wrong with using a lot of block level elements, I laugh a little when I see someone style their article headlines using a div rather than a heading tag. Some people even style their bylines using a div! Try using the small tag or the a span for goodness sake.

5. Style everything at once

I noticed that I was typing “margin: 0; padding: 0;” in just about every element. I remembered seeing someone use “*” to style everything on a page at once. I decided it didn’t make much sense to define margin and padding over and over when I always gave them the same parameters.

It’s easy to do:

* { margin: 0; padding: 0; }

Now you only have to define margin and padding on elements where you actually want some.

Know of any other tips or tricks? Let me know :)

In this moving age of internet many internet providers have also come into the field of web hosting. Some of these companies are working as domain reseller while others are offering complete hosting services along with the basic internet marketing program. Most of these companies offer free wireless internet connection along with their hosting packages. Some internet phone service providers are also offering ppc search engines to their clients. Along with basic hosting and SEO services some of these companies also offer the services of online training. Above all webmasters should not go after the freebies init as these are not considered as recommended servers by most of the experienced webmasters.

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.

Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. God, DotA, Leadership, Funny, SEO - PJ LightHouse » SEO: Dos and Donts Guide to Great Web Design - Travel, Malaysia, Petaling Jaya, Food, Videos, Junk, SEO, Crazy, Adsense, Love, Tips & TricksSeptember 19, 2007 at 4:39 am
  2. Dos and Donts Guide to Great Web Design » WNW Design - Web Design & SEOSeptember 19, 2007 at 8:51 am
  3. Dos and Donts Guide to Great Web DesignSeptember 19, 2007 at 1:11 pm
  4. css, php, dhtml и java статьи и скрипты » 70 способов улучшить CSS кодSeptember 23, 2007 at 1:41 pm
  5. Dos and Donts Guide to Great Web Design · Laela’s WorldSeptember 24, 2007 at 2:00 am
  6. 70位专家谈CSS设计 | 一个全新的 WordPress Blog | PureCSSSeptember 25, 2007 at 12:57 am
  7. Css - 101 recursos impresionantes del CSSOctober 8, 2007 at 7:08 pm
  8. 101 awesome CSS Resources - Graphic Design Forum and Web Design ForumOctober 9, 2007 at 9:02 am
  9. 101 recursos CSSOctober 10, 2007 at 7:44 pm
  10. Css7.cn » 70 Expert Ideas For Better CSS CodingOctober 26, 2007 at 11:00 am
  11. 101 взрывной и незаменимый информационный ресурс по CSS » Журнал для веб-мастеров и блогеров от школы создания сайтовOctober 28, 2007 at 11:01 pm
  12. Organize your CSS-code | Rasim Coşkun | Web Tasarım | Web DesignOctober 30, 2007 at 2:51 pm
  13. tips on how to blog » How To Blog -November 8, 2007 at 4:16 am
  14. 3 CSS Resources You Need Now | Photoshop, Illustrator & Web Design ResourcesNovember 9, 2007 at 3:12 pm
  15. Olkenava » CSS tips and tricks!November 10, 2007 at 8:53 am
  16. 70位专家谈CSS设计 | 晨风·社December 4, 2007 at 11:44 pm
  17. i say that | 70 Expert Ideas For Better CSS CodingDecember 14, 2007 at 10:24 am
  18. 101 CSS resources | ARTEgami in EnglishJanuary 17, 2008 at 1:22 am
  19. 雨中人 » Blog Archive » 70位专家谈CSS设计January 17, 2008 at 4:06 am
  20. Blah! » Blog Archive » CSS tips and tricks : The Blog HeraldFebruary 2, 2008 at 12:00 pm
  21. 81 Free CSS Web Design Resources - Graphic Design Forum and Web Design ForumFebruary 20, 2008 at 9:18 am
  22. sandrajakovljevic.com » Blog Archive CSS linkovi »February 22, 2008 at 1:03 am
  23. CSS tips and tricks for your website « Tatem Website DesignMarch 18, 2008 at 6:59 pm
  24. CSS Concept » Blog Archive » CSS Coding in Experts opinions..March 21, 2008 at 11:02 am
  25. Links « Blogging by SandeeApril 8, 2008 at 12:55 pm
  26. Dos and Donts Guide to Great Web Design at Kgarney.ComMay 19, 2008 at 10:40 pm
  27. 70 Expert Ideas For Better CSS Coding | Hayes PotterJuly 4, 2008 at 11:05 am
  28. egyptianwebdesigner.com » Blog Archive » 70 Expert Ideas For Better CSS CodingJuly 6, 2008 at 4:17 pm
  29. 101 CSS Resources to Add to Your Toolbelt of AwesomenessJuly 12, 2008 at 5:00 pm
  30. 70 Expert Ideas For Better CSS Coding | Cổng thông tin hty.netAugust 3, 2008 at 9:51 am
  31. The advantages of CSS + some great resources | Campodiez V2August 16, 2008 at 11:21 am
  32. 101 CSS Tips, Tutorials e esempi | LordmarinNovember 10, 2008 at 3:16 am
  33. 101 Awesome CSS Resources :November 22, 2008 at 9:44 am
  34. BOTLOG - Блог для прогрессивно мыслящих людей » Blog Archive » div — это модно!November 29, 2008 at 10:31 pm
  35. Professional Web Design Company releases Dos and Donts Guide to Great Web Design | CHROMATICJanuary 25, 2009 at 8:26 am
  36. CSS Resources | csstemplatesdesignMarch 24, 2009 at 1:03 pm
  37. eTools for you » Blog Archive » 101 CSS ResourcesApril 11, 2009 at 12:30 am
  38.   101 взрывной и незаменимый информационный ресурс по CSS / Блог для web-мастеровApril 24, 2009 at 4:06 am
  39. CSS Tips and Techniques | ThinkCreateInspireJune 19, 2009 at 11:31 am
  40. 10 tips to write better CSS | Code input - Web Development and strategiesAugust 12, 2009 at 8:07 pm
  41. 250+ Resources to Help You Become a CSS Expert | X Design BlogAugust 20, 2009 at 3:49 pm
  42. 250+ Resources to Help You Become a CSS Expert | huibit05.comAugust 20, 2009 at 7:55 pm
  43. The ‘62.5%’ trick: em Cascades, px Doesn’t…. « NeekoidDecember 15, 2009 at 3:47 pm
  44. 250+资源帮助你成为一个CSS专家 - 唯创网站设计博客December 25, 2009 at 8:23 am
  45. A Comprehensive CSS Development Guide For Beginners & Experts « deCode10 – trends, technologies & more …January 18, 2010 at 6:21 am
  46. 70 Expert Ideas For Better CSS Coding « HUE DesignerJanuary 22, 2010 at 2:47 pm
  47. Sobe Solutions - News, Gadgets, SEO, MarketingJuly 21, 2010 at 1:29 am