Click and drag to scroll left and right to view all 36 figures.
<!-- figure 10.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { width: 400px; height: 200px; background-color: lightgrey; }
p { width: 90%; height: 50%; background-color: lightpink; }
</style>
</head>
<body>
<h3>Box width and height</h3>
<div>
<h4>About Couscous</h4>
<p>Steamed couscous is much lighter and fluffier than the one simply soaked
in hot water. Steamed with lemon and thyme, it can be used as a tasty lunch
dish or a side dish with other salads.</p>
</div>
</body>
</html>
<!-- figure 10.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.size {
background-color: pink;
text-align: center;
writing-mode: horizontal-tb;
font-family: Arial;
block-size: 300px;
inline-size: 600px;
}
</style>
</head>
<body>
<h3>Logical width and height</h3>
<div>
<p class="size">In right-to-left top-to-bottom text-flow direction, block-size
specifies height and inline-size width</p>
</div>
</body>
</html>
<!-- figure 10.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div.courg { min-width: 400px; max-width: 630px; max-height: 120px; }
div.salmon { min-width: 400px; max-width: 630px; max-height: 120px; }
</style>
</head>
<body>
<h3>Width and height limiting</h3>
<h4>Steaming Courgette</h4>
<div class="courg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
aliquet facilisis dui, non... </div>
<h4>Salmon and Vegetables</h4>
<div class="salmon">Donec a mauris sapien. Suspendisse mollis feugiat sem, eget
porta...</div>
</body>
</html>
<!-- figure 10.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div.courg { min-width: 400px; max-width: 630px; max-height: 120px;
overflow: auto; }
div.salmon { min-width: 400px; max-width: 630px; max-height: 120px;
overflow: auto; }
</style>
</head>
<body>
<h3>Width and height limiting</h3>
<h4>Steaming Courgette</h4>
<div class="courg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
aliquet facilisis dui, non... </div>
<h4>Salmon and Vegetables</h4>
<div class="salmon">Donec a mauris sapien. Suspendisse mollis feugiat sem, eget
porta...</div>
</body>
</html>
<!-- figure 10.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 250px; border: 2px solid red; }
.normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }
</style>
</head>
<body>
<h2>White space</h2>
<p class="normal"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
<p class="nowrap"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
<p class="pre"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit ...
</p>
<p class="pre-wrap"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
<p class="pre-line"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
</body>
</html>
<!-- figure 10.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.overflow { min-width: 400px; max-width: 630px; max-height: 120px;
min-height: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
</style>
</head>
<body>
<h3>Horizontal overflow</h3>
<h4>Steaming Courgette</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet...</div>
<h4>Salmon and Vegetables</h4>
<div class="overflow">Donec a mauris sapien. Suspendisse mollis feugiat se...</div>
</body>
</html>
<!-- figure 10.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 2px solid red; }
p.nobreak { width: 15em; overflow-wrap: normal; }
p.break {
width: 15em; overflow-wrap: break-word; }
</style>
</head>
<body>
<h2>Overflow wrap</h2>
<p class="nobreak">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean rhoncus ipsum sem, nec euismod libero porttitor eu. Nulla
ut urnaaligulatinciduntcondimentumquissitametdiam. Morbi sed magna odio.
Nam non ultricies eros.</p>
<p class="break">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean rhoncus ipsum sem, nec euismod libero porttitor eu. Nulla
ut urnaaligulatinciduntcondimentumquissitametdiam. Morbi sed magna odio.
Nam non ultricies eros.</p>
</body>
</html>
<!-- figure 10.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 175px; border: 2px solid red; }
p.none { hypens: none; }
p.manual { hypens: manual; }
p.auto { hypens: auto; }
</style>
</head>
<body>
<h3>Hyphens</h3>
<p class="none">This example demonstrates the use of the hyphens property</p>
<p class="manual">This example demonstra­tes the use of the hyphens property</p>
<p class="auto">This example demonstrates the use of the hyphens property</p>
</body>
</html>
<!-- figure 10.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.part1 {
text-align: center;
font-size: 24px;
background-color: pink;
writing-mode: horizontal-tb;
min-block-size: 300px;
max-block-size: 900px;
min-inline-size: 400px;
max-inline-size-size: 1200px;
}
</style>
</head>
<body>
<h3>Logical min and max width and height</h3>
<div>
<p class="size">In right-to-left top-to-bottom text-flow direction,
min-block-size specifies minimum height, max-block-size maximum height,
min-inline-size minimum width, and max-inline-size maximum width</p>
</div>
</body>
</html>
<!-- figure 10.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
border: solid black 1px;
background-color: lightpink;
padding: 6px;
text-align: center;
}
.one { width: calc(100% - 90px); }
.two { width: calc(100% - 200px); }
</style>
</head>
<body>
<h2>cal() function</h2>
<div class="one">One</div>
<div class="two">Two</div>
</body>
</html>
<!-- figure 10.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.solid { border-style: solid; }
p.dashed { border-style: dashed; }
p.dotted { border-style: dotted; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
</style>
</head>
<body>
<h3>Shorthand border-style</h3>
<p class="solid">{ border-style: solid; }</p>
<p class="dashed">{ border-style: dashed; }</p>
<p class="dotted">{ border-style: dotted; }</p>
<p class="double">{ border-style: double; }</p>
<p class="groove">{ border-style: groove; }</p>
<p class="ridge">{ border-style: ridge; }</p>
<p class="inset">{ border-style: inset; }</p>
<p class="outset">{ border-style: outset; }</p>
</body>
</html>
<!-- figure 10.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.all { border-style: solid; }
p.top_hori_vert { border-style: dotted solid; }
p.top_vert_bot { border-style: hidden double dashed; }
p.top_right_bot_left { border-style: none dashed dotted solid; }
</style>
</head>
<body>
<h3>Space-separated values</h3>
<p class="all">{ border-style: solid; }</p>
<p class="top_hori_vert">{ border-style: dotted solid; }</p>
<p class="top_vert_bot">{ border-style: hidden double dashed; }</p>
<p class="top_right_bot_left">{ border-style: none dashed dotted solid; }</p>
</body>
</html>
<!-- figure 10.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border-top-style: double; }
p { border-right-style: solid; }
p { border-bottom-style: dashed; }
p { border-bottom-style: solid; }
</style>
</head>
<body>
<h3>Longhand border-style</h3>
<p>border-top-style: double; border-right-style: solid;
border-bottom-style: dashed; border-left-style: solid;</p>
</body>
</html>
<!-- figure 10.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.style {
writing-mode: horizontal-tb;
border: 5px solid blue;
border-block-start-style: dashed;
}
</style>
</head>
<body>
<h3>Logical longhand border-style</h3>
<div>
<p class="style">In right-to-left top-to-bottom text-flow direction,
border-block-start-style targets border top edge and styles it</p>
</div>
</body>
</html>
<!-- figure 10.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { border-style: solid; border-width: 2px; }
p.two { border-style: solid; border-width: 2px 10px; }
p.three { border-style: dashed; border-width: 0.3em thin 4px; }
p.four { border-style: ridge; border-width: thin medium thick 0.2em; }
</style>
</head>
<body>
<h3>Border width</h3>
<p class="one">{ border-style: solid; border-width: 2px; }</p>
<p class="two">{ border-style: solid; border-width: 2px 1em; }</p>
<p class="three">{ border-style: dashed; border-width: 0.2em thin 6px; }</p>
<p class="four">{ border-style: ridge; border-width: thin medium thick 0.2em; }</p>
</body>
</html>
<!-- figure 10.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.width {
writing-mode: horizontal-tb;
border: 1px solid darkorange;
border-block-start-width: 5px;
}
</style>
</head>
<body>
<h3>Logical border edges</h3>
<div>
<p class="width">In right-to-left top-to-bottom text-flow direction,
border-block-start-width targets border top edge and sets the border
thickness</p>
</div>
</body>
</html>
<!-- figure 10.32 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { border-style: solid; border-color: red; }
p.two { border-style: solid; border-color: red green; }
p.three { border-style: dashed; border-color: hsl(0,100%,50%) green rgb(0,0,255) ;}
p.four { border-style: ridge; border-color: hsla(0,100%,50%,0.3) green
rgba(0,0,255,0.3) #36d6ff; }
</style>
</head>
<body>
<h3>Border color</h3>
<p one="en-US">{ border-style: solid; border-color: red; }</p>
<p two="en-US">{ border-style: solid; border-color: red green; }</p>
<p three="en-US">{ border-style: dashed; border-color: hsl(0,100%,50%) green
rgb(0,0,255); }</p>
<p four="en-US">{ border-style: ridge; border-color: hsla(0,100%,50%,0.3) green
rgba(0,0,255,0.3) #36d6ff; }</p>
</body>
</html>
<!-- figure 10.34 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.color {
writing-mode: horizontal-tb;
border: 5px solid black;
border-block-start-color: red;
}
</style>
</head>
<body>
<h3>Logical border edges</h3>
<div>
<p class="color">In right-to-left top-to-bottom text-flow direction,
border-block-start-color targets border top edge and sets the border color</p>
</div>
</body>
</html>
<!-- figure 10.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.one { border-top: dashed red 2px; }
.two { border-top: solid 2px; }
.three { border-bottom: red 2px; }
</style>
</head>
<body>
<h3>border-top, border-bottom, border-right, border-left</h3>
<p class="one">{ border-top: dashed red 2px; }</p>
<p class="two">{ border-top: solid 2px; }</p>
<p class="three">{ border-bottom: red 2px; }</p>
</body>
</html>
<!-- figure 10.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.edge {
wrting-mode: horizontal-tb;
border: 1px solid black;
border-block-end: 5px dashed blue;
}
</style>
</head>
<body>
<h3>Logical border edges</h3>
<div>
<p class="edge">In right-to-left top-to-bottom text-flow direction,
border-block-end targets border bottom edge and applies the specified values</p>
</div>
</body>
</html>
<!-- figure 10.40 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { border: thick; }
p.two { border: thick dotted; }
p.three { border: 10px ridge green; }
</style>
</head>
<body>
<h3>Border property</h3>
<p class="one">{ border: thick; }</p>
<p class="two">{ border: thick dotted; }</p>
<p class="three">{ border: 10px ridge green; }</p>
</body>
</html>
<!-- figure 10.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
width: 400px;
border-style: solid;
border-width: 20px;
}
p.round {
border-image: url(images/star_oval.png) 30 30 30 30 round;
}
p.stretch {
border-image: url(images/star_oval.png) 30 30 30 30 stretch;
}
</style>
</head>
<body>
<p class="round">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce eget aliquet mi. Vivamus quam lectus, scelerisque id
iaculis feugiat, euismod a nulla. Nunc ex magna, sollicitudin
vel massa vitae, tristique accumsan diam. </p>
<p class="stretch">em ipsum dolor sit amet, consectetur adipiscing elit.
Fusce eget aliquet mi. Vivamus quam lectus, scelerisque id
iaculis feugiat, euismod a nulla. Nunc ex magna, sollicitudin
vel massa vitae, tristique accumsan diam. </p>
</body>
</html>
<!-- figure 10.45 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
width: 400px;
border-style: solid;
border-width: 20px;
border-image-source: url(images/star_oval.png);
border-image-slice: fill 30 30 30;
}
p.round { border-image-repeat: round; }
p.stretch { border-image-repeat: stretch; }
</style>
</head>
<body>
<h3>Border image</h3>
<p class="round">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
eget aliquet mi. Vivamus quam lectus, scelerisque id iaculis feugiat,
euismod a nulla. Nunc ex magna, sollicitudin vel massa vitae, tristique
accumsan diam. </p>
<p class="stretch">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
eget aliquet mi. Vivamus quam lectus, scelerisque id iaculis feugiat,
euismod a nulla. Nunc ex magna, sollicitudin vel massa vitae, tristique
accumsan diam. </p>
</body>
</html>
<!-- figure 10.47 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
border: 5px solid orange;
width: 300px;
border-radius: 20px;
}
</style>
</head>
<body>
<h3>Border radius</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
eget aliquet mi. Vivamus quam lectus, scelerisque id iaculis feugiat,
euismod a nulla. Nunc ex magna, sollicitudin vel massa vitae, tristique
accumsan diam.</p>
</body>
</html>
<!-- figure 10.49 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one {
border: 5px solid orange;
width: 300px;
border-radius: 25em/1.5em;
}
p.two {
border: 5px solid orange;
width: 300px;
border-radius: 20px 15em 30px 1em / 20px 15em 30px 35em;
}
</style>
</head>
<body>
<h3>Border two radii</h3>
<p class="one">{ border: 5px solid orange; width: 300px;
border-radius: 25em/1.5em; }</p>
<p class="two">{ border: 5px solid orange; width: 300px;
border-radius: 20px 15em 30px 1em / 20px 15em 30px 35em; }</p>
</body>
</html>
<!-- figure 10.51 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.nopad { width: 260px; border: medium ridge green; }
p.haspad { width: 260px; border: medium ridge green; padding: 12px; }
</style>
</head>
<body>
<h3>Padding</h3>
<p class="nopad">This paragraph element has no padding, so there is the
minimum space possible between its content and its border.</p>
<p class="haspad">This paragraph element has padding on all sides, so
there is space possible between its content and its border.</p>
</body>
</html>
<!-- figure 10.53 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 260px; border: medium ridge green; }
p.haspad {
writing-mode: Arial;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 12px;
padding-inline-end: 12px;
}
</style>
</head>
<body>
<h3>Padding for logical edges</h3>
<p class="nopad">This paragraph element has no padding, so there is the minimum
space possible between its content and its border.</p>
<p class="haspad">This paragraph element has padding on all sides, so there is
space possible between its content and its border.</p>
</body>
</html>
<!-- figure 10.54 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 2px solid blue; width: 250px; padding: 5px; }
p.one { margin: auto; }
p.two { margin: 20px 0px 0 0px; }
p.three { margin: 20px 0px 0 -20px; }
p.four { margin: 20px 0px 0 20px; }
</style>
</head>
<body>
<h3>Margin</h3>
<p class="one">margin: auto; </p>
<p class="two">margin: 20px 0 0 0px; </p>
<p class="three">margin: 20px 0 0 -20px; </p>
<p class="four">margin: 20px 0 0 20px; </p>
</body>
</html>
<!-- figure 10.56 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 2px solid blue; width: 250px; padding: 5px; }
p.margin {
writing-mode: horizontal-tb;
margin-inline-start: 30px;
}
</style>
</head>
<body>
<h3>Margin via logical property</h3>
<p>No margin</p>
<p class="margin">margin-inline-start: 30px;</p>
</body>
</html>
<!-- figure 10.59 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
* { box-sizing: border-box; }
body { width: 50%; padding: 20px; }
div { text-align: center; }
.parent { width: 50%; border: 2px solid black; }
.child1 { width: 90%; padding: 20%; border: 2px solid red; }
.child2 { width: 50%; padding: 20px; border: 2px solid gold; }
</style>
</head>
<body>
<div class="parent">Parent
<p class="child1">Child 1</p>
<p class="child2">Child 2</p>
</div>
</body>
</html>
<!-- figure 10.61 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
height: 350px;
width: 350px;
border: 1px solid black;
overflow: auto;
resize: both;
}
</style>
</head>
<body>
<h3>Box Resizing</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque mollis dolor eu...</div>
</body>
</html>
<!-- figure 10.63 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 1px solid black; padding: 20px; width: 150px; }
p.one { box-shadow: 5px 5px 2px 0px #4d4d4d; }
p.one_up { box-shadow: -5px -5px 2px 0px #4d4d4d; }
p.one_blur { box-shadow: 10px 10px 10px 5px #4d4d4d; }
p.one_center { box-shadow: inset 0px 0px 10px 5px #4d4d4d; }
p.one_center_no_blur { box-shadow: 0px 0px 0px 5px #4d4d4d; }
p.multi { box-shadow: inset 0 0 1em 0.5em orange, 0 0 1em 0.5em blue #4d4d4d; }
</style>
</head>
<body>
<p class="one">{ 5px 5px 2px 0px #4d4d4d; }</p>
<p class="one_inset">{ -5px -5px 2px 0px #4d4d4d; }</p>
<p class="one_blur">{ 10px 10px 10px 5px #4d4d4d; }</p>
<p class="one_center">{ inset 0px 0px 10px 5px #4d4d4d; }</p>
<p class="one_center_no_blur">{ 0px 0px 0px 5px #4d4d4d; }</p>
<p class="multi">{ inset 0 0 1em 0.5em orange, 0 0 1em 0.5em blue; }</p>
</body>
</html>
<!-- figure 10.65 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { outine: 1px dashed black; }
p.two { outine: 1px dashed black; border: 1px solid red; }
</style>
</head>
<body>
<h3>Outline</h3>
<p class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
a nisl scelerisque, iaculis nulla eget, sodales augue. Nunc
volutpat est sit amet massa semper varius. Morbi pellentesque
pharetra turpis ac commodo.</p>
<p class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
a nisl scelerisque, iaculis nulla eget, sodales augue. Nunc
volutpat est sit amet massa semper varius. Morbi pellentesque
pharetra turpis ac commodo.</p>
</body>
</html>
<!-- figure 10.67 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
P.one {
outline: dashed thin;
outline-offset: 5px;
border: 1px solid red;
}
</style>
</head>
<body>
<h3>Outline offset</h3>
<p class="one">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vivamus a nisl scelerisque, iaculis nulla eget, sodales augue. Nunc
volutpat est sit amet massa semper varius. Morbi pellentesque pharetra turpis
ac commodo.</p>
</body>
</html>
<!-- figure 10.69 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { font-family: Arial; text-align: center; }
ul li {
display: inline;
background-color: yellow;
box-shadow: 2px 2px 2px #4d4d4d;
padding: 8px;
}
ul li a { text-decoration: none; }
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about_us.html">About us</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contact_us.html">Contact us</a></li>
</ul>
</body>
</html>
<!-- figure 10.71 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { font-family: Arial; text-align: center; }
ul li {
display: inline;
background-color: yellow;
box-shadow: 2px 2px 2px #4d4d4d;
padding: 8px;
}
ul li a { text-decoration: none; }
li.omit { display: none; }
</style>
</head>
<body>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="about_us.html">About us</a></li>
<li><a href="products.html">Products</a></li>
<li class="omit"><a href="downloads.html">Downloads</a></li>
<li><a href="contact_us.html">Contact us</a></li>
</ul>
</body>
</html>