CSS
[Link]
Fonts
⚫ CSS fonts offer a range of options to style the text content within HTML
elements.
⚫ It gives you the ability to control different aspects of fonts, including font
family, font size, font weight, font style, and more.x
❖ Font Properties
➢ CSS font-family Property: This CSS property is used to provide a
comma-separated list of font families.
It sets the font-face for the text content of an element.
This property can hold multiple font names as a fallback system, i.e., if one
font is unsupported in the browser, then others can be used.
The different font-family is used for making attractive web pages.
There are two types of font-family names in CSS, which are defined
below:
1. family-name: It is the name of the font-family such as "Courier", "Arial",
"Times", etc.
2. generic-family: It is the name of the generic family that includes five
categories, which are "serif", "sans-serif", "cursive", "fantasy", and
"monospace". It should be placed at last in the list of the font family
names.
Let's define the generic-family categories.
a) serif: It is mainly used when we are writing the text for printing, such as
books, magazines, newspapers, etc.
©Topperworld
CSS
It includes the font-family such as Georgia, Garamond, Times New Roman,
Minion, and many more.
b) sans-serif: It is a modern, formal, and simple style. It is widely used but
most often in the digital form of text.
It includes the font-family that are Arial, Calibri, Verdana, Futura, Lato, and
many more.
c) cursive: It is mainly used for writing the invitation letter, informal
messages, etc.
It is like a handwritten text which is written by a pen or a brush.
The font-family that it includes is Insolente, Corsiva, Flanella, Belluccia,
Zapfino, and many more.
d) monospace: It is for instructions, mailing address, typewritten text, etc.
It includes the font-family that is Monaco, SimSun, Courier, Consolas,
Inconsolata, and many more.
e) fantasy: It makes the text expressive, decorative, and impactful.
It includes the font-family that is Impact, Copperplate, Cracked, Critter, and
many more.
Syntax:
font-family: "font family name";
Example:
©Topperworld
CSS
<!DOCTYPE html>
<html>
<head>
<title>font-family property</title>
<style>
.tw {
font-family: "Times New Roman";
font-weight: bold;
font-size: 40px;
color: #090;
text-align: center;
}
.topper {
font-family: "Comic Sans MS", cursive,
sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="tw">Topper World</div>
<div class="topper">
A computer science portal for students.
</div>
</body>
</html>
©Topperworld
CSS
Output:
➢ CSS font-style Property: If we want to give design to any type of text
then we can make use of CSS font-style property.
Syntax:
font-style: style name;
➢ CSS font-weight Property: The font-weight property of the CSS is
used to set the weight or thickness of the font being used with the HTML
Text.
➢ CSS font-variant Property: The font-variant property is used to
convert all lowercase letters into uppercase letters.
➢ CSS font-size Property: The font-size property in CSS is used to specify
the height and size of the font. It affects the size of the text of an element.
Its default value is medium and can be applied to every element. The
values of this property include xx-small, small, x-small, etc.
The font-size can be relative or absolute.
1) Absolute-size
It is used to set the text to a definite size. Using absolute-size, it is not
possible to change the size of the text in all browsers. It is advantageous
when we know the physical size of the output.
©Topperworld
CSS
2) Relative-size
It is used to set the size of the text relative to its neighboring elements. With
relative-size, it is possible to change the size of the text in browsers.
These are the possible values that can be used to set the font size:
Font Size Value Description
xx-small used to display the extremely small text size.
x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.
smaller used to display comparatively smaller text size.
larger used to display comparatively larger text size.
size in pixels or % used to set value in percentage or in pixels.
➢ CSS font-stretch Property: The font-stretch property in CSS allows us
to select a normal, expanded, or condensed face from the font's family. This
property sets the text wider or narrower compare to the default width of the
font. It will not work on any font but only works on the font-family that has
a width-variant face.
©Topperworld
CSS
This CSS property only works for the fonts with additional faces like expanded
and condensed faces; otherwise, it will be affectless for the fonts that don't have
condensed or expanded faces.
Property Values
The property values of this CSS property are tabulated as follows:
Keyword Description
normal This is the default value, which does not stretch any font.
semi- It slightly condensed the text characters of the element. This
condensed value makes the text narrower than normal but not narrower
than condensed.
condensed This value makes the text narrower than semi-condensed but
not narrower than extra-condensed.
extra- This value makes the text narrower than condensed but not
condensed narrower than ultra-condensed.
ultra- This value makes the text extremely narrowed.
condensed
semi- It slightly widened the text characters of the element. This value
expanded makes the text wider than normal but not wider than expanded.
expanded This value makes the text wider than semi-expanded but not
wider than extra-expanded.
extra- This value makes the text wider than expanded but not wider
expanded than ultra-expanded.
ultra- This value makes the text extremely wider.
expanded
©Topperworld
