(1)font-family :
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family:
"Times New Roman", Times, serif;
}
p.sansserif {
font-family:
Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown
in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph,
shown in the Arial font.</p>
</body>
</html>
(2) font-style :
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style:
normal;
}
p.italic {
font-style:
italic;
}
p.oblique {
font-style:
oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in
normal style.</p>
<p class="italic">This is a paragraph in
italic style.</p>
<p class="oblique">This is a paragraph in
oblique style.</p>
</body>
</html>
(3) font-size :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
(4) font-variant :
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant:
normal;
}
p.small {
font-variant:
small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Hege
Refsnes.</p>
<p class="small">My name is Hege
Refsnes.</p>
</body>
</html>
(5) font-weight:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight:
normal;
}
p.light {
font-weight:
lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a
paragraph.</p>
<p class="light">This is a
paragraph.</p>
<p class="thick">This is a
paragraph.</p>
<p class="thicker">This is a
paragraph.</p>
</body>
</html>
Comments
Post a Comment