Foundation CSS Base Typography Definition Lists
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 the life easier by providing simple and attractive elements and classes to build the attractive web page.
Foundation CSS Base Typography Definition List is used to add title and its definition using <dl>, <dt>, and <dd> elements. The <dl> tag creates the description list containing <dt> and <dd> elements.
Foundation CSS Base Typography Definition List Tags:
- <dl> Tag: This tag is used to represent the description list.
- <dt> Tag: This tag is used to specify the description list. It is used inside the <dl> element.
- <dd> Tag: This tag is used to denote the description or definition of an item in a description list.
Syntax:
<dl>
<dt> ... </dt>
<dd> ... </dd>
</dl>
Example 1: In this example, we will describe the use of Foundation CSS Base Typography Definition List.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Base Typography Definition Lists
</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
Foundation CSS Base Typography Definition Lists
</h2>
<hr>
<dl>
<dt>GeeksforGeeks</dt>
<dd>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles...
</dd>
</dl>
<dl>
<dt>HTML</dt>
<dd>
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.
</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd>
JavaScript is the world most popular
lightweight, interpreted compiled
programming language. It is also
known as scripting language for web
pages.
</dd>
</dl>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: In this example, we will describe the use of Foundation CSS Base Typography Definition List.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Base Typography Definition Lists
</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
Foundation CSS Base Typography Definition Lists
</h2>
<hr>
<dl>
<h3>GeeksforGeeks</h3>
</a></dt>
<dd>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles...
</dd>
</dl>
<hr>
<dl>
<h3>HTML</h3>
</a></dt>
<dd>
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.
</dd>
</dl>
<hr>
<dl>
<h3>JavaScript</h3>
</a></dt>
<dd>
JavaScript is the world most popular
lightweight, interpreted compiled
programming language. It is also
known as scripting language for web
pages.
</dd>
</dl>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/typography-base.html#definition-lists
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...