CSS font properties
With CSS font properties, you can specify the font a text will be displayed in, the size of text, and more.
This lesson focuses on:
- Setting text font
- Setting text size
Setting text font
Text font is set with the font-family property. You can specify a list of fonts with this property. The web browser will use the first font it recognizes.
Example:
<html>
<head>
<title>Background properties</title>
<style type="text/css">
<!--
h1 {font-family: helvetica, verdana, arial, sans-serif;}
p {font-family: helvetica, verdana, arial, sans-serif;}
-->
</style>
</head>
<body>
<h1>Some text</h1>
<p>
Some more text
</p>
</body>
</html>
Output:
Some text
Some more text
In the above example, text specified with the <h1> heading tag, and the <p> tag is specified to have a font family of helvetica, verdana, arial, and sans-serif. Which ever of these fonts is recognized by the browser first is the one that will be used.
Setting text size
Text size is set with the font-size attribute. You can specify a size from a set of prefixed sizes or set your own size for text.
Some prefixed text sizes:
- x-small
- small
- medium
- large
- x-large
Example:
<html>
<head>
<title>Setting a background image</title>
<style type="text/css">
<!--
h1 {font-size: 40px;}
p {font-size: large;}
-->
</style>
</head>
<body>
<h1>Some text</h1>
<p>
A sentence in a paragraph. Another sentence in a paragraph.
</p>
</body>
</html>
Output:
Some text
A sentence in a paragraph. Another sentence in a paragraph.
In the above example, the font-size of text declared with the <h1> heading tag is set to be 40 pixels. The font size of text declared with the <p> tag is set to be "large" - one of a prefixed set of sizes.
