Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To set a column gap on a web page, use the column-gap property. You can set the values as − column-gap: length|normal|initial|inherit; The values can be − length − The gap between the columns normal − A normal gap between the columns Gap between the columns To set a gap between the columns, we have set a length unit i.e. − column-gap: 25px; Example Let us see an example to set a gap between the columns − .demo { ... Read More
Use the columns property in CSS3 to set the column count and width. It is a shorthand property for column-width and column-count properties. With that, you can set both the properties separately as well. The column property The column property works as a shorthand property for the column-with and column-count properties. The following is the syntax − columns: auto|column-width column-count|initial|inherit; Example Let us see an example to set the columns property to set. This sets both the column width and count to the auto value − ... Read More
To specify the height and width of an element, use the CSS height and width properties, respectively. We can also set the maximum and minimum values for these properties using the max-height, max-width, min-height, and min-width properties. Syntax The following is the syntax of height and width properties in CSS − Selector { height: /*value*/ width: /*value*/ } Here are the values of the height property − auto − The height is calculated by the web browser length − The height is defined in length units % − The height is ... Read More
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() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: blur, contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. Invert The invert() is used to ... 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 several properties such as − Dimensions Type − atomic inline-level, block, inline, or inline-block Positioning − absolute, float, or normal Relation with child and neighbour elements of document External Information − viewport’s and image’s width - height, etc. CSS Box Generation of processed elements − Block ... 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 css class is .card-container and pseudo-class is :hover − .card-container:hover .overlay { bottom: 0; height: 100%; } Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child ... 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 2 translate(x, y)Used to transforms the element along with x-axis and y-axis 3 skew()skew an element along the X-axis and Y-axis 4 skewX()Skew an element along the X-axis 5 skewY()Skew an element along the Y-axis 6 scale(x, y)Used to change the width ... 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 syntax for using CSS Pseudo classes on an element − Selector:pseudo-class { css-property: /*value*/; } The following are all the available CSS Pseudo Classes − Sr.No Pseudo-Class & Description 1 activeIt selects the active mentioned element 2 checkedIt ... 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 syntax for CSS Overflow property − Selector { overflow: /*value*/ } The following are the values for the CSS Overflow property − Sr.No Value & Description 1 visibleIt is the default value, content is not clipped and is rendered outside ... 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 an inline element. 2 block Displays an element as a block element. 3 contents Makes the container disappear, making the child elements children of the element the next level up in the DOM 4 flex Displays an element as a block-level flex container ... Read More