The filter functions are used to set visual effects on elements like contrast, brightness, hue rotation, opacity, on images, etc. Let us now see some filter functions. Syntax The following is the syntax of the filter in CSS − filter: none | drop-shadow() | blur() | brightness() | ... Read More

Visual Formatting in CSS is based on the Box Model. The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to the CSS Box Model. The layout of generated boxes depends on ... Read More

CSS Pseudo-classes can be combined with CSS classes rather than elements themselves to provide a more selective approach to an HTML element. Let us see some quick snippets to understand. Our css class is .dropbtn and pseudo-class is :focus .dropbtn:focus { background-color: #4f3e8e; } Our ... Read More

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew. The following are some of the 2D transform functions − Sr.No. Value & Description 1 matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values ... Read More

We can add specific styles to existing elements in HTML using CSS Pseudo classes which select an element with a specific state such as (hover, visited, disabled, etc.) NOTE − To separate CSS Pseudo Classes from Pseudo Elements, in CSS3, pseudo classes use single-colon notation. Syntax The following is the ... Read More

CSS overflow property comes in handy when the user wants to display a larger content in a smaller container without resizing the content. This property allows user to clip content, provide scrollbars to view clipped content, render content outside the container thus the name overflow. Syntax The following is the ... Read More

The CSS Display property is used to set how the element is displayed on a web page. With this property, create a grid layout, a flex, inline, etc. Some of its values are displayed here − Sr.No Property Value Description 1 inline Displays an element as ... Read More

To set a fixed width for items in flexbox, use the flex property. The flex is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties as shown below. The flex item is growable, can’t shrink, and initial length is set to 100% − flex: 1 0 100%; ... Read More

To set the kind of decoration used on text, use the text-decoration-line Property. In CSS, we have the following values for text decoration − text-decoration-line: none|underline|overline|line-through|initial|inherit; The following are the values − none − No line for the text decoration. This is the default. underline − A ... Read More

To set the grid template property, you need to specify the number of rows and columns. With that, also set the areas within the grid layout. The syntax for grid template reflects the same − grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit; The grid-template is a shorthand property for the below ... Read More