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? Send an email to mats.kristiansson.skovde@gmail.com or a letter to Mats Kristiansson, Timmervägen 3A, 541 64 Skövde, Sweden with the title of the page you want to comment on, your comment and your name or a pseudonym.