Skip to navigation

Bold, italics, case, and line height

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


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Bold, italics, case, and line-height</title>
		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;
	<p id="p1"><a href=""><code>font-weight</code></a>: Bold or light text. Eg. <code>font-weight: bold;</code></p>
	<p id="p2"><a href=""><code>font-style</code></a>: Italic or oblique text. Eg. <code>font-style: italic;</code></p>
	<p id="p3"><a href=""><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=""><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=""><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=""><img src="" alt="HTML Dog"></a></p>


View original