CSS Font Style Example

Font style="font-family"

<html>
<head>
</head>
<body>
  <p style="font-family:Arial, Helvetica, sans-serif;">Font family is Arial</p>
  <p style="font-family:Verdana, Arial, Helvetica;">Font family is Verdana</p>
  <p style="font-family:'Courier New', Courier, monospace;">Font family is Courier</p>
  <p style="font-family:'Times New Roman', Times, serif;">Font family is Time New Roman</p>
</body>
</html>

Font family is Arial

Font family is Verdana

Font family is Courier

Font family is Time New Roman

Font style="font-size"

<html>
<head>
</head>
<body>
  <p style="font-size:larger;">Font is Larger</p>
  <p style="font-size:medium;">Font is Medium</p>
  <p style="font-size:smaller;">Font is Smaller</p>
  <p style="font-size:16px;">Font is 16px Size</p>
</body>
</html>

Font is Larger

Font is Medium

Font is Smaller

Font is 16px Size

Font style="font-style"

<html>
<head>
</head>
<body>
  <p style="font-style:normal;">Font style is Normal</p>
  <p style="font-style:italic;">Font style is Italic</p>
  <p style="font-style:oblique;">Font style is Oblique</p>
</body>
</html>

Font style is Normal

Font style is Italic

Font style is Oblique

Font style="text-align"

<html>
<head>
</head>
<body>
  <p style="text-align:left;">Text align is Left</p>
  <p style="text-align:center;">Text align is Center</p>
  <p style="text-align:right;">Text align is Right</p>
</body>
</html>

Text align is Left

Text align is Center

Text align is Right

Font style="text-decoration"

<html>
<head>
</head>
<body>
  <p style="text-decoration:blink;">Text decoration is blink</p>
  <p style="text-decoration:line-through;">Text decoration is line through</p>
  <p style="text-decoration:overline;">Text decoration is overline</p>
  <p style="text-decoration:underline;">Text decoration is underline</p>
</body>
</html>

Text decoration is blink

Text decoration is line through

Text decoration is overline

Text decoration is underline