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>

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