Category: 01. Tutorials

CSS image gallery is a collection of images that is displayed using CSS. CSS can be used to control the layout of the images, their size, spacing, and other visual properties. CSS image galleries are commonly used on websites to display products, portfolios, or other visual content in a visually appealing way. To create a…

The CSS icons are used to add graphical representations, symbols, or small images to web elements. They serve several purposes in web development, such as: To create CSS icons, developers often use techniques like CSS pseudo-elements (::before and ::after), icon fonts, or inline SVGs. Each approach has its advantages and trade-offs, and the choice depends on the specific needs of…

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…

HTML 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. CSS can be used to make forms look good. You can style forms using CSS to change the appearance of form…

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 overlay is…

A 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…

The bottom property in CSS 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. Position value Bottom property absolute or fixed Specifies the distance between…

CSS z-index property is used to control 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: The z-index property can be used with positioned elements that are nested…

CSS opacity property controls the transparency of an element. Opacity determines how much of a hidden element’s content is visible. You can use the opacity property on various elements, whether they contain text, images, or serve as backgrounds. This property is used to creating various visual effects, such as fading in/out, creating overlays, or making background images less prominent.…

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…