Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › CSS-reset

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
1 2
  • Author
    Posts
  • November 2, 2010 at 12:05 pm #27677
    shuma
    Member

    Hi you guys!

    I have read some articles now on the internet and was wondering a bit
    whether to add the CSS reset file separately or whether to include it in the universal CSS file.

    And if you must use it as a separate file, how will the browser know when to implement it?

    Have not really gotten a clear answer from all the articles I’ve read ..

    November 2, 2010 at 12:17 pm #78130
    Eclipse
    Member

    I always use it at the top of the universal stylesheet, that way you can use the cascade to override some things.

    November 2, 2010 at 12:48 pm #78102
    shuma
    Member

    But If we say that we want to use it in a separately stylesheet, how do you do that?
    Like I have css-reset.css in my html file, how does the browser know when to use it?

    November 2, 2010 at 1:10 pm #78088
    Eclipse
    Member

    The browser loads every declarated stylesheet (in head-section) in it’s cache (memory), before the body is loaded, so it knows the css-rules you gave it.
    The only difference in making a single stylesheet is that it takes only one http-request to load the styles, each time a page is loaded instead of two http-requests if you use two separate stylesheets.

    November 2, 2010 at 1:18 pm #78089
    Eclipse
    Member

    Below is an example of how you can make sections inside your only stylesheet to group things together:


    
/* START CSS-RESET */
    
* { margin: 0; padding: 0; }
    
/* END CSS-RESET */
    

    
/* START PAGE-WRAPPER */
    
#page-wrapper {}
    
/* END PAGE-WRAPPER */
    

    
/* START TYPOGRAPHY */
    
h1,h2,h3,h4,h5,h6 {}
    
p {}
    
a {}
    
a:hover {}
    
ul {}
    
ol {}
    
li {}
    
li a {}
    
li a:hover {}
    
/* END TYPOGRAPHY */
    November 2, 2010 at 1:23 pm #78090
    shuma
    Member

    Thanks for a great answer! I understand now! =)

    Eclipse: Off-topic: If I use images to make rounded corners, more images more http-request?
    or am I wrong?

    November 2, 2010 at 1:43 pm #78071
    Chris Coyier
    Keymaster

    Rounded corner images shouldn’t have any effect in your loading time. With that in mind, it also depends on how graphically designed they are as that will make the image file larger.

    In my body section are the rounded corners. The white background is CSS. Notice it loads right with the code.

    LINK HERE

    November 2, 2010 at 1:58 pm #77902
    Eclipse
    Member

    Yes shuma, each image means one more http-request, since it has to be brought on the page through a webserver thus has to be requested. Though CWDESIGN is right as well: the smaller size of the image in kbytes, the faster a page loads.

    November 2, 2010 at 2:31 pm #77800
    shuma
    Member

    Thanks, u guys are the best.

    November 2, 2010 at 3:05 pm #77433
    hardik
    Member

    @shuma
    you can make image sprite and load just one image and make rounded corner’s or use border-radius :)

    November 2, 2010 at 9:33 pm #77366
    Chris Coyier
    Keymaster

    border-radius isn’t supported by all browsers. It’s much easier to use images.

    November 2, 2010 at 11:58 pm #77368
    TheDoc
    Member

    @cwdesign

    I would heavily disagree with you there. It is significantly more difficult to use images and a bunch of divs. Border-radius is for the future and shouldn’t be necessary in any design. Those using a modern browser will see it, and for the rest of the IE6/7 world, they get a perfectly function website, sans rounded corners.

    November 3, 2010 at 9:45 am #77278
    Chris Coyier
    Keymaster

    That’s my point. It is not compatible with all versions of IE if one chooses to have rounded corners. If you have IE9, you will see it, if you don’t, you will see edges. I think it is easier to use border-radius in code but to deal with compatibility, it is much easier to use images in the end. To be honest, I think all major browsers should have a mandatory update so developers don’t have to deal with this.

    November 3, 2010 at 11:41 am #77281
    kipperc
    Member

    @cwdesign
    I have to agree with TheDoc. Rounded corners aren’t a functionality improvement, they are purely aesthetic. There is nothing wrong with displaying rounded corners to some and square to others. Why go through the extra work, server requests, and load time to support browsers that probably aren’t going to render everything correctly anyway? Using border radius is far simpler than using images. It’ll be easier to modify your design in the future should you decide you no longer like rounded corners, plus it’s kind of like rewarding your visitors for using a modern browser.

    November 3, 2010 at 12:03 pm #77282
    zackw
    Member

    Using rounded corners images for a few boxes wont really slow down a website, I think its still necessary to use them for now, border-radius is great and it will save me a crap load of time in the future, no slicing images, extra divs, background images, it will be a breeze, but clients often want the design to hold true as far down the IE line as possible, lots of large companies still are using ie6 in house. I’m more worried about terrible Javascript slowing down my sites rather than a few rounded corners images at like 600 bytes. Off topic from the original post sorry but I had to pipe in lol.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 20 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.