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
- w3-jumbo
- w3-xxxlarge
- w3-xxlarge
- w3-xlarge
- Times New Roman
- Arial
- Verdana
- None of the above
- Times New Roman
- Arial
- Verdana
- None of the above