HTML & CSS tutorials
4. Centered h1 element with background and subtitle

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>Frozen time</title>
<link rel="stylesheet" type="text/css" href="frozen_time.css" media="screen" />
</head>

<body>
<h1><span>Mats Kristiansson</span>Frozen Time</h1>
</body>
</html>

3. Save the document as frozen_time.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;}
h1 {background:rgb(192,255,192); border:rgb(192,0,192) 1px solid; font-size:24px; font-weight:normal; color:rgb(192,0,192); padding:2px; text-align:center;}
h1 span {display:block; font-size:20px;}

6. Save the document as frozen_time.css.

7. Open frozen_time.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:

Mats KristianssonFrozen Time

Comments on the CSS code

General: The code in the CSS code snippet is the one I'm using for headlines on www.mkforlag.com, for example on the HTML & CSS tutorials pages.

Line 1-2: CSS code I think always should be included. See HTML & CSS tutorials: 3. CSS to always include.

Line 3: I think the background should be set to a rather light color and the border and the text to a rather dark color. If you don't want any background, simply remove background:rgb(192,255,192); border:rgb(192,0,192) 1px solid;. The HTML element h1 is bold by default. Remove font-weight:normal; if you want to keep that style. I think the end result is slightly better with some padding. Remove padding:2px; if you like.

Line 4 are for span elements inside h1 elements. The display property is set to block to add a linebreak after each span end tag. The font-size should be set to a smaller size than h1 text outside a span.


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.