Foundation CSS Base Typography Header

Last Updated : 16 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Foundation CSS Base Typography is used to add the default styles to make the elements more attractive. The base typography makes life easier by providing simple and attractive elements and classes to build an attractive web page.

Foundation CSS Base Typography Header is used to add header styles on all header elements. The header element contains six different header elements (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>) that are used to represents for different sizes. Here <h1> element represent large size text and <h6> represents small size text content.

Foundation CSS Base Typography Header Elements:

<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>: This elements is used to represents the heading and subheading of the contents.

Syntax:

<h1> Content... <h1>

Example 1: In this example, we will describe the use of Foundation CSS Base Typography Header.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Base Typography Header  
    </title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h2> 
            Foundation CSS Base Typography Header 
        </h2> 
  
        <div class="callout success"> 
            <h1>Heading 1</h1> 
            <h2>Heading 2</h2> 
            <h3>Heading 3</h3> 
            <h4>Heading 4</h4> 
            <h5>Heading 5</h5> 
            <h6>Heading 6</h6> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Foundation CSS Base Typography Header

Example 2: In this example, we will describe the use of Foundation CSS Base Typography Header.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Base Typography Header 
    </title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2> 
        Foundation CSS Base Typography Header 
    </h2> 
  
    <div class="callout success"> 
        <h1>GeeksforGeeks</h1> 
        <p> 
            A Computer Science portal for geeks.  
            It contains well written, well thought  
            and well explained computer science  
            and programming articles... 
        </p> 
        <h3>HTML</h3> 
        <p> 
            HTML stands for HyperText Markup  
            Language. It is used to design web  
            pages using a markup language. It  
            is the combination of Hypertext  
            and Markup language. 
        </p> 
  
        <h5>JavaScript</h5> 
        <p> 
            JavaScript is the world most popular  
            lightweight, interpreted compiled  
            programming language. It is also  
            known as scripting language for web  
            pages. 
        </p> 
  
    </div> 
</body> 
  
</html>