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

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

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

The CSS image-rendering property helps us set an algorithm for scaling our image. The images sometimes look blurry when the transform & scale is applied. To improve the image, use the CSS image-rendering property. Let us see how to maintain the image quality. Syntax The syntax of CSS image-rendering property ... Read More

We can align elements in HTML using the CSS float property that is used for positioning or formatting a box or content. You can position element towards left or right with CSS float. The float property can have any of the following values − left − element float to ... Read More

Using with 3d transforms, we can move element to x-axis, y-axis and z-axis. The following are some of the methods of CSS3 3D Transform − S.No. Value & Description 1 matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)Used ... Read More

Inline-level elements have their CSS display property set to either ‘inline, ‘inline-table’, or ‘inline-block’ and these elements do not force a line break above and below themselves. Inline-level boxes are generated by each inline-level element which is a part of the positioning scheme as well as contains child boxes. Inline ... Read More

Adding CSS to an HTML document enhances the appearance of the web page. Various styles for the images, borders, margins, colors, can be easily added. To include CSS in HTML documents, we can either include them internally, inline or link an external file. Let us understand them with examples. Syntax ... Read More

Import additional CSS files inside another CSS declaration. The @import rule is used for this purpose as it links a stylesheet in a document. This is generally used when one stylesheet is dependent upon another. It is specified at the top of the document after @charset declaration inside . With ... Read More