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>