Max-Width, Margin Auto
You can make good websites without being a CSS expert, writing a ton of code, or using a massive framework. There are a few simple things you can do to make a website feel like a "real" website and today we're going to start with number one: limit line length.
Line Length
According to Practical Typography, "Line length is the distance between the left and right edges of a text block." Every major website limits the line length of text, especially the main text of articles and posts, which are usually centered on screen. This makes it easier to find the start of the next line and reduces how far your eyes have to jump around left-to-right to backtrack or find something.
Your line length should be proportional to the font size of your text. One rule of thumb is that the line length should be long enough to fit two to three alphabets on one line.
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
My site fits a little more than three on most screens and less on mobile. Do what looks good to you!
I find that for websites with reasonable text sizes, 800 pixels (800px) is a good default to go with and it's what I'll be using in the rest of the post. Substitute whatever line length you choose in the examples!
Max-Width, Margin Auto
To limit the line length and center the text, we're going to use two CSS attributes: max-width and margin. Setting max-width: 800px ensures that the text block is never wider than that, limiting the line length. Setting the left-margin and right-margin to auto will center the text horizontally by distributing the margin equally between left and right.
Note: The shorthand
margin: autowill set all margins toauto, which is often sufficient for centering text.
Body
For a basic completely un-styled site (looking at you academics), the simplest easiest thing you can do is style the body element. It's already there. It's got all your stuff in it. You can even do it using the style attribute as shown here if you don't want to write a stylesheet in a style element or linked stylesheet.
<html>
...
<body style="max-width: 800px; margin: auto">
...
</body>
</html>
Main
If you want to up your game a little, put your main content in a main element and style that instead. This will allow you to have some other body elements (e.g. headers, sidebars) outside of main and its width-limited area.
main {
max-width: 800px;
margin: auto;
}
The Text Itself
Another option is to limit the width of the text elements individually, instead of a container that they're inside. This makes it easier to style different elements differently (e.g. to let figures be wider) and create elements with the correct reading order that float outside the main body (e.g. asides).
h1, h2, h3, h4, p {
max-width: 800px;
margin: auto;
}
You've Got This
Making a website that looks good from scratch takes time and effort. It can be tempting to start with a complex framework or template that looks pretty, or do nothing at all, but if you start simple and build it yourself, you can have a website you understand and can customize easily.
Stay tuned! I'm planning to write more guides on easy things you can do to make a nice looking website!