Primer CSS is a CSS framework collectively developed by various GitHub contributors. One of its components is typography which enables the developers to style the written content of the website. By applying these utility classes to the HTML elements, we can easily customize the visual appearance of our application. Here, in this article, we will discuss about the type scale utilities offered by Primer CSS and how to use them in our webpage. What are Type Scale Utilities? Type scale utilities are collection of properties which help in creating proper typography throughout your website. It consists of series of pre-defined ... Read More

Typography is an essential component during creation of websites and applications. It is primarily used to display majority of the content for the users. It determines the tone and mood of the content of your website. So, it is very likely that it affects the overall user experience. Headings in any website is the center of attraction for any user. So, it is very important that it looks perfectly fine to increase the readability of your website or application. In this article, we will use Primer CSS to create headings. Primer CSS Primer CSS is a versatile and popular CSS ... Read More

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 ... Read More

Web forms are popularly used in modern websites. For webforms, we have a common element known as checkboxes. However, aligning these checkboxes and their labels in different browsers is a challenging task. This is because it may be displayed differently in different browsers and devices. When it comes to display of checkboxes, different browsers may have slightly different styles and rendering methods. To solve this problem, we will be discussing different ways to align the checkboxes along with their labels using CSS on cross-browsers. How are Checkboxes Displayed in Different Browsers? Different browsers have different compatibility for checkboxes in web ... Read More

In today’s era of web designing, the creation of visually attractive websites with proper layouts and organized content is the key task. One of the most commonly faced challenges is that the developers need to know how to properly define the space between the elements so as to increase the readability of the webpage. Here, we have CSS for the rescue. CSS enables the developers to control the appearance of HTML elements, including proper spacing between them. In this article, we will discuss different methods used for setting the vertical space between the list of items using CSS. We ... Read More

IN SASS, the @content directive is used to pass the CSS content into the mixins or functions. The mixins and functions allow developers to avoid the repetitions of the code. However, the @content directive also helps developers to reuse the code but provides more flexibility than functions and mixins. Developers can define the CSS code inside the code block while including the mixin in the SCSS file. After that, they can use that code with the pre-defined code of the mixins using the @content directive. Let’s understand it via the examples below. So you can get more clearance about the ... Read More

Introduction Have you ever measured the loading speed of your website? If No, there are lots of tools available on the internet to test the website speed. Search for anyone and measure it. If the website loading speed is more than 3 seconds, it means you are losing a total of 32% of visitors, according to the survey done by Google. So, it helps if you take action to decrease your website's loading speed, and here progressive rendering comes into the picture, which allows developers to increase the loading speed of the website. What is Progressive Rendering? Before discussing ... Read More

In CSS, the ‘>’ sign is not used to compare two values like in other programming languages. Here, we use the greater than sign (>) as a selector. In CSS, selectors are used to selecting single or multiple HTML elements. Whenever we use the greater than sign in the selector, it selects the direct children of the parent element but not that are nested at deep. Syntax Users can follow the syntax below to use the greater than sign in the CSS selector. selecter1>selector2 { /* CSS code */ } In the above syntax, ‘selector1’ is ... Read More

What is Graceful Degradation? If you are an experienced web developer, you may have heard the graceful degradation word before. Before we learn about the graceful degradation in web development, let’s break down the word. The meaning of graceful is elegant or beautiful, and degradation is breaking or falling down. So, the overall meaning of the graceful degradation word is that it makes the feature elegant while it breaks. Developers use the graceful degradation term in web development. It provides various techniques so that any website or application can work correctly in less capable browsers. For example, modern browsers support ... Read More

In CSS, the ‘font-family’ property is used to set the fonts for the text content of the HTML element. It takes the multiple font names as a value. If the browser does not support the first font, it sets the next font style for the HTML element. Users can follow the syntax below to use the ‘font-family’ CSS property. font-family: value1, value2, value3, ... The ‘-apple-system’ value of the ‘font-family’ CSS property allows developers to set the same font for the HTML content of the web page, which the Apple operating system has. It means we can set ... Read More