Turn Your HTML Into a Attractive Website With Just 12 Lines of CSS

A web page without any style is like a blank canvas. The possibilities are endless, and it is easy to waste time experimenting with different arrangements, colors and fonts. But the default browser styles are not ideal, so you have to make the effort just to start with an appropriate design.

The following styles will provide a solid base on which you can later build. With the concerns of use addressed and the basic design principles in place, you can focus on your content or continue to refine your design from there.

More logical box dimensioning

If you have learned CSS from zero, you should have a good understanding of the box model. But if you are not familiar with the concept, it can be confusing to wrap your head. Even when you know what’s going on, working with the default browser model can be annoying, so I recommend that you reset the size of a box like this:

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

The default value for the box size is the content box. With this parameter, all the properties of width and height that you apply to an element will not include the padding, the border or the margin. For example, you may want one element to occupy half the width of the page:

        #about { width: 50%; padding: 8px; }
    

This will lead to a total width of half the width of the container plus 16 pixels (8 pixels on each side). The value of the border box for the size of the boxes will guarantee that the width and height properties include padding and borders, which facilitates the creation of an element which is exactly half of the width of the page.

Related

11 Tips to start with the Modern CSS

Style tips that will not go out of fashion.

In short, Border-Box is a more intuitive way to declare sizes and will probably cause you less long-term problems. By applying it to the HTML element, then defining all the other elements to inherit this value, you can easily replace it if you need it.

Optimal line length

There is a reason why most books and magazines are in the orientation of portraits: long lines can be difficult to read. When your eye reaches the end of a line and returns at the beginning of the next one, it must quickly change its focus. The more it should move more and more, the more difficult it is.

Typography guides generally recommend a line length between 45 and 75 characters. You can use the maximum property to make sure that your lines do not contain more than a certain number of characters, using the CH unit:

        html { max-width: 70ch; }
    

The CH unit is relatively unknown, but it becomes more and more important. This unit represents the width of a character 0 in the relevant font, it is therefore an excellent way to ensure an approximate number of characters per line.

Content centered on horizontally

Once you have set a line length, your content will be aligned on the left side of the page. Unless the size of your font is very large, it will often seem unbalanced, especially for all those who use a wide screen. It is much more comfortable for a reader to look straight than to turn your head.

The simple fix is ​​to align your contents in the center of the browser window by giving it equal margins on the left and right:

        html { margin: auto; }
    

This only works when the element – the HTML tag, in this case – has a constrained width. If this is a complete element, there will be no margins to balance. The maximum property defined earlier means that with a larger window, the content will be centered with equal horizontal margins.

A comfortable measurement

In typography, the leader refers to the vertical space between the lines of text. CSS calls for this “line height” and specifies a default “normal” value which, browsers, generally interpret at around 1.2. In other words, a line of text will have about 10% of its height added as space above and below.

The default is ok but, as for the length of the line, it can cause readability problems. The value you use should ultimately depend on the font, the line length and the average number of words in your paragraphs, but a good overall compromise is 1.4, about twice as much space as the default:

        html { line-height: 1.4; }
    

A more readable font

The default police size in most browser environments is 16px, and it has been doing it for a long time. As screens obtain higher resolutions, this produces increasingly small text which, at some point, becomes too uncomfortable for most tastes. But the default remains the same.

Related

These 10 fun games will teach you Modern CSS

Stimulating. Strategic. Satisfying.

The following declaration uses relative units – EM – to increase the police size that it would be otherwise. In the default case, it takes a 16px font and increases it to 20px.

        html { font-size: 1.25em; }
    

It is important to note the advantage of this approach on the size of the police: 20px. The use of EM means that if the user changes the parameters of his browser and chooses a smaller or larger font than the default value, your page will be reduced proportionally.

Appropriate header and bodies

By default, your browser will display text in a serif font. Although this is good for the bodily text, it is generally accepted that the titles without serif combine better with a serif body font. Many families of police are presented in serif and sans-serif pairs, in particular for this reason.

        h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
    

A good model should use generic font families: serif and sans-serif. These are guaranteed to be available and, just like the font size, the user can always choose his favorite font in a browser like Chrome:

Using these styles as a reference, you can add more nuances with a pile of fonts, choosing unique fonts that complete your design, while keeping generic families as a help.

Related

What does “serif” and “without serif” mean?

Serif? Without serif? What does that even mean?

Easy reactive images

The images that escape their containers may seem ugly and break the layout of your website at the worst. If you do not keep a very tight control on the images of your site, especially if they can be downloaded by users, it is an easy to die.

The simplest safety net is to ensure that all images on your page are not wider than their container. The maximum width property allows you to do so:

        img { max-width: 100%; height: auto; }
    

Note that the height: auto is necessary to maintain the appearance of the original image, if you specify dimensions in your image tags, like this:

        <img width="800" height="400" src="https://placecats.com/bella/800/400" />
    

With this markup, the property of maximum width can reduce the width, but it will have no effect on the height, so your image will end up stretching without height: Auto.

An appropriate color contrast

A good color contrast is the key to readability. If your text color is too similar to your background color, it can be difficult to read. It goes double (or more) for people who find it difficult to perceive certain colors.

The accessibility directives of the web content require a contrast report of at least 7: 1. For reference, the contrast report of the black text (# 000000) on a white background (#FFFFFF) is 21: 1, which passes the contrast test with the flying colors. However, such a striking contrast has a drawback: it can put pressure on the eyes, caused by the need to adapt between light of these different brightness.

A very subtle change can make all the difference; Not so much that you would notice, but enough to make your eyes do it:

        html { color: #333; }
    

This very dark gray has a contrast ratio of 12.63: 1 on a pure white background, almost half that of pure black, but always easily exceeding the requirement of 7: 1.

Deletion of liability underlines

Since the arrival of HTML in the early 1990s, truism has persisted: the links have been blue and underlined. It is the default value and, for the most part, it worked well as usability functionality, informing the reader exactly which parts of a document on which they can click.

However, the underlining of the links can compete with your design and, depending on the duration of your links, may seem ugly and can even harm the readability of your text. When CSS has become popular, another truism has set up: designers deactivate the link.

Whether you decide to do it or not depends on you, but a common technique consists in hiding the underlying by default, and showing it when the reader moves his pointer on the link:

        a:link { text-decoration: none; }
a:hover { text-decoration: underline; }
    

The links will always appear in blue, so they should remain recognizable. If you sail them using the keyboard, they will not be underlined, but the browser’s default outline style will apply, making sure you can always identify them.

The complete CSS

These styles will not necessarily apply to your design. But they are a good basis for working, and they make the documents simple enough attractive.

The code

        html {
    box-sizing: border-box;
    max-width: 70ch;
    margin: auto;
    font-size: 1.25em;
    color: #333;
    line-height: 1.4;
}
* {
    box-sizing: inherit;
}
h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}
img {
    max-width: 100%;
    height: auto;
}
a:link {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
    

The results

This screenshot shows an example of a HTML document, with many basic elements, made using a default style of a browser:

This screenshot shows the same document with the minimum style sheet above applied:

The styles presented here should improve the basic minimum design of a typical HTML file, with improvements to readability and overall disposition. Try them with your own documents or websites, and continue to learn CSS to improve your knowledge and polish your conceptions more.