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? Use the contact form. Write the title of the page you want to comment on and your comment in the field Message.