Foundation CSS Base Typography Keystrokes

Last Updated : 22 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 that 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.

The Base Typography facilitates the clean, simple default style, with attractive styling to the basic typographical elements, that enhance the readability. It can be defined for the headings, paragraphs, lists, other inline components, etc, that helps to create an appealing style to the elements. The Keystrokes can be used to define the keyboard input & the text enclosed within <kbd> tag is typically displayed in the browser’s default monospace font. The <kbd> tag is used to annotate a single keystroke or a sequence of keystrokes.

Syntax:

<kbd> Content </kbd>

There is no specific class or attribute for the Keystrokes. We can simply use the <kbd> tag to the element, to add the Keystrokes functionality.

Example: This example illustrates the Foundation CSS Base Typography Keystrokes where we can use a specific keystroke to perform a particular task.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title> 
        Foundation CSS Base Typography 
    </title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1" /> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous" />  
</head> 
  
<body> 
    <center> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h5>Foundation CSS Base Typography Keystrokes</h5> 
        <p> Press <kbd>ctrl + esc</kbd> to exit the game. </p> 
    </center> 
</body> 
  
</html>