CSS Font Styles (font-family, font-size, font-weight, font-variant)

CSS Font Styles (font-family, font-size, font-weight, font-variant): The main purpose of a website is to provide users with the information they need. Text that plays a key role in displaying information on any website. Everything on the site where the text will be used, the size of the shape, everything is controlled through the CSS font. There are several things to be mentioned in the Declaration for creating text font styles.

CSS Font Styling Types

CSS Font Styles are used to specify the difference between the text on the web page. The following are the types of Font Styling that helps to develop your web page more attractive.

Font-Family
Font-Size
Font-Variant
Font-Weight

font-family

Font family is used to indicating the type of font used in the text. A declaration is required to select Arial font for text font-family: Arial; Similarly, to select Tahoma font, declare font-family: Tahoma. Many times the text is supplemented by multiple font declarations such as font-family: Verdana, Geneva, Tahoma. When the browser does not support the first font, the text will be displayed in the second or 3rd font.

Font Family Example

<html>
<head>
<title> www.tutorials.freshersnow.com </title>
<style>
body {background: # 090}
h1 {font-family: Arial;}
h2 {font-family: Tahoma; colour: # C00}
p {font-family: Verdana, Geneva, Tahoma}
</style>
</head>
<body>
<h1> This text is written by Arial font. </h1>
<h2> This text is written by Tahoma font. </h2>
<p> Normal, this text is written by Verdana font, but when the browser does not support Verdana font, this text will be displayed by Geneva font or Tahoma font. </p>
</body>
</html>

Font Family Example Output

Open a Notepad and enter the code at the top and save the file from the File menu by clicking on Save as type: Save as type: All files, save the index.html file with Mozilla Firefox or Google Chrome and check.

font-size

Font size is used to indicate the size and size of fonts used in text. To select 25px fonts for texts, declare font-size: 25px; Similarly, to select 20px fonts, declare font-size: 20px; The size or size of fonts used in text can be given as a percentage, not in pixels or in px, in this case the declaration should be like font-size: 100%. There are several other methods of font size declaration of text such as font-size: large; font-size: medium; font-size: small; font-size:small; font-size: xx-large; font-size: large font-size: x-large; font-size: x-small; font-size: xx- small; Etc.

Font Size Example

<html>
<head>
<title> www.tutorials.freshersnow.com</title>
<style>
body {background: # 090}
p {font-size: 25px;}
h3 {font-size: 20px;}
#100 {font-size: 100%}
# 250 {font-size: 150%}
# xx-large {font-size:xx-large;}
</style>
</head>
<body>
<p> The font size of the text is 25px. </ p>
<h3> The font size of the text is 20px. </h3>
<p id = "100"> The font size of the text is 100%. </p>
<p id "250"> The font size of the text is 150%. </p>
<p id "xx-large"> The font size of the text is xx-
large </p>
</body>
</html>

Font Size Example Output

font-variant

If there is a need to display a particular title on a web page in such a manner, where all the letters of the text normally would be uppercase, but the font size of the uppercase letters in the place where the lowercase letter is smaller than the normal font size is used, in this case, the font-variant is used. The declaration is required to create a variant style for this Is an Example of Variant Text font-variant: small-caps;

Font Variant Example

<html>
<head>
<title> www.tutorials.freshersnow.com </title>
<style>
body {background: # 090}
#variant {font-variant: small-caps; colour: #C00;}
</style>
</head>
<body>
<h2> This is an example of normal h2 text. </ h2>
<h2 id "variant"> This is an example of h2 varianttext. </ h2>
</body>
</html>

Font Variant Example Output

font-weight

Font weight is used to determine how thick or thin the text used on a web page should be. Declaration to create bold text should be font-weight: bold; Numbers can be used to determine how thick the text is, such as font-weight:900; Or font-weight:800; Also font-weight: lighter; And font-weight: bolder; Is used.

Font Weight Example

<html>
<head>
<style>
body {background: # 090}
#normal {font-weight: normal;}
#bold {font-weight: bold;}
#lighter {font-weight: lighter;}
#ni{font-weight: 900;}
</style>
</head>
<body>
<p id= "normal"> This is an example of normal text. </p>
<p id= "bold"> This is an example of bold text. </p>
<p id ="lighter"> This is an example of lighter text. </p>
<p id = "ni"> This is an example of 900 text. </p>
</body>
</html>