HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Font-Shorthand</title>
</head>
<body>
<div class="container">
<div id="css-font-shorthand">
<h2>CSS Font-Shorthand</h2>
<p>
<span class="block property"><span class="blue">font</span>:</span> <span class="block blue style">italic</span> <span class="block blue variant">small-caps</span> <span class="block blue weight">bold</span> <span class="block size"><span class="purple">16</span><span class="magenta">px</span></span><span class="slash">/</span><span class="block line-height"><span class="purple">1.5</span><span class="magenta">em</span></span> <span class="block yellow family">"Times New Roman"</span>, <span class="block fallback"><span class="blue">Times</span>, <span class="blue">serif</span></span>;
<span class="tstyle">Style</span><span class="tvariant">Variant</span><span class="tweight">Weight</span><span class="optional">Optional</span><span class="order">Prefered Order</span>
</p>
</div> <!-- end css-font-shorthand -->
</div> <!-- end container -->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #272822;
color: #fff;
font: 16px/36px Courier, monospace;
margin: 0;
}
h2 {
font-weight: normal;
margin: 0;
}
p { margin: 0; }
.container {
height: 276px;
left: 50%;
margin: -138px 0 0 -400px;
position: absolute;
top: 50%;
width: 800px;
}
/* ---------- CSS-RULESET ---------- */
#css-font-shorthand {
margin: auto;
}
#css-font-shorthand h2 {
font-size: 30px;
line-height: 48px;
margin-bottom: 120px;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
}
#css-font-shorthand p {
position: relative;
}
/* ---------- CLASSES ---------- */
.block {
border: 1px solid #fff;
padding: 4px;
}
.blue { color: #48beef; }
.yellow { color: #e6db74; }
.magenta { color: #f92672; }
.purple { color: #ae81ff; }
.property:before,
.style:before,
.variant:before,
.weight:before,
.size:before,
.slash:before,
.line-height:before,
.family:before,
.fallback:before,
.tstyle,
.tvariant,
.tweight,
.optional,
.order {
color: #fff;
font-size: 14px;
position: absolute;
}
.property:after,
.style:before,
.style:after,
.tstyle:after,
.variant:before,
.variant:after,
.tvariant:after,
.weight:before,
.weight:after,
.tweight:after,
.size:after,
.slash:after,
.line-height:after,
.family:after,
.fallback:after,
.optional:after,
.optional:before,
.order:before,
.order:after {
background: #fff;
content: "";
position: absolute;
}
.property:before {
content: "Property";
left: -2px;
top: -53px;
}
.property:after {
height: 29px;
left: 30px;
top: -25px;
width: 1px;
}
.optional {
left: 173px;
top: -53px;
}
.optional:before {
height: 1px;
left: -69px;
top: 40px;
width: 191px;
}
.optional:after {
height: 12px;
left: 31px;
top: 28px;
width: 1px;
}
.order {
left: 156px;
top: 81px;
}
.order:before {
height: 1px;
left: -52px;
top: -1px;
width: 191px;
}
.order:after {
height: 12px;
left: 48px;
top: 0;
width: 1px;
}
.tstyle {
left: 84px;
top: 38px;
}
.tstyle:after {
height: 12px;
left: 20px;
top: 30px;
width: 1px;
}
.style:before {
height: 12px;
left: 104px;
top: -12px;
width: 1px;
}
.style:after {
height: 12px;
left: 104px;
top: 36px;
width: 1px;
}
.tvariant {
left: 177px;
top: 38px;
}
.tvariant:after {
height: 12px;
left: 27px;
top: 30px;
width: 1px;
}
.variant:before {
height: 12px;
left: 204px;
top: -12px;
width: 1px;
}
.variant:after {
height: 12px;
left: 204px;
top: 36px;
width: 1px;
}
.tweight {
left: 269px;
top: 38px;
}
.tweight:after {
height: 12px;
left: 25px;
top: 30px;
width: 1px;
}
.weight:before {
height: 12px;
left: 294px;
top: -12px;
width: 1px;
}
.weight:after {
height: 12px;
left: 294px;
top: 36px;
width: 1px;
}
.size:before {
content: "Size";
left: 340px;
top: 81px;
}
.size:after {
height: 60px;
left: 354px;
top: 36px;
width: 1px;
}
.slash:before {
content: "Slash";
left: 350px;
top: -53px;
}
.slash:after {
height: 25px;
left: 371px;
top: -25px;
width: 1px;
}
.line-height:before {
content: "Line-Height";
left: 390px;
top: 81px;
}
.line-height:after {
height: 57px;
left: 420px;
top: 36px;
width: 1px;
}
.family:before {
content: "Family";
left: 530px;
top: 81px;
white-space: nowrap;
}
.family:after {
height: 57px;
left: 550px;
top: 36px;
width: 1px;
}
.fallback:before {
content: "Fallback";
left: 700px;
top: 81px;
white-space: nowrap;
}
.fallback:after {
height: 57px;
left: 724px;
top: 36px;
width: 1px;
}
