when I want to add a width or add a padding to it I wonder what is better to be done earlier? (Assuming I’m not using a “box-sizing: border-box”) I think it makes more sense to first set the padding as it’s part of the box and then set the width, but I’m still confused.
What if I specified the widths and set the margins and set the positions and finally the page layout is all fine, but then I decide to add a little more padding to one of the elements to make it more appealing but that doesn’t fit with other sizings and the whole layout falls apart?
Thank you all!
1: Setting the width will attempt to set the width ignoring padding, yet the padding could force it to be wider than than width you have set. The order in which you set them does not matter.
2: If you’re setting all of your sizes manually, then yes, one small change will force you to make changes elsewhere. Perhaps try setting widths as percentages, or using the calc() feature. That said, it doesn’t mean your entire layout will fall apart.
It makes no difference to the result which you set first; both rules will be applied in the same way. If you are not using box-sizing: border-box, then the width will set the width of the contents, and the padding will be in addition to that.
Your layout should not be rigidly designed so that one small change causes everything to break. What happens if a visitor has their default font size set larger than yours? What if you need to add more text at a later date? What if my screen size is different to yours? You need to aim for a fluid design, where things can adjust to accommodate changes. Don’t set widths at all, if you can avoid it. Where you need them, use flexible units like ems and percentage, rather than fixed units like pixels. Consider using min-width and max-width to allow for different screen sizes.
If you’re not already familiar with the idea of responsive design, now would be a good time to learn. This article is several years old, but provides a good introduction:
The most basic answer to your question is that you simply copy the content of files two and three and paste it at the end of the first file. If you add the information in the order in which the style sheets were called on the site, you shouldn’t run into problems.
I like to have my rules structured in a logical order, so I’d prefer to add the new rules in the appropriate section and check frequently for any conflicts I might need to resolve.
This article is several years old, but provides a good introduction: