W3.CSSFonts

W3.CSS provides default font size that are easier to read as following:

  • Default font: Verdana
  • Default font size: 15px
  • Default line spacing: 1.5

In W3.CSS, headings are styled as:

Font for all heading level- “Verdana” and

font-size for <h1> - 36px, <h2> - 30px, <h3> - 24px, 

<h4> - 20px, <h5> - 18px, <h6> - 16px

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h1> Heading Level 1 </h1>
<h2> Heading Level 2 </h2>
<h3> Heading Level 3 </h3>
<h4> Heading Level 4 </h4>
<h5> Heading Level 5 </h5>
<h6> Heading Level 6 </h6>
</body>
</html>

Setting size of the fonts:

The w3-size class is used to set the size of the fonts. The size can take the value as:

  • w3-tiny
  • w3-small
  • w3-medium
  • w3-large
  • w3-xlarge
  • w3-xxlarge
  • w3-xxxlarge
  • w3-jumbo

Example:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
</head>
<body>
<div class="w3-container">
<p class="w3-tiny"> I am tiny size font. </p>
<p class="w3-small"> I am small size font.</p>
<p class="w3-medium"> I am medium size font. (Default size) </p>
<p class="w3-large"> I am large size font. </p>
<p class="w3-xlarge"> I am xlarge size font. </p>
<p class="w3-xxlarge"> I am xxlarge size font.</p>
<p class="w3-xxxlarge">I am xxxlarge size font.</p>
<p class="w3-jumbo"> I am jumbo size font. </p>
</div>
</body>
</html>

Qus. 1 : Which Class Produce Largest Font Size in W3.CSS

  1. w3-jumbo
  2. w3-xxxlarge
  3. w3-xxlarge
  4. w3-xlarge
Qus. 2 : Identify the default font used in W3.Font

  1. Times New Roman
  2. Arial
  3. Verdana
  4. None of the above
Qus. 3 : Identity the default font used in w3.font

  1. Times New Roman
  2. Arial
  3. Verdana
  4. None of the above

Programs

CCC Online Test Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Online Exam Quiz O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Best Website and Software Company in Allahabad Website development Company in Allahabad