Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS Fonts

Setting the Font of Text

The following CSS code example shows how to set the font of text.

<html>
<head>
<style type="text/css">
h1 {font-family: times}
p {font-family: courier}
p.arial {font-family: arial}

</style>
</head>
<body>
<h1>
This is a heading with a times font.
</h1>
<p>
This is a paragraph with a courier font.
</p>
<p>
This is a paragraph with an arial font.
</p>
</body>
</html>

Click on CSS Font Example to view the web page the above code produces.


Setting the Font Size

The following CSS code example shows how to set the size of the font.

<html>
<head>
<style type="text/css">
h1 {font-size: 100%}
h1.hfont1 {font-size: 150%}
p {font-size: 100%}
p.pfont1 {font-size: 150%}

</style>
</head>
<body>
<h1>
This is header 1 with a font size of 100%
</h1>
<h1 class="hfont1">
This is header 1 with a font size of 150%
</h1>
<p>
This is a paragraph with a font size of 100%
</p>
<p class="pfont1">
This is a paragraph with a font size of 150%
</p>
</body>
</html>

Click on CSS Font Example to view the web page the above code produces.


Setting the Style of the Font

The following CSS code example shows how to set the style of the font.

<html>
<head>
<style type="text/css">
h1.italic {font-style: italic}
h1.normal {font-style: normal}
h1.oblique {font-style: oblique}

</style>
</head>
<body>
<h1 class="italic">
This is header 1
</h1>
<h1 class="normal">
This is header 1
</h1>
<h1 class="oblique">
This is a paragraph
</h1>
</body>
</html>

Click on CSS Font Example to view the web page the above code produces.


Setting the Boldness of the Font.

The following CSS example shows how to set the boldness of a font.

<html>
<head>
<style type="text/css">
p.normalfont {font-weight: normal}
p.thickfont {font-weight: bold}
p.thickerfont {font-weight: 900}

</style>
</head>
<body>
<p class="normalfont">
This paragraph has a normal font.
</p>
<p class="thickfont">
This paragraph has a bold font-weight.
</p>
<p class="thickerfont">
This paragraph has a font-weight of 900.
</p>
</body>
</html>

Click on CSS Font Example to view the web page the above code produces.


Setting the Variant of the Font.

The font variant property displays text in a small-caps font or a normal font.
The following CSS code example shows how to set the variant of the font.

<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small-caps {font-variant: small-caps}

</style>
</head>
<body>
<p class="normal">
This paragraph has a normal variant font style.
</p>
<p class="small-caps">
This paragraph has a small-caps variant font style.
</p>
</body>
</html>

Click on CSS Font Example to view the web page the above code produces.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details