My Blog

The CSS scroll-behavior property defines whether the scroll behavior should be smooth or abrupt within a scrollable box. This property does not have an effect on scrolls performed by the user. The scroll-behavior property specified on the body element will not propagate to the viewport. It should be specified for the html element. User agents can ignore this property. Initial Value auto Applies…

The right property specifies part of the position of positioned elements. The right property is used to set the right margin edge of the element and the right edge of its containing block for absolute or fixed positioned elements. The effect of right depends on how the element is positioned (see position property). Initial Value auto Applies to Positioned elements. Inherited…

The CSS resize property specifies how the element is resizable. It controls over the appearance and function of the resizing mechanism. The resizing mechanism is usually a triangle knob at the bottom right corner of the element. This property is one of the CSS3 properties. It has 4 values: “none”, “both”, “horizontal” and “vertical”. There are two other…

The quotes property sets the type of quotation marks for the content. The pseudo-elements ::before and ::after are used to insert the content marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property. Quotation marks are not used with quotes (<q>) and blockquotes ( <blockquote>) which requires to add the quatation marks by yourself. They…

The position property specifies the position of the element in a document. This property has the following values: Types of Positioning Positioned elements – when an element is positioned, its position on the page is determined using the offset properties: top, right, bottom, and left. Offset properties do not work on static elements. Relatively positioned elements – position value is “relative”. The top and bottom properties specify…

The pointer-events property defines whether or not an element reacts to pointer events. Many values are applicable to SVG elements, but only three of these values apply to HTML elements. Important Notes Using pointer-events to prevent an element from being the target of pointer events does not mean that pointer event listeners won’t be triggered. If one of the element’s…

The CSS place-items property is a shorthand for the following properties: Abovementioned properties have gained use with the introduction of Flexbox and Grid layouts, but are also applied to: The place-items property behaves differently depending on the user context. Read about the behavior of the place-items property in different contexts below. Initial Value normal legacy Applies to All elements. Inherited No. Animatable No. Version CSS3…

The perspective-origin defines the position at which the user is looking at the 3D-positioned element. The perspective-origin property is one of the CSS3 properties. The perspective property uses the value of the perspective-origin as a vanishing point. By default, the vanishing point of a 3D space is at the center. The perspective-origin property can be used to change the position of the vanishing point. The perspective-origin property is…

The perspective property gives a 3D-positioned element some perspective and determines the distance between the z=0 plane. A 3D element with z>0 becomes larger, a 3D-element with z<0 becomes smaller. The perspective property does not take 0 or negative values. The perspective property is one of the CSS3 properties. Initial Value none Applies to Transformable elements. Inherited No. Animatable Yes. The transformation…

The page-break-inside property defines page break inside the element. This property is generally used to insert a page break inside of an element’s content while printing. This property cannot be used on an empty <div> or on absolutely positioned elements. Browsers should treat the page-break-inside property as an alias of break-inside. This assures that sites using the page-break-inside property…