HTML & CSS tutorials
3. CSS to always include

Note: While reading this page, bear in mind that although I have some experience of writing HTML and CSS I'm no expert. If you find errors or have proposals for improvements, please send me a message and help make this a better page for the benefit of future visitors. If you're new to or not that experienced in HTML and CSS, I suggest you go to the Introduction page and follow the instructions. To the left, there are links to more HTML and CSS tutorials.


To complete this tutorial, follow these instructions:

1. Open a new empty document with Notepad++ or some other text editor.

2. Write or copy this code to the document:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello world</title>
<link rel="stylesheet" type="text/css" href="hello_world.css" media="screen" />
</head>

<body>
<p>Hello world!<br />
<a href="http://mkforlag.com/">mkforlag.com</a></p>
</body>
</html>

3. Save the document as hello_world.html (or whatever as long as the extension is html).

4. Open another new empty document with Notepad++ or some other text editor.

5. Write or copy this code to the document:

body {background:rgb(255,255,255); font-family:Verdana; color:rgb(0,0,0); font-size:16px; line-height:1.5;}
a {outline:none;}

6. Save the document as hello_world.css.

7. Open hello_world.html (or whatever you've called the document) with Mozilla Firefox 10, Internet Explorer 9 or some other modern browser. A text looking like this should appear in the window:

Hello world!
mkforlag.com

Comments on the CSS code

Line 1: Background-color, font-family, text-color and font-size for the body element should be always be set, I think, because a visitor's browser settings may not work that well or, at worst, not at all. For example, the font-size may be set to a value so small that the text is hard or even impossible to read, and the background-color and the text-color may be set to similar values or even the same value.

Line 1: The line-height should be greater than 1.0 to make text easier to read. I'm using 1.5; 1.2 would be a more normal value (at least according to the books and articles on typography I've read).

Line 2: The outline of the a element should be set to none to hide the, in my opinion, ugly looking frame that by default appears when a link is clicked.


Would you like to comment on this page or some other page? Use the contact form. Write the title of the page you want to comment on and your comment in the field Message.