Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Primer CSS Typography Text Alignment
Typography is a crucial aspect of web designing for any developer. It includes choosing font families, proper spacing, sizing and alignment of the text in a webpage. Proper typography ensures enhanced readability of your website.
Text alignment is an essential component for typography and ensuring perfect alignment can be a challenge, especially for beginners. Here, we have Primer CSS for the developers. In this article, we will discuss about the text alignment feature available in Primer CSS and learn about how it is helpful in making a user-friendly website. So, let’s get started.
Primer CSS
Primer CSS is an open-source framework for CSS created by GitHub design system. It is especially designed for web developers enabling them to create responsive and customized websites quickly. It offers a versatile set of in-built components, such as typography, buttons, alerts, truncate, menu, navigation etc., It is easy to use and saves a lot of time.
Also, it has elaborate documentation for beginners to get started any time. This framework is supported in almost all modern browsers. However, some older versions may have issues with some of its features.
In order to incorporate Primer CSS in your HTML file, use the following CDN link −
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
Typography Text Alignment
Text alignment is one of the features in the typography component offered by Primer CSS. It enables the developers to align the text on a webpage by using classes.
Classes used for text alignment are as follows −
text-left
text-center
text-right
The “text-left” Class
This class enables us to align the text towards the left of the page. Following is the syntax for this −
<div class= "text-left"> </div>
Example
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
* {
margin: 10px;
padding: 2px;
}
h1 {
color: brown;
text-decoration: underline;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> Primer CSS Typography text alignment </h1>
<div>
<p> This div element contains text which is aligned by default. </p>
<p class="text-left"> This div element contains text which is aligned towards the left using the text-left class of Primer CSS. </p>
</div>
</body>
</html>
As you can see in the above, text is aligned towards the left of the page by default.
The “text-center” Class
This class enables us to align the text towards the center of the page or screen. Following is the syntax for this −
<div class= "text-center"> </div>
Example
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
* {
margin: 10px;
padding: 2px;
}
h1 {
color: brown;
text-decoration: underline;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> Primer CSS Typography text alignment </h1>
<div>
<p> This div element contains text which is aligned by default. </p>
<p class="text-center"> This div element contains text which is aligned towards the center using the text-center class of Primer CSS. </p>
</div>
</body>
</html>
Responsive Text Alignment
Responsive text alignment means that the text alignment will adjust its value accordingly with respect to different size of screen or devices of the user. In other words, the alignment of text will change with the change in screen type such as mobile, tablet, desktop, PC, etc.,
Making your text responsive is important for your website so as to make it user-friendly and attractive. Primer CSS offers this feature to make responsive text alignment within the typography component by using classes.
Syntax
<div class= "text-left text-sm-center text-lg-right"> </div>
Example
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
*{
margin: 0;
padding: 0;
}
h1{
color: orange;
text-decoration: underline;
font-family: Calibri;
}
div{
font-size: 16px;
}
</style>
</head>
<body>
<h1> Primer CSS Typography text alignment </h1>
<div class= "text-sm-left text-md-center text-lg-right">
This text will be left aligned in small screen devices (screen size: up to 760 pixels), centrally aligned for medium screen devices (screen size: 768- 1012 px) and right aligned in large devices (screen size: above 1012 pixels)
</div>
</body>
</html>
Advantages of Using Primer CSS for Text Alignment
Usage of typography classes offered by Primer CSS for text alignment makes your website consistent and appealing. Since there are predefined classes, you can easily apply them without writing long CSS codes. It also enables the developers to make the website responsive and user-friendly. Due to this responsive feature, the alignment will be compatible in all modern browsers and devices.
Conclusion
In this article, we have discussed about Primer CSS in detail. We have also learnt about the different classes of typography for text alignment along with their examples. making responsive text alignment is an essential part for creating attractive websites.
107 Views
