W3-css Font and Text classes

M2-R5.1 · Chapter 5: CSS Framework · 1 min read

1.) W3-CSS Font Classes

W3 css has two major class according to font - 

1.) w3-font

2.) w3-size 

1.) w3-fonts 

Verdana is the default font used in W3.CSS. Verdana has a good letter spacing, and is easy to read.

With W3.CSS you can use 4 different built-in font classes:

  • w3-serif
  • w3-sans-serif
  • w3-monospace
  • w3-cursive

Example -

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body class="w3-container">

<p class="w3-serif">
Hello this is paragraph 1 with serif font.
</p>
<p class="w3-sans-serif">
Hello this is paragraph 2 with sans-serif font.
</p>

<p class="w3-monospace">
Hello this is paragraph 3 with monospace font.
</p>

<p class="w3-cursive">
Hello this is paragraph 4 with cursive font.
</p>
</body>
</html>

2.) w3-size

w3-size classes use to resize font .It has multiple values - 

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