One Line CSS Magic

March 21, 2008 {1 month, 23 days ago.} (posted by Alex)

No need to mention CSS is awesome. Its pure beauty of CSS that gives life to the website and makes it lively. Yes, it’s not simple to write CSS for newbie and even professionals sometimes gets stuck because of cross browser issues. Sometimes, One line in CSS can be more than a magic providing solutions. I reviewed some of the CSS files and came up with some one line CSS.

Below are list of one line CSS. One line CSS mentioned below may or may validate web standards and web accessibility rules.

1. Set default margin and padding to all elements

* {margin: 0; padding: 0}

Every element that have not assigned margin or padding will have default value of above.
Some CSS designers argue that this is not necessary at all because all CSS element at the end will have their assigned value.

2. Set image border to zero

img { border: 0; }
a img { border: 0; }

This can be used to prevent any linked images from displaying borders.

3. Remove Firefox’s link border

a:active, a:focus { outline: 0; }

This removes dotted outline from focused or active links on firefox.

4. Scrolling Render IE

html { background : url(null) fixed no-repeat; }

5. Prevent line breaks in links, over sized content to break

a{ white-space:nowrap;}
element { overflow:hidden; }

This trick prevents line breaks on links.

6. Centering block elements horizontally

element { margin:0 auto; }

This one line CSS horizontally centers a block level element.

For IE less than 7, following line should be added though.

element { text-align: center; }

7. Show Firefox scrollbar

html{ overflow:-moz-scrollbars-vertical; }

8. Remove textarea scrollbar in IE

textarea{ overflow:auto; }

Bookmark Us: Social bookmarking sites for sharing and discovering new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Technorati
  • DZone
  • Google
  • TwitThis

Further Recommended Reading


6 Comment/Feedback to “One Line CSS Magic”


  1. #1 by Sashidhar Kokku March 21st, 2008 at 9:26 am

    Good one. Thanks for the tips.

  2. #2 by Miguel Benevides March 22nd, 2008 at 4:56 am

    while i disagree on some of the other tips, #3 is quite ‘regretable’ … it’s 2008 ;)

  3. #3 by alen March 22nd, 2008 at 3:59 pm

    hm, most of these tips look very familiar to me…

  4. #4 by Alex March 22nd, 2008 at 4:01 pm

    alen, yep few points matches

  5. #5 by Felipe Giotto March 25th, 2008 at 6:26 pm

    Good tips! Solves many problems!
    Thanks!

  6. #6 by Ganesh April 19th, 2008 at 8:49 pm

    great tips. I have been using many of them for a while now, but #7 is news to me. Thanks.


Post a comment or question



  1. (required)(required)

  2. (required)(required)(will not be published)


English flagDutch flagFrench flagGerman flagJapanese flagPortuguese flagRussian flagSpanish flag