CSS Tutorial

Getting Started with CSS Typography Title Utility

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 am 08:01 AM

入门 CSS 版式标题实用程序

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 of

Primer 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 Getting Started with CSS Typography Title Utility ) 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 id="Primer-CSS-Typography-Heading-Utilities"> 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 of

Example

is:

Example

If you apply these classes to any heading element (e.g.

,

, 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 id="Primer-CSS-Typography-Heading-Utilities"> Primer CSS Typography Heading Utilities </h1>
   <div class="container">
      <h1 id="This-is-h-element-with-class-h"> This is h1 element with class "h6" </h1>
      <h2 id="This-is-h-element-with-class-h"> This is h2 element with class "h5" </h2>
      <h3 id="This-is-h-element-with-class-h"> This is h3 element with class "h4" </h3>
      <h4 id="This-is-h-element-with-class-h"> This is h4 element with class "h3" </h4>
      <h5 id="This-is-h-element-with-class-h"> This is h5 element with class "h2" </h5>
      <h6 id="This-is-h-element-with-class-h"> 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 id="Primer-CSS-Marketing-Typography-Heading-Utilities"> 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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that