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? 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.