CSS – Fonts
CSS – Fonts
Using CSS, various font properties can be set to contents or in an HTML element. The properties are described as below,
font-family: This property changes the font-face like Arial, Georgia, etc.
font-style: This property changes the style of the font like italic or oblique.
font-weight: It is used to change the font as bold, bolder or lighter.
font-size: It specifies to increase or decrease the font-size.
font-variant: It determines the small-caps effect of the font.
Shorthand property: The font property can be used to specify multiple properties at once.
Example 1:
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,Arial;">
This text is rendered in either georgia, garamond, or the
default Arial font depending on which font we have at your system.
</p>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:700;">
This font is 700 weight.
</p>
<p style = "font-size:24px;">
This font size is 24 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>
Output:
Example 2: Specify multiple properties at once.
<html>
<head>
</head>
<body>
<p style = "font:oblique small-caps bolder 25px Arial;">
Applying all the properties on the text at once.
</p>
</body>
</html>
Output:
Quiz :
Quiz 1: What are the different properties of CSS fonts?
Quiz 2: Give an example to specify multiple properties at once.
