CSS Font property is used to give the look of texts. By the use of CSS font property you can change the text size, color, style etc.CSS provide several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant etc.
The font properties are as below.
- font-family : The font-family property is used to specify the font to be used to render the text.
- font-style : The font-style property is used to make the font bold, italic or oblique.
- font-weight : The font-weight property is used to increase or decrease how bold or light a font appears.
- font-size: This property is used to increase or decrease the size of the font.
- font-variant: The font-variant property is used to create a small-caps effect.
- font-color: The font-color property is used to change the color of the text.
Set font-family :
There are many font family available like Arial, Helvetica, sans-serif, Times New Roman, Courier New, Courier, monospace, Georgia, Verdana, Arial, Helvetica, sans-serif, Geneva, Arial, Helvetica etc.
Syntax :
font-family:Geneva, Arial, Helvetica, sans-serif;
Example :
<html>
<head>
<title>Learn Css font family tutorials</title>
</head>
<body>
<p style="font-family:Verdana, Arial, Helvetica, sans-serif">Learn Css font family tutorials by aryatechno</p>
</body>
</html>
Output :
Learn Css font family tutorials by aryatechno
Set font-style :
font style are italic, normal, oblique.
Syntax :
font-style:oblique;
Example :
<html>
<head>
<title>Learn Css font style tutorials</title>
</head>
<body>
<p style="font-style:italic">Learn Css font style tutorials by aryatechno</p>
</body>
</html>
Output :
Learn Css font style tutorials by aryatechno
Set font-weight :
Syntax :
font-weight:bold;
Example :
<html>
<head>
<title>Learn Css font weight tutorials</title>
</head>
<body>
<p style="font-weight:bold">Learn Css font weight tutorials by aryatechno</p>
</body>
</html>
Output :
Learn Css font weight tutorials by aryatechno
Set font-size:
Syntax :
font-size:18px;
Example :
<html>
<head>
<title>Learn Css font size tutorials</title>
</head>
<body>
<p style="font-size:18px">Learn Css font size tutorials by aryatechno</p>
</body>
</html>
Output :
Learn Css font size tutorials by aryatechno
Set font-variant:
Syntax :
font-variant:small-caps;
Example :
<html>
<head>
<title>Learn Css font variant tutorials</title>
</head>
<body>
<p style="font-variant:small-caps">Learn Css font variant tutorials by aryatechno</p>
</body>
</html>
Output :
Learn Css font variant tutorials by aryatechno
Set font-color:
Syntax :
color:yellow;
Example :
<html>
<head>
<title>Learn Css font color tutorials</title>
</head>
<body>
<p style="color:yellow">Learn Css font color tutorials by aryatechno</p>
</body>
</html>
Output :
Learn Css font color tutorials by aryatechno
Comments