• home
  • forum
  • my
  • kt
  • download
  • Create Your Own Simple Reset.css File

    Author: 2009-02-27 11:09:52 From:

    Step 1: Zero Out Your Margins And Padding

    By default, the browsers will add margins to many elements. For example, typically there are about six pixels of margins on the body element. As the designer, you should be the one specifying these figures! (Except maybe when it comes to font size - which is a whole other topic to be debated at length.) So let's zero out a bunch of these elements!

    view plaincopy to clipboardprint?
    1. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,   
    2. ol, li, dl, dt, dd, form, a, fieldset, input, th, td   
    3. {   
    4. margin: 0; padding: 0; border: 0; outlinenone;   
    5. }  

    Step 2: Take Control Of Your Elements

    You may have noticed that your elements vary in size from browser to browser. You can change this by setting the default font-size to 100%.

    view plaincopy to clipboardprint?
    1. h1, h2, h3, h4, h5, h6   
    2. {   
    3. font-size: 100%;   
    4. }  

    Next, we'll need to define the margins and padding for our heading elements. I'm also going to remove the list-style-type from my list elements. Lastly, I'll set a base font-size for the body element.

    view plaincopy to clipboardprint?
    1. body   
    2. {   
    3. line-height: 1;   
    4. font-size: 88%;   
    5. }   
    6.   
    7. h1, h2, h3, h4, h5, h6   
    8. {   
    9. font-size: 100%;   
    10. padding: .6em 0;   
    11. margin: 0 15px;   
    12. }   
    13.   
    14. ul, ol   
    15. {   
    16. list-stylenone;   
    17. }   
    18.   
    19. img   
    20. {   
    21. border: 0;   
    22. }  

    Step 3: Expand

    I typically like to include a few common classes that I use in all of my projects. You may or may not choose to use these yourself.

    view plaincopy to clipboardprint?
    1. .floatLeft   
    2. {   
    3. floatleft;   
    4. padding: .5em .5em .5em 0;   
    5. }   
    6.   
    7. .floatRight   
    8. {   
    9. floatrightright;   
    10. padding: .5em 0 .5em .5em;   
    11. }  

    Here Is Our Final Simple Reset.css File.

    view plaincopy to clipboardprint?
    1. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,   
    2. li, dl, dt, dd, form, a, fieldset, input, th, td   
    3. {   
    4. margin: 0; padding: 0; border: 0; outlinenone;   
    5. }   
    6.   
    7. body   
    8. {   
    9. line-height: 1;   
    10. font-size: 88% /* Decide for yourself if you want to include this. */;   
    11. }   
    12.   
    13. h1, h2, h3, h4, h5, h6   
    14. {   
    15. font-size: 100%;   
    16. padding: .6em 0;   
    17. margin: 0 15px;   
    18. }   
    19.   
    20. ul, ol   
    21. {   
    22. list-stylenone;   
    23. }   
    24.   
    25. a   
    26. {   
    27. colorblack;   
    28. text-decorationnone;   
    29. }   
    30.   
    31. a:hover   
    32. {   
    33. text-decorationunderline;   
    34. }   
    35.   
    36. .floatLeft   
    37. {   
    38. floatleft;   
    39. padding: .5em .5em .5em 0;   
    40. }   
    41.   
    42. .floatRight   
    43. {   
    44. floatrightright;   
    45. padding: .5em 0 .5em .5em;   
    46. }  

    At least for me, this is all I need to get started with a new website. For your own projects, you should expand upon what I have here so that it best suits you. You should probably specify the margins on more of your commonly used elements, like the paragraph tag

    discuss this topic to forum

    relation tutorial

    No information

    Category

      CSS (245)

    New

    Hot