HTML & CSS tutorials
2. Hello world! with CSS

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!</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:

p {font-family:Arial; color:red; font-size:20px;}

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!

Comment on the HTML and CSS code

Line 7 in the HTML code links to the CSS file hello_world.css, that contains a rule for the appearance of all p tags.

More

See also HTML Beginner Tutorial on htmldog.com.


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.