Found 1564 Articles for CSS

The CSS contains various pseudo-classes. The ‘:even’ and ‘:odd’ are among them. It is used to select the alternative child elements. Sometimes, developers require to design alternative elements using the different styles. In such cases, they can use specific CSS selectors to select the even and odd elements. In this tutorial, we will learn to use the ‘:even’ and ‘:odd’ pseudo-classes with list items. Using the ‘:odd’ Pseudo-class With List Items The ‘:odd’ pseudo-class is used to select the HTML elements which are at odd positions. We can use the ‘:odd’ class with the nth-child() CSS method to select all ... Read More

It is crucial to know about viewport in the visual formatting model for any web developer to develop a responsive website. The viewport is an area that is visible in the browser window or mobile device screen. In this tutorial, we will learn about the role of viewport in visual formatting models with examples. What is a Visual Formatting Model? The visual formatting model allows web browsers to decide how to show the HTML content on the web page. It provides the visualization for the content. The visual formatting model shows the content on the web page according to the ... Read More

In today's web development landscape, creating a website that works well across different devices and platforms is essential. This is where Progressive Enhancement comes in. Progressive Enhancement is a web design philosophy that focuses on building a website or application with a basic, functional version that works on all devices and browsers, and then gradually enhancing the website's features for more capable devices and browsers. In this tutorial, we will discuss what Progressive Enhancement is, why it is important, and how to implement it in our web design process. Core Principles of Progressive Enhancement The core principles of Progressive Enhancement ... Read More

The primer CSS is a framework allowing users to add pre-defined styles to the HTML elements. We can use primer CSS to style the various HTML elements such as buttons, links, forms, etc. In this tutorial, we will learn to style the HTML links with various colors using the primer CSS. Syntax Users can follow the syntax below to use the primer CSS to style the HTML link. Primary Link In the above syntax, we used the ‘Link-primary’ class with the ‘a’ tag to style it. Example 1 We can style HTML links using the various class names ... Read More

Let’s start the tutorial by understanding what is marking buttons and when we should use them. For a moment, think that you are an owner of the company and building a software product, and also, you don’t have any users or customers. Is it worth of product? The answer is no. To get customers, you must market your product; it is all about attracting your customer. So, developers can create a marketing button with an animated arrow icon to attract users and grow your product. In this tutorial, we will use the primer CSS framework to create marketing buttons with ... Read More

We can use the pagination technique to show large amounts of data in smaller chunks. For example, online stores like Amazon and Flipkart list millions of products. So, if they don’t use the pagination technique to show data, users need to scroll through the end of the web page to check the last product. Now, think how much scrolling is required to reach the last product in a total of millions of products. In the Pagination technique, we show a particular amount of data on a single page. For example, if we set the 100 as a page length, users ... Read More

The first question that comes to mind after reading this tutorial's title is offsetWidth, clientWidth, and scrollWidth return the width of the HTML, but what is the difference between them? The difference between them is how much space they take on the web page. In this tutorial, we will learn about the different widths and different heights of HTML element. OffsetWidth, ClientWidth, ScrollWidth offsetWidth − It is the total width of the element, including the actual width, padding, border, and scrollbar in pixels. It doesn’t include the margin in the width. It is an outer width of an HTML ... Read More

If your app takes more than 3 seconds to load, you lose 50% of visitors. So, a slow-loading website can be frustrating for users, and they can navigate away from your site. However, there can be many causes for the slow website, but one of them is larger CSS files. In real applications, we need to write lots of CSS to style different web pages. So, we can minify the CSS files to reduce the size of CSS files. When we minify the CSS files, it removes the whitespaces, comments, etc., from the file, decreasing the size of the CSS ... Read More

As the name suggests, the meaning of the liquid layout is flooding layout. It changes the dimensions of the HTML elements according to the screen dimensions. Whenever we use the hard-coded dimension values for HTML elements, it creates a fixed layout with a 90% chance of overflow. So, it is best practice to use a liquid layout so the web can be compatible with every device. In this tutorial, we will learn to create a liquid layout using CSS. Syntax Users can follow the syntax below to create a liquid layout in CSS. Selector_1 { Width: 60%; ... Read More

Nowadays, creating cards on a website is very important to show various data on the website. For example, on the home page of TutorialsPoint’s website, you will find different courses in the card format, and when you click on the card, it redirects you to the particular page of the course. Furthermore, if you go to any e-commerce store such as Amazon or Flipkart, they show products in the card format. The main benefit of creating a card is that we can show short information about the product with an image and full information on the product page. In this ... Read More