The method through which we can determine the device being used for surfing is by using what we call, “viewport” widths. In computer graphics, a viewport usually indicates the polygonal (often rectangular) area that is now being viewed by user. When we talk about viewports in a web browser, we usually mean a window on which the content is visible and outside of which the user cannot view the content. There are basically two types of viewports. The viewport that is fixed and onto which the browser draws the whole web page is called the layout viewport. ... Read More

Before moving onto the topic, let us try to understand the importance of cursor as an UI element. We know that the very first thing a user interacts with in a website is mostly the cursor, this is why manipulating the cursor style and effects is the most important for designing, as it greatly contributes to the overall user experience. The cursor property is used to set the mouse cursor to appear whenever we hover over an element by pointing over it. It is applied to all the elements and is inheritable, meaning the child element will also have the ... Read More

In order to answer the question: “How to set the table layout algorithm using CSS”, we need to understand what is ‘layout’. A layout in HTML specifies the fundamental organization and visual style of a website. It gives you the ability to build websites with basic HTML tags. Table Layout Table layout is one of the least advised HTML layouts due of its complexity. As its name suggests, it is based on the table> element. The table> element allows you to arrange data in rows and columns. The table> tag is a container tag, since it serves as ... Read More

Whenever we want to gradually change the style of an element from one form of styling to some another style, whether it may be some interaction from user or through duration of stay on the site. You can use animations to change a lot of styles for any duration of time. Let us look at the properties that you need for animations. Keyframes − This is used to specify an animation for an element. It contains the changes that will occur to the style of the element. The element then moves from the style at the beginning to ... Read More

As we already know that CSS provides us with a wide range of properties and pseudoclasses, which enables developers to add the desired styling to the element. One such property is box shadow property; it allows us to add a shadow like effect around the element. Box-shadow Property Box shadow is a CSS property used to create an outer or inner shadow effect on elements. It applies one or more shadows to the element, each of which is specified with X and Y offsets from the element, blur radius, spread radius, color and opacity value. The box-shadow property ... Read More

We know that CSS is a rule based, style sheet language that is used for designing and customizing the web page. They are used to specify how an html element is going to be formatted and displayed on the screen. One of the most common forms of styling that we add to elements is adding or modifying the border of an element. This can be done by using the ‘border property’ of CSS. Border Property “border” is the abbreviated way to specify the border around an element by specifying the border width, its style, and the color of border. So, ... Read More

CSS is a language for the web, which is majorly used for designing and presenting the web page. It provides us with a lot of properties that will help in the customization process. One such property is the “align content property”. Align content property is used to distribute space, either in between or around items that belong to a flexbox or a grid. The initial value of this property is “normal”. It has discrete animations, and the computed value is always equal to what is specified. Point to note is that, it is not an inheritable property. It ... Read More

In this article we will learn about the CSS and JS files. We will explore about their functions and different ways of using them in HTML document. And after learning about all these things we will understand why we have external CSS and JS files.CSS CSS stands for Cascading Style Sheets. CSS is used to apply styles to your websites and webpages. It is used to make webpages look more understandable, presentable and more appealing to the user. A CSS file can be written in any text editor but must be saved with a .css extension. A simple HTML ... Read More

To make div elements display inline using CSS, is a very simple and easy process. There are various approaches which we can use to make div elements display inline. In this article we will be understanding five different approaches and some other properties to make div element display inline. We are having three div boxes which are block element, our task is to make div elements display inline using CSS. Approaches to Make div Elements Display Inline Using CSS Here is a list of approaches to make div elements display inline using CSS which we will be discussing in this ... Read More

Materialize is a CSS framework which is used for designing as it uses the classic principles and combine them with innovation and technology. The creator of materialize is google as they developed a design system which can allow a unified user experience to every user in every type of product, regardless of the platform that the user is using. Breadcrumbs is a component which is built in materialize CSS and is mostly used when there are lots of layers so as to display the current location of the user working on it whether on the website or the web app. ... Read More