Generell styling of the HTML and body Tag

[kzowada]

Hey guys I’m having a hard time figuring this one out. While doing some challenges here on fcc and also over at frontendmentor.io. I wondered is there a correct way how to style the html- and body-tag ? What I mean by that I see a a lot people for example adding margins and paddings of zero to their html selector so that every element in your HTML is generated with 0 margin and padding. I tried to look up what you should as for in what’s the best practice because I see so many different versions of this. Hope somebody understands my question.

[Sylvant]

Browsers come with some default css rules for the different html elements, such as increased size for headings(h1, h2 etc), list style for <ul> and <ol>, coloring and hover effects for anchors and many more. Different browsers also have different default styles. This makes very often your page appearance not quite what you expect or intend it to be, so its common practice to prematurely wipe some of the default styles. Such is the case for reseting marginds and/or paddings for all elements. Ofc, then you will have to provide your own for all elements you use. Whenever i use anchors and lists, i also tend to always get rid of most of their default styles and setup my own. For example links have their default font colors, which also changes on hover or on click and not always those colors match with your page color palette. I also use a common approach to setup all elements with box-sizing: border-box , which makes it setting the size of your elements more clear. With other box-sizing types, paddings or borders might not be taken into count when restricting your element width and height, which can lead in unexpected page appearance.

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}