You Only Need 12 Lines of CSS to Build a Clean, Attractive Website
A website without any styling is like a blank canvas. The possibilities are endless, and it’s easy to waste time experimenting with different layouts, colors, and fonts. But the default browser styles are not ideal, so you need to put in the effort just to get started with a proper design. The following styles will provide a solid foundation that you can later build on. With usability concerns addressed and basic design principles in place, you can focus on your content or continue to refine your design from there. More Logical Box Sizing If you’ve learned CSS from the ground up, you should have a good understanding of the box model. But if you’re unfamiliar with the concept, it can be a confusing one to wrap your head around. Even when you know what’s going on, working with the browser’s default model can be awkward, so I recommend you reset box-sizing like this: The default value for box-sizing is content-box. With that setting, any width and height properties you apply to an element will not include padding, border, or margin. For example, you might want an element to take up half the width of the page: This will result in a total width of half the container’s width plus 16 pixels (8 pixels on either side). The border-box value for box-sizing will ensure that width and height properties include padding and borders, making it much easier to create an element that is exactly half the width of the page. In short, border-box is a more intuitive way of declaring sizes and will probably cause you fewer problems in the long run. By applying it to the html element, and then setting all other elements to inherit that value, you can easily override it if you need to. Optimal Line Length There’s a reason most books and magazines are in portrait orientation: long lines can be difficult to read. When your eye reaches the end of a line and moves back to the beginning of the next one, it has to switch focus quickly. The further it has to move to do so, the more difficult that is. Typography guides generally recommend a line length of between 45 and 75 characters. You can use the max-width property to ensure your lines contain no more than a certain number of characters, using the ch unit: The ch unit is relatively unknown, but it’s becoming more and more important. This unit represents the width of a 0 character in the relevant font, so it’s a great way to ensure an approximate number of characters per line. It’s impossible to specify an exact number of characters per line because of variable-width fonts. But this approximation is, for the most part, more than good enough. Horizontally Centered Content Once you’ve set a line length, your content will be aligned on the left side of the page. Unless your font size is very big, this will often look unbalanced, particularly for anyone using a widescreen monitor. It’s much more comfortable for a reader to look straight ahead than to turn their head. The simple fix is to align your content in the center of the browser window by giving it equal margins on the left and right: This only works when the element—the HTML tag, in this case—has a constrained width. If it’s a full-width element, there will be no margins to balance. The max-width property set earlier means that, with any larger window, the content will be centered with equal horizontal margins. A Comfortable Measure In typography, leading refers to the vertical space between lines of text. CSS calls this “line height” and specifies a default value of “normal” which browsers typically interpret at around 1.2. In other words, a line of text will have approximately 10% of its height added as space above and below it. The term “leading” (pronounced “ledding”) originates from the strips of lead used to separate lines of type in traditional mechanical presses. The default value is OK but, as with line length, it can cause legibility problems. The value you use should ultimately depend on the font, line-length, and the average number of words in your paragraphs, but a good overall compromise is 1.4, approximately twice as much space as the default: A More Legible Font Size The default font-size in most browser environments is 16px, and it has been for a long time. As screens get higher resolutions, this produces smaller and smaller text which, at some point, gets too uncomfortable for most tastes. But the default remains the same. The following declaration uses relative units—em—to bump up the font size from what it would otherwise be. In the default case, this takes a 16px font and increases it to 20px. It’s important to note the advantage of this approach over font-size: 20px. Using em means that, if the user changes their browser settings and picks a smaller or larger font than the default, your page will scale proportionally. Appropriate Header and Body Fonts By default, your browser will display text in a serif font. While this is fine for body text, it’s generally accepted that sans-serif headings combine better with a serif body font. Many font families come in pairs of serif and sans-serif, specifically for this reason. A good template should use the generic font families: serif and sans-serif. These are guaranteed to be available and, much like font size, the user can still choose their preferred font in a browser like Chrome: Using these styles as a baseline, you can add more nuance with a font stack, choosing unique fonts that complement your design, while keeping the generic families as a fallback. Easy Responsive Images Images that escape their containers can look ugly at best and break your website’s layout at worst. If you’re not keeping very tight control over the images on your site—especially if they can be uploaded by users—this is an easy trap to fall into. The easiest safety net is
