We can do animations using HTML, CSS, and JavaScript all together and can implement these on the webpage or the website. CSS provides lots of properties that we can use to create an animation which is why it is advised to use CSS for styling as it holds a lot of power for the front-end development. In this article, we will be creating a heart which changes its color every 3 seconds using CSS and it will be done in two steps using some animations. Steps to create the rainbow heart We will create two different divisions for the body, ... Read More

We can place a layer over an element so that we hide the element either partially or completely. The mask-image property is a CSS property which specifies layer on the element and it can also be an image but we would have to use the address of the image to add a mask on that image. In this article, we will have a look at adding a mask to an image using CSS properties and what we can do more with the same property. Adding mask to an image The mask-image property is the property that we will be going ... Read More

Developers want the HTML elements to look the same on every browser, though it depends, as the functionality of each browser differ. When the browser render a HTML page, it will apply its own default styles. Styles like the heading tag with different sizes and fonts depending on the type of browser. Which means that the headings can have margins or extra padding without you even writing the code. In this tutorial, we are going to have a look at how we can reset and normalize CSS and what is the difference between them. Difference between normalizing and resetting? While ... Read More

You might have come across a situation when several div elements are together and are next to each other with the property as display: table-cell and there is no margin between them. If you want to set a margin between them, you will need to add margin by adding margin externally. In this article, we are going to have a look why does the display: table--row ignores margin and how can we add margin if we want to add it. How to add the margin to the table? You might be thinking if we add margin externally in the table-row ... Read More

CSS is widely known as the cascading style sheets and is used to style the elements which are created using the HTML tags and is responsible for the look and feel of the webpage. We can use CSS to change the color of the text, change the background, add any image or give space between texts. We can create many ways to display a single piece of content. In this article, we are going to explain the ease of maintenance with CSS and what are the benefits of the CSS. Advantages of CSS Following are the advantages of using CSS ... Read More

You might have observed 2 options while setting the size of the elements using CSS properties, one an absolute unit and the other a relative unit. The absolute unit is identical and is fixed and its size can be set with cm, mm, px. On the other hand, relative unit is relative to something else which can be a parent element or any other element. In this tutorial, we are going to have a look at the comparison between the em and rem units in CSS. The Em unit The em unit makes it possible to change the size of ... Read More

CSS viewer extension is a chrome extension which acts as a property viewer and was made by Nicolas Huon. The user has to click on the toolbar icon and then he can hover his cursor on any element to view the element’s properties. The CSS viewer extension requires the permission to access the user’s history as well as the website data in order to inspect the properties on the page. In this article we are going to have a look at, what is CSS viewer extension and how we use it? What is CSS viewer Chrome extension for web developers ... Read More

While browsing through different pages in a website, it is essential that the developer add a loading screen to the website; so that there is enough time for the website to traverse between webpages. A loading screen is an effective way, where the user can wait while the page of the website loads/initialize. How to create the loading screen? To create a loading screen, we can use HTML and CSS. Firstly, we will be creating a div element in which a heading tag is given, that shows the percentage. Then we will be using CSS properties like the border-radius to ... Read More

A responsive webpage is a necessary key point which has to be always kept in mind while developing a website. The grid module enables the developer to design webpages easily without using a lot of positioning, as the id module provides a grid type layout system in which there are rows and columns. The auto-fill property The auto-fill property is used to fill the rows with possible columns, the column which is added will occupy the space and the other column will be empty. The auto-fill property is an important property of the CSS grid and is mostly used so ... Read More

The margin property in CSS can be used to centre a block element like a div horizontally. We can set the width of the element, so that, it prevents the container from stretching out. The block elements take the full space line which force other elements to take up the next line as the block elements have 100% of the container. Aligning the block elements to the center Any element that begins a new line on a web page is considered as a block-level element. For example, header tags, div, etc. These block elements take the full width of the ... Read More