Apply Font Properties Using CSS – Class 10 Computer Applications | CBSE Notes & Examples
In this section, we are going to talk about font and their related properties in CSS Context. Different font properties that are going to be discussed under this section include:
- Font-family
- Font-style
- font-variant
- font-size
- font-weight
Font-family values arial, verdana, sans-sarif etc.
font style values: oblique, italic etc.
font variant values: small-caps, normal etc.
font-weight values: normal, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 etc.
font-size: example:
h1{font-size: 30px;}
strong{font-size: 16pt;}
li{font-size: 120%;}
p{font-size 2em;}
The meaning of different font sizes is given below
px – pixel – absolute – A single dot on the monitor.
pt – point – absolute – A point is 1/72 of an inch.
em – ems – relative – One em is equal to the font size for the current font. 3 em means triple the size.
% – Percent – relative – A percent specifies a value relative to the current value.
HTML Code showing the font properties using the css.
.<HTML>
<HEAD>
<TITLE> Fonts Properties </TITLE>
<LINK REL=”STYLESHEET” TYPE=”TEXT/CSS” HREF=”SAMPLE4.CSS”>
</HEAD>
<BODY>
<h1>Font Family :This is Heading Level One </h1>
<h2> font style oblique:This is Heading Level One </h2>
<h3font variant small caps: This is Heading Level One </h3>
<h4>Font-weight: 800: This is Heading Level One </h4>
<h5>font size: 30 px: This is Heading Level One </h5>
<h6> This is Heading Level One </h6>
</BODY>
</HTML>
CSS Code: Applies various font properties
h1 {font-family: arial, verdana, sans-sarif;}
h2{font-family: arial; font-style: oblique;}
h3{font-variant: small-caps;}
h4{font-weight: 800;}
h5{font-size; 30px;}
Output of the above program:
Instructions to run the program:
- First save the HTML Program in Notepad using the .html extension.
- Then save the CSS Code in Notepad using the .css extension (sample4.css in this example).
- Then see your output in the web browser.