Relative length units in CSS are used to specify a length relative to another length property. Let use see some key units in CSS with the description − Sr.No Unit & Description 1 emRelative to the font-size of the element i.e 4em means 4 times the ... Read More

CSS Pseudo-elements can be applied on elements but also on CSS classes as well. First, let us see the pseudo-elements. The pseudo-elements allow styling specific parts of any elements, for example, insert content after an element, set CSS styles for the first line, etc. The following is the syntax − ... Read More

The CSS background-image property is used to set an image as a background for the selected element. The url() is used in the background-image to set the image source. Syntax The syntax of CSS background-image property is as follows − Selector { background-image: /*value*/ } ... Read More

The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc. Pseudo-classes The following are some key Pseudo-classes − ... Read More

For multiple transitions, use the CSS3 transition property, which is a shorthand property. It sets the property, duration, timing, and delay of the transition in a single line. Let’s say we changed the width and border-radius for the transition. transition: width 2s, border-radius 2s; Set the container div ... Read More

Using CSS Z-Index property, a user can stack elements onto one another. Z-Index can have a positive or a negative value. The stack order of an element is set using the z-index property. NOTE − If elements that overlap do not have z-index specified then that element will show up ... Read More

Outline doesn’t take up space and is displayed around the border if set. It is used for highlighting elements and we can’t specify whether individual sides should have an outline or not. Like borders, outline is not displayed by default. In some browsers, say Firefox, focused elements are displayed with ... Read More

The object-position property is used to specify whether how we should position image or video inside its own box. It is always used with the object-fit property. Let us how to implement the object-position property. Syntax The following is the syntax of the object-position property − object-position: value; ... Read More

By defining the CSS word-spacing property, we can set the amount of white space between the words. The whitespace between the words can be increased or decreased. It can be set in the following CSS units: px, pt, em, cm, etc. Let us see the syntax. Syntax The following is ... Read More

By specifying padding of an element in percentage, we can maintain its Aspect Ratio. The aspect ratio is the ratio of image’s width to its height. The aspect ratio can also be maintained using the aspect-ratio property. Aspect ratio for videos with the padding-top property Use the padding-top property to ... Read More