Here could be a CSS boilerplate for any project:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid orange;
font-family: sans-serif;
}
Using * we are targeting all elements.
margin and padding properties set to 0 are for cancelling default browser margin and padding (see this previous article). Remember:
margin: 0 auto;
box-sizing property is new to me. It sets how the total width and height of an element is calculated (this explanation and others as well are from MDN Web docs, completed by W3Schools): it can be either unrestricted or restricted to the parent's container.
.box { width: 350px; border: 10px solid black; }
renders a box that is 350 (box width) + 10 (right border ) +10 (left border) = 370px wide.
This means that you may have elements sharing a same width and height but if they have different paddings and/or borders, their total size will be different.
.box { width: 350px; border: 10px solid black; }renders a box that is 350px wide. This makes the world a little easier to live in, dosen't it?
border property to debug positioning drama - you should of course delete or comment (just in case haha) this line for going-live and chose a good contrasting color . I confess, when it comes to add some CSS I often feel not knowing why it's not behaving as expected. So just like many fellows, I'm adding borders to elements and yes, it helps a lot. To avoid repeating it, I put it inside the all selector (*).
font-family property to sans-serif just to make a first step out of raw HTML, it's totally subjective.