Author: Awais Farooq

The CSS float property controls the positioning and formatting of content on the page. It positions an element on the right or left side of the container, letting text and other inline elements to wrap around it. The float property uses the block layout, hence it adjusts the computed value of the display property in certain cases: Specified value Computed value…

Clearfix is a technique to ensure that a container properly encloses and contains floated elements within it. It prevents layout issues by adding an empty element to the container, which clears both left and right floats, allowing the container to expand and maintain its intended layout. Clearfix helps to prevent the problems like container collapse,…

CSS overflow is a shorthand property that specifies how to handle content that overflows the boundaries of its container. It can be used to clip the content, add scrollbars, or display an ellipsis. The overflow property only works for block-level elements with a specified height or width. The overflow property can be used to control the overflow of content…

CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space. The visibility property can be used to create a variety of effects, such as hiding elements that are not yet ready to be displayed, or hiding elements that are only relevant to certain users. Possible…

Dropdown is a user interface element that includes a list of options. It allows the user to choose one value from a list by hovering or clicking on a trigger element. It is typically used in navigation menus, forms, and other interactive components of a website. Dropdown menu is created using HTML’s unordered list (<ul>) and list…

CSS inline-block property is used to display an element as an inline-level block container. Inline-block elements do not start on a new line, but they can be set to a specific width and height. Here are some of the characteristics of the inline-block property: The display: inline-block property is a combination of the display: inline and display: block properties. It allows an element…

Scrollbars are UI elements that allow users to navigate through long content that doesn’t fit entirely within the visible area. They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right. It is important to test your scrollbar styling in different browsers…

In the earlier chapters we learnt how to add padding, margin, border, etc using CSS to an element. Now we will see how to set dimensions to an element. Here we will study how to set conditions to limit how high or wide a positioned element gets, not to mention cases where you want the…

Outlines are very similar to borders, but there are few major differences as well − NOTE − The outline properties are not supported by IE 6 or Netscape 7. You can set the following outline properties using CSS. The outline-width Property The outline-width property specifies the width of the outline to be added to the box. Its value…

The CSS cursor property determines the appearance of the mouse cursor when hovering over an element to which this property is applied. This property is only applicable in environments with mouse and cursor functionality. Its main purpose is to improve usability by visually representing certain functions. Possible Values The cursor property can have following values: The following table lists…