Materialize CSS Typography
Materialize CSS provides several elements that can be used for the typography of the page:
- Headers
- Blockquotes
- Flow Text
Headers: Materialize CSS provides basic styling to be used on the header tags. The tags below show the available header tags that are styled by Materialize CSS:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Blockquotes: A Blockquote is used to give emphasis to a quote or citation. It can also be used for extra text hierarchy and emphasis.
<blockquote>
This is an example quotation using blockquote tag.
</blockquote>
Flow Text: The flow-text class can be used to fluidly resize the font size and line-height of the text that has to be scaled. To use flow-text, one needs to add the class flow-text to the needed tag. The below example shows the usage of this class.
<p class="flow-text">I am Flow Text</p>
Note: The standard font used by Materialize CSS is the Roboto 2.0 font. This font can be replaced by simply changing the font stack. This can be done by modifying the code below to include the needed font and add to the custom CSS.
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
Example:
HTML
<!DOCTYPE html> <html> <head> <!-- Include the Google Icon Font --> <link rel="stylesheet" href= <!-- Include compiled and minified Materialize CSS --> <link rel="stylesheet" href= <!-- Include jQuery --> <script type="text/javascript" </script> </head> <body> <h3>Headings</h3> <div class="card-panel green"> <!-- Using all the headers --> <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> <!-- Using blockquotes --> <h3>Blockquote</h3> <h5> <blockquote> <p> This is an example quotation that uses the blockquote tag. <br> This is a basic tutorial for the Materialize CSS Typography. </p> </blockquote> </h5> <div class="card-panel"> <h3>Free Flow</h3> <!-- Using the flow-text class --> <p class="flow-text"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and courses. GeeksforGeeks is a very fast growing community among programmers and have a reach of around 10 million+ readers globally. </p> </div> <!-- Include the compiled and minified Materialize JavaScript --> <script src= </script> </body> </html> |
Output:
Please Login to comment...