HTML Dog
Skip to navigation

Bold, italics, case, and line height

Using font-weight, font-style, font-variant, text-transform, and line-height.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bold, italics, case, and line-height</title>
	<style>
		body {
			font-size: 25px;
		}
		p {
			margin: 50px 0;
		}
		code {
			color: #c00;
		}
		#p1 {
			font-weight: bold;
		}
		#p2 {
			font-style: italic;
		}
		#p3 {
			font-variant: small-caps;
		}
		#p4 {
			text-transform: uppercase;
		}
		#p5 {
			line-height: 2;
		}
	</style>
</head>
<body>
	<p id="p1"><a href="http://www.htmldog.com/references/css/properties/font-weight/"><code>font-weight</code></a>: Bold or light text. Eg. <code>font-weight: bold;</code></p>
	<p id="p2"><a href="http://www.htmldog.com/references/css/properties/font-style/"><code>font-style</code></a>: Italic or oblique text. Eg. <code>font-style: italic;</code></p>
	<p id="p3"><a href="http://www.htmldog.com/references/css/properties/font-variant/"><code>font-variant</code></a>: Small capitals. Replaces lowercase letters with uppercase letters that are a similar height to the original lowercase ones. Eg. <code>font-variant: small-caps;</code></p>
	<p id="p4"><a href="http://www.htmldog.com/references/css/properties/text-transform/"><code>text-transform</code></a>: Converts the case of letters, to uppercase, lowercase, or capitalized. Eg. <code>text-transform: uppercase;</code></p>
	<p id="p5"><a href="http://www.htmldog.com/references/css/properties/line-height/"><code>line-height</code></a>: The minimal height for a line of text. Apparnet in longer lines, such as "The green seed of the white-flowering climbing leguminous papilionaceous plant, <em>Pisum sativum</em>, has become a dining-table favourite for good reason. The <strong>perfect</strong> accompaniment to any meal, the diminutive spherical vegetables brings joy to billions worldwide, be they fresh, frozen, canned or dried." Eg. <code>line-height: 2;</code></p>

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