StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Most used CSS tricks

Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know

1. Rounded corners without images
  1.  
  2. <div id="container">
  3. <b class="rtop">
  4. <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
  5. </b>
  6. <!--content goes here -->
  7. <b class="rbottom">
  8. <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
  9. </b>
  10. </div>
  11.  
  12. .rtop, .rbottom{display:block}
  13. .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
  14. .r1{margin: 0 5px}
  15. .r2{margin: 0 3px}
  16. .r3{margin: 0 2px}
  17. .r4{margin: 0 1px; height: 2px}
  18.  

Rounded corners without images

2. Style your order list
  1.  
  2. <ol>
  3. <li>
  4. <p>This is line one</p>
  5. </li>
  6. <li>
  7. <p>Here is line two</p>
  8. </li>
  9. <li>
  10. <p>And last line</p>
  11. </li>
  12. </ol>
  13.  
  14. ol {
  15. font: italic 1em Georgia, Times, serif;
  16. color: #999999;
  17. }
  18.  
  19. ol p {
  20. font: normal .8em Arial, Helvetica, sans-serif;
  21. color: #000000;
  22. }
  23.  

Style your order list

3. Tableless forms
  1.  
  2. <form>
  3. <label for="name">Name</label>
  4. <input id="name" name="name"><br>
  5. <label for="address">Address</label>
  6. <input id="address" name="address"><br>
  7. <label for="city">City</label>
  8. <input id="city" name="city"><br>
  9. </form>
  10.  
  11. label,input {
  12. display: block;
  13. width: 150px;
  14. float: left;
  15. margin-bottom: 10px;
  16. }
  17.  
  18. label {
  19. text-align: right;
  20. width: 75px;
  21. padding-right: 20px;
  22. }
  23.  
  24. br {
  25. clear: left;
  26. }
  27.  

CSS Tableless forms

4. Double blockquote
  1.  
  2. blockquote:first-letter {
  3. background: url(images/open-quote.gif) no-repeat left top;
  4. padding-left: 18px;
  5. font: italic 1.4em Georgia, "Times New Roman", Times, serif;
  6. }
  7.  

Double blockquote

5. Gradient text effect
  1.  
  2. <h1><span></span>CSS Gradient Text</h1>
  3.  
  4. h1 {
  5. font: bold 330%/100% "Lucida Grande";
  6. position: relative;
  7. color: #464646;
  8. }
  9. h1 span {
  10. background: url(gradient.png) repeat-x;
  11. position: absolute;
  12. display: block;
  13. width: 100%;
  14. height: 31px;
  15. }
  16.  
  17. <!--[if lt IE 7]>
  18. <style>
  19. h1 span {
  20. background: none;
  21. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
  22. }
  23. </style>
  24. <![endif]-->
  25.  

Gradient text effect

6. Vertical centering with line-height
  1.  
  2. div{
  3. height:100px;
  4. }
  5. div *{
  6. margin:0;
  7. }
  8. div p{
  9. line-height:100px;
  10. }
  11.  
  12. <p>Content here</p>
  13.  

Vertical centering with line-height

7. Rounded corners with images
  1.  
  2. <div class="roundcont">
  3. <div class="roundtop">
  4. <img src="tl.gif" alt=""
  5. width="15" height="15" class="corner"
  6. style="display: none" />
  7. </div>
  8.  
  9. CONTENT
  10.  
  11. <div class="roundbottom">
  12. <img src="bl.gif" alt=""
  13. width="15" height="15" class="corner"
  14. style="display: none" />
  15. </div>
  16. </div>
  17.  
  18. .roundcont {
  19. width: 250px;
  20. background-color: #f90;
  21. color: #fff;
  22. }
  23.  
  24. .roundcont p {
  25. margin: 0 10px;
  26. }
  27.  
  28. .roundtop {
  29. background: url(tr.gif) no-repeat top right;
  30. }
  31.  
  32. .roundbottom {
  33. background: url(br.gif) no-repeat top right;
  34. }
  35.  
  36. img.corner {
  37. width: 15px;
  38. height: 15px;
  39. border: none;
  40. display: block !important;
  41. }
  42.  

Rounded corners with images

8. Multiple class name
  1.  
  2. <img src="image.gif" class="class1 class2" alt="" />
  3.  
  4. .class1 { border:2px solid #666; }
  5. .class2 {
  6. padding:2px;
  7. background:#ff0;
  8. }
  9.  
9. Center horizontally
  1.  
  2. <div id="container"></div>
  3.  
  4. #container {
  5. margin:0px auto;
  6. }
  7.  

Center horizontally

10. CSS Drop Caps
  1.  
  2. <p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </p>
  3.  
  4. p.introduction:first-letter {
  5. font-size : 300%;
  6. font-weight : bold;
  7. float : left;
  8. width : 1em;
  9. }
  10.  

CSS Drop Caps

11. Prevent line breaks in links, oversized content to brake
  1.  
  2. a{
  3. white-space:nowrap;
  4. }
  5.  
  6. #main{
  7. overflow:hidden;
  8. }
  9.  
12. Show firefox scrollbar, remove textarea scrollbar in IE
  1.  
  2. html{
  3. overflow:-moz-scrollbars-vertical;
  4. }
  5.  
  6. textarea{
  7. overflow:auto;
  8. }
  9.  

Leave a comment on Stylized Web Have some feedback? Leave a comment

176 Comments So Far

  1. I know most of them, but anyway this is very useful resource, thanks!

  2. These are some nice CSS tips. Thanks for posting.

  3. I’ve never seen the png gradient over CSS text before, that’s a good idea, pretty cool

    brent
    mimoymima.com

  4. Very nice! Dugg and Stumbled! :)

  5. Seen them before BUT I forgot about styling the ordered list numbers, so thanks heaps for refreshing my memory!! As that would look so much better for a new website im creating.

  6. Pingback: purrl.net |** urls that purr **|

  7. Pingback: Metaholic » Most used CSS tricks

  8. Pingback: Most used CSS tricks

  9. Amazing… very nice…
    Specially i liked the round corner and Quote ones…

    blogging it…

    post more such things…

    thanks.

  10. Some citations would be nice too.

  11. Very cool tricks! Save for further use~~~

  12. By john posted on March 13, 2008 at 7:46 am

    Weren’t most of these recently featured in another article elsewhere?
    You may want to check your spelling on a few…

  13. By jesudas posted on March 13, 2008 at 7:52 am

    nice

  14. By Eran Levy posted on March 13, 2008 at 7:58 am

    Good job. Keep on sending those useful tips/tutorials.

  15. Excellent tips, thanks!

  16. Pingback: AlanLe.net » links for 2008-03-13

  17. Really nice work. Thank you.

  18. By hasan posted on March 13, 2008 at 9:57 am

    very nice and useful
    thank you

  19. The CSS codes here are wonderful, especially the one on “glossy text”. Cool, digged, delicious’ed, and stumbled upon. :) Thanks.

  20. I have saved and bookmarked this page for my reference. Thanks, these are quite helpful for me.

  21. Great post! I love posts like this where we have everything in one place.

  22. Pingback: Los trucos más usados de CSS | unblogged. A blog about nothing. Yeah, nothing

  23. By anonymous posted on March 13, 2008 at 2:07 pm

    None of these CSS tricks is original. I think you should give credits to the original author.

  24. By Dejan posted on March 13, 2008 at 2:18 pm

    @ anonymous
    First of all i don’t reply on comments without real name and email but i will make an exception this time.

    IF you have read this text more carefully you would see that is says “today’s most used CSS tricks – tips” not for example “my tips” SO i don’t credit myself for any of these tips

    AND no one can credit himself for example for vertical align or white-space that’s just part of CSS and this is just one of many ways of using it

    @ all
    Thank you for the good words ;)

  25. Pingback: The most used CSS Tricks « Well, Here, webdesign, link, resource, development, helpful, css « Sharebrain

  26. Pingback: Awesomoto » Blog Archive » Most Used CSS Tricks

  27. really cool list!

  28. Pingback: La Guimauve du Web » Un rappel de techniques CSS

  29. Pingback: Trucos CSS más usados | Data2max.com

  30. really cool list!

  31. By Manny posted on March 14, 2008 at 12:25 am

    Ok for the two idiots who posted first. He never said they were his. But thank you to whoever did post because these are super helpful!

  32. Pingback: links for 2008-03-13 « toonz

  33. Great summation of CSS tricks.

    And the issue with taking credit? I don’t think really applied at this point because as the title says “Most used…”.

  34. Pingback: links for 2008-03-14 « Mike Does Tech

  35. Pingback: Pages tagged "css"

  36. Pingback: Metaholic » Most used CSS tricks | StylizedWeb.com

  37. Pingback: // wyctim.blog » Blog Archive » Heti Linkek

  38. what the heck! we can use multiple classes?!!
    thanks for the list, its cool.

  39. Thanks for your work and for your comment ;-)

  40. By ASM posted on March 14, 2008 at 3:09 pm

    Thanks for an excellent collection. The nature of the web is that ideas quickly become disassociated from their authors. Each of us uses them. Condensing them into a useable format such as this does a great service. Thanks to those who likely sweated hours bringing them from idea to reality.

  41. By ferg posted on March 14, 2008 at 3:49 pm

    Thanks for the great resource!

    With regards to #9: The id value in the source is spelled, “contatiner”, while you mean “container”. Secondly, although the [margin:0 auto] trick is a great one, it breaks in IE 5 Win. There are a few ways around this — the most common is to use “text-align:center” and then reset the property afterwards. When working with fixed-width layouts, I much prefer positioning like so:


    #container {
    position: relative;
    width: 500px; /* example width */
    left: 50%;
    margin-left: -250px; /* 50% of width */
    }

  42. By Dejan posted on March 14, 2008 at 4:04 pm

    @ ferg
    Thanks for another solutions, i also often use text-align:center;
    #9 spelling is corrected ;)

  43. Pingback: » Most used CSS tricks Webcreatives

  44. Pingback: Most used CSS tricks | StylizedWeb.com | 次なるもの

  45. Pingback: 2008년 3월 14일 « JJJ is my last exclusion-girilfriend

  46. Pingback: trick css piu usati : sastgroup.com

  47. Pingback: Links for 15-03-2008 | Velcro City Tourist Board

  48. Pingback: Convergence » links for 2008-03-15

  49. Pingback: Weekly Links - March 15th | Vandelay Website Design

  50. Pingback: CSS? - timebomb.