HTML Dog
Skip to navigation

Size doesn't matter

Making headings any size you choose with CSS.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Styled heading styles</title>
	<style>
		h1 {
		  font-size: 0.67em;
		  margin: 2.33em 0;
		}
		h2 {
		  font-size: 0.83em;
		  margin: 1.67em 0;
		}
		h3 {
		  margin: 1.33em 0;
		}
		h4 {
		  font-size: 1.17em;
		  margin: 1em 0;
		}
		h5 {
		  font-size: 1.5em;
		  margin: .83em 0;
		}
		h6 {
		  font-size: 2em;
		  margin: .67em 0;
		}
	</style>
</head>
<body>
	<h1>Heading 1 (h1)</h1>
	<h2>Heading 2 (h2)</h2>
	<h3>Heading 3 (h3)</h3>
	<h4>Heading 4 (h4)</h4>
	<h5>Heading 5 (h5)</h5>
	<h6>Heading 6 (h6)</h6>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original