Author: Awais Farooq

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…

CSS hyphenate-character property allows you to specify the character that should be used as the hyphenation point when text is hyphenated using the hyphens property. When text is hyphenated, the browser will insert a hyphen character at appropriate points within words to improve the visual appearance of justified text. The hyphenate-character property allows you to customize the character used for hyphenation.…

The height property sets the height of an element’s content area. In case, the box-sizing is set to border-box, the property height sets the height of the border area. The value specified by the height property gets oevrriden by the values defined by min-height and max-height properties. Possible Values Negative values like height: -200px are not accepted. Applies to All the HTML elements except non-replaced inline elements, table…

The translate property of CSS allows you to move an element along the X axis (horizontal), Y axis (vertical) and Z axiz (depth). The translate property is similar to the translate() function of transform property. The only difference between the two is that latter does not support the Z axis setting. Possible values 1. Single <length-percentage> value: 2. Two <length-percentage> values: 3. Three values: 4. none: No translation…