Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
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 line gets displayed under the text overline − A line gets displayed over the text line-through − A line gets displayed through the text Text decoration overline The text is decorated overline using the text-decoration property with the value overline − .demo { text-decoration-line: overline; ... 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 properties − grid-template-rows − The number of rows in a grid layout grid-template-columns − The number of columns in a grid layout grid-template-areas − Set areas within the grid layout Create a container for grid Set a container div for the grid − ... Read More
To set the color of the text decoration, use the text-decoration-color property. To place this color overline, underline, line through, etc, use the text-decoration property. Let us see how to set the color of the text decoration Color the text decoration overline The text is decorated overline and then the color is set using the text-decoration-color property − .demo { text-decoration: overline; text-decoration-color: yellow; } Example Here is the example − .demo { ... Read More
The writing-mode property is used to set whether lines of text are laid out horizontally or vertically. Let us understand the property with examples. We will begin with the syntax. Syntax The following is the syntax of the writing-mode property − writing-mode: value; The values are − horizontal-tb − Content flows horizontally from left to right and vertically from top to bottom vertical-rl − Content flows vertically from top to bottom and horizontally from right to left vertical-lr − Content flows vertically from top to bottom and vertically from left to right Flow content vertically ... Read More