Skip to content
Related Articles

Related Articles

Foundation CSS Base Typography Print Styles

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 14 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 Print Styles developed by HTML5 that provides some basic print-specific styles. If you print the web page developed by Foundation, then the page will –

  • Remove the background, box-shadow, and text-shadow of the page.
  • Add borders to the <blockquote> and <pre> elements.
  • Page cleanup and window minimization of the web page.
  • Append link URLs after the anchor text of the page.

Foundation CSS Base Typography Print Style Classes:

  • show-for-print: This class is used to display the content at printing time.
  • hide-for-print: This class is used to hide the content at printing time.

Syntax:

<div class="show-for-print"> Content... </div>
<div class="hide-for-print"> Content... </div>

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Foundation CSS Base Typography Print Styles
    </title>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h2>
        Foundation CSS Base Typography Print Styles
    </h2>
  
    <h4 class="show-for-print">
        GeeksforGeeks: A computer science portal
    </h4>
  
    <p class="hide-for-print">
        A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science
        and programming articles...
    </p>
  
</body>
  
</html>

Output:

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Foundation CSS Base Typography Print Styles
    </title>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h2>
        Foundation CSS Base Typography Print Styles
    </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>
  
        <div class="show-for-print">
            <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>
        </div>
  
        <div class="hide-for-print">
            <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>
    </div>
</body>
  
</html>

Output:

Reference: https://get.foundation/sites/docs/typography-base.html#print-styles


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!