Home >Web Front-end >CSS Tutorial >Getting Started with CSS Typography Title Utility
Getting Started with CSS Typography Title Utility
- WBOYforward
- 2023-09-04 08:01:131141browse
Typography is an important part during the creation of websites and applications. It is mainly used to display most of the content to the user. It determines the tone and tone of your website’s content.
So, it is likely to affect the overall user experience. The title in any website is the center of attraction for any user. Therefore, it is very important that it looks perfect to improve the readability of your website or app. In this article, we will create a header using Primer CSS.
The Chinese translation ofPrimer CSS
is:Primer CSS
Primer CSS is a versatile and popular CSS framework that provides developers with easy-to-use typography capabilities. It is an open source design system created by GitHub. Using typography utilities will enhance the visual appearance and consistency of your website.
Typesetting Title utility allows developers to select the font size, color and weight of titles as per the requirement.
To use Primer CSS in your web pages, you can install it from npm -
npm install --save @primer/css
In this article, we use CDN links.
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">
Typesetting Title Utility
The Typographic Title Tool is a set of predefined built-in classes that enable developers to style titles for their website or application. You can add these classes to any element (except a1f02c36ba31691bcfe87b2722de723b) and convert it into a header in the desired style.
As we already know, we have 6 header classes of different sizes. They start from h1 to h6. The sizes decrease in the same order.
grammar
<div class= "h1"> </div>The Chinese translation of
Example
is:Example
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
* {
margin: 10px;
padding: 0;
letter-spacing: 1px;
}
h1 {
color: orange;
text-decoration: underline;
font-family: Calibri;
}
</style>
</head>
<body>
<h1> Primer CSS Typography Heading Utilities </h1>
<div class="container"> Following we have different classes of heading utilities as provided by Primer CSS. <p class="h1"> This is the heading of class "h1" </p>
<p class="h2"> This is the heading of class "h2" </p>
<p class="h3"> This is the heading of class "h3" </p>
<p class="h4"> This is the heading of class "h4" </p>
<p class="h5"> This is the heading of class "h5" </p>
<p class="h6"> This is the heading of class "h6" </p>
</div>
</body>
</html>
In this example, we display the text in the h1-h6 class of the title utility.
The Chinese translation ofExample
is:Example
If you apply these classes to any heading element (e.g. 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, etc.), it will follow the style rules of the class. This means that the font size of the corresponding title utility class will be followed. Let us understand through an example.
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
* {
margin: 10px;
padding: 0;
letter-spacing: 1px;
}
.heading {
color: brown;
text-decoration: underline;
font-family: Georgia;
}
</style>
</head>
<body>
<h1 class="heading"> Primer CSS Typography Heading Utilities </h1>
<div class="container">
<h1 class="h6"> This is h1 element with class "h6" </h1>
<h2 class="h5"> This is h2 element with class "h5" </h2>
<h3 class="h4"> This is h3 element with class "h4" </h3>
<h4 class="h3"> This is h4 element with class "h3" </h4>
<h5 class="h2"> This is h5 element with class "h2" </h5>
<h6 class="h1"> This is h6 element with class "h1" </h6>
</div>
</body>
</html>
Here we apply the h6 class to the
element. But as we can see, the font size is based on the h6 class. Likewise, we have h2, h3, h4, h5 and h6 elements.
Marketing typesetting title tool
The marketing typography tools used in Primer CSS enable marketing developers and designers to create visually appealing brand marketing content such as product landing pages, advertisements, and more.
It represents the brand identity and vision for customers. Primer CSS also defines a set of classes for such purposes. These classes are responsive but different in a way. They are used as defined marketing fonts.
grammar
<div class= "h0-mktg"> </div>The Chinese translation of
Example
is:Example
In the marketing layout tool, we have 7 title classes. They are h0-mktg to h6-mktg. Let’s see an example −
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
CSS code * {
margin: 10px;
padding: 0;
letter-spacing: 1px;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 class="heading"> Primer CSS Marketing Typography Heading Utilities </h1>
<div class="container"> Following we have different classes of marketing heading utilities as provided by Primer CSS. <p class="h0-mktg"> This is the heading </p>
<p class="h1-mktg"> This is heading of class "h1-mktg" </p>
<p class="h2-mktg"> This is the heading of class "h2-mktg" </p>
<p class="h3-mktg"> This is the heading of class "h3-mktg" </p>
<p class="h4-mktg"> This is the heading of class "h4-mktg" </p>
<p class="h5-mktg"> This is the heading of class "h5-mktg" </p>
<p class="h6-mktg"> This is the heading of class "h6-mktg" </p>
</div>
</body>
</html>
In this example, we show the text in the h0.mktg -h6.mktg class of the Marketing Heading Utilities of Primer CSS.
in conclusion
In this article, we discussed Primer CSS Typography Heading Utilities and how it simplifies the life of developers. It makes web design easier by using predefined classes. We also see slightly different marketing layouts. It helps us create visually appealing product landing pages and ads. With various responsive design features, developers can produce high-quality and user-friendly websites with improved readability.
The above is the detailed content of Getting Started with CSS Typography Title Utility. For more information, please follow other related articles on the PHP Chinese website!