One Line CSS Magic - CSS Tips and Tricks

No need to mention CSS is awesome. Here one line css magic. 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; }