Category: Basic

CSS Image gallery is used to organize and display images in responsive and visually appealing format. CSS properties can be used to control the layout of images, size, shape, spacing, spanning and lot of other visual effects. In this tutorial we will learn all of those. CSS image galleries are commonly used on websites to…

CSS icons are used to add graphical representations, symbols, or small images to web elements. They serve several purposes in web development, such as: Table of Contents Importance of Icon How to Add Icons to a Webpage? Icons Using SVG In HTML <svg> tag can be used to create custom icons using d attribute of <path>. The d attribute of the…

The term alignment, in context of web design and CSS, refers to the positioning and arrangement of elements or content within a layout, typically with respect to specific guidelines or reference points. Alignment is used to create visually pleasing and organized designs by ensuring that elements are positioned relative to each other or to the…

Forms are required, when you want to collect some data from the site visitor. They have input fields for users to enter information, labels to identify the input fields, and buttons to submit the form or perform an action. We can style HTML forms by changing the appearance of form elements, such as text fields,…

An overlay is a transparent layer of content that is placed on top of another element. It can be used to create different effects, such as a modal window, a tooltip, or a popover. The overlay element should be positioned absolutely and have a higher z-index than the content element. This will ensure that the…

Navigation bar is a section of a graphical user interface (GUI) that helps users navigate through a website, app, or other software. It is essential for users to quickly and easily navigate to the content they are looking for. The navigation bar can be horizontal or vertical, that contains links to important pages or features. Table…

CSS bottom property is used to set the bottom position of a positioned element. It specifies the distance between the bottom edge of the element and the bottom edge of its containing element. Based on the value of the position property, the effect of bottom property, is determined. Syntax bottom: auto | length | percentage | initial | inherit; Property Values…

The z-index Property CSS z-index property controls the stacking order of elements in a web page when they overlap in the same stacking context. Elements with a higher z-index value appear in front of elements with lower values. The following diagram demonstrates the z-index layout for reference: CSS z-index property can be used with positioned elements that…

The opacity Property CSS opacity property controls the transparency of an element. It determines how much of a hidden element’s content is visible. The property can be used on various elements, whether they contain text, images, or serve as backgrounds. CSS opacity Example Here is an example of the opacity property. You can change the slider and see the…

The width property sets the width of an element’s content area. In case, the box-sizing is set to border-box, the property width sets the width of the border area. The value specified by the width property remains within the values defined by min-width and max-width properties. Refer the image for the understanding of width of an element. Possible Values Applies to All the HTML elements except non-replaced inline…