Building a static website (part 7: The CSS reset)

What is a CSS reset?

In the previous blog post, I looked at the basics of the CSS box model. In this post, I want to look into taking further control of that, by starting my CSS with a "reset". I then wish to start exploring the consequences of that and begin to consider methods of using CSS to target different screen sizes. I still don't have any definite final design of a webpage in mind, although I do have some ideas, but need to start to understand how I can make those happen.

The basic idea behind performing a "CSS reset" is that, browsers have a set of default styles for every element, so if a designer does not provide any CSS style information, the browser will render everything on the page based on those styles. This includes certain default settings for margin, padding and box-sizing. Because of reasons such as the former two properties varying from browser to browser and the vagaries of box-sizing: content-box, it is recommended that these are reset to some different default value, so that we can then set these values to give consistency. For this blog post and quite likely going forward, I will use the following CSS to do this:

*,
* ::before,
* ::after
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Introducing my own styles

Given that the main stylesheet performs a reset as described above, that would leave things looking a bit odd (for example, there will be no separation between paragraphs), so the entire point is to begin experimenting with my own styles, to replace the default settings for margin and padding. I also decided to try out a typical common webpage style, where there is a maximum width set, which prevents lines of text and so on becoming too wide when viewed on a decently sized monitor. The latter certainly bring some further things about the CSS box model into focus.

Setting margins

Having reset all the element margins to zero, we clearly need to give them some sensible default values of our own, so that's what I have done for several HTML elements that appear on this page. The important thing here is that I only set margins at the bottom of block elements, which avoids the issue of vertical margin collapse. The CSS file can be examined for details, but for example, there are setting such as h1: margin-block-end: 25px;. Note that I'm using the logical CSS property that is equivalent to margin-bottom.

Centring the main content

It's very common for websites to have their main content limited to some kind of fixed width, at least on bigger display devices and that content will be centred most likely. I wanted to start understanding the basic techniques behind how this kind of thing can be achieved. This kind of thing does encroach to a certain extent on the huge subject that is responsive design, which I intend to cover in more detail, but I don't think there's any harm in getting a basic understanding, especially as it does help to further the understanding of the CSS box model, as I mentioned a bit earlier.

As I briefly explored last time, centring a block element can be a matter of setting the width of that element and then using something like margin: 0 auto. Therefore, as far as I understand it, you could use something like:

body
{
   max-inline-size: 1000px;
   margin: 0 auto;
}

Note that we set the maximum width (max-inline-size is the logical equivalent to max-width), rather than a specific fixed width, because that avoids issues for narrow screen such as that on mobile devices.

This does work, but I also wanted to experiment with how you could give the header and footer section a background colour, that stretches across the entire browser window, while still centring the contents. This sort of thing is common in one form or another on websites and it's possible I might be interested in the kind of design.

As far as I can understand, the only way I could find at the moment of achieving this is not to set the max-inline-size for the body. Instead, we use CSS properties on the <nav>, <article> and <footer> elements to set the width and margin appropriately, while also centring the content for those specific elements.

Finally, I added some padding so that as the browser window is made narrow or when the page is viewed on something like a mobile phone, there is still some whitespace on the left and right of the screen, to help readability. Note that I have set a light grey colour for the <body> background, just to make it easier to see where the various components are displayed.

The relevant CSS styles are as follows:

body
{
   background-color: #e6e6ff;
   color: black;
   font-size: 100%;
}

article
{
   background-color: white;
   max-inline-size: 1000px;
   margin: 0 auto;
   padding-inline-start: 20px;
   padding-inline-end: 20px;
}

header
{
   background-color: #052962;
   height: 100px; /* Set an arbitrary height. */
}

footer
{
   background-color: #052962;
   color: white; /* Make sure the text is visible against the background. */
}

/* For now, apply the CSS styles to every element inside the footer. */
footer *
{
   max-inline-size: 1000px;
   margin: 0px auto;
   padding: 20px;
}

Admittedly, as a web page, it looks like a bit of a disaster, but that's not really the point of this exercise. Instead, I just want to try and understand some of the concepts and approaches.

Conclusions and design decisions

From this relatively short blog post in this series, I conclude that attempting to master the CSS box model is both important and somewhat difficult. In terms of design decisions, the main one is that I will continue to use the CSS reset going forward. I will also be using the approach of only setting the margin value for the bottom of block elements, to avoid that vertical margin collapse. In addition, I will have to carefully consider what values I actually end up setting, because the values I've used in the current CSS stylesheet are pretty arbitrary.

I suspect I will end up using the approach of having a fixed width (or at least a maximum width), that will allow me to centre most of the content. This basic approach seems to be extremely common and I can understand why. However, the exact design and layout of webpages is still something I need to spend time on designing and therefore I don't have any fixed ideas on that. I will be covering this subject in a future blog post (or set of blog posts).