AmitDiwan has Published 11430 Articles

Working with CSS Overflow Property

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:57:29

97 Views

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

Working with CSS Display Property

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:56:25

114 Views

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

Setting a Fixed Width for Items in CSS Flexbox

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:55:14

2K+ Views

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

Set the kind of decoration used on text in CSS

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:51:47

78 Views

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

Set the grid template property in CSS

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:50:36

65 Views

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

Set the color of the text decoration in CSS

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:49:14

106 Views

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 ... Read More

writing-mode Property in CSS

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:48:24

100 Views

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 − ... Read More

Working with Display Block in CSS

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:45:48

1K+ Views

The CSS Display property with value block renders an element with parent’s full width available, it also forces a line break. An element with display as block renders as a or element. Let us see the syntax with some examples for the display block. Syntax The following is ... Read More

Set areas within the grid layout in CSS

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:44:43

137 Views

To set the areas within the grid layout, use the grid-template-areas Property. With that, first set the display property as grid to create a grid layout. You need to work on the grid-area, grid-gap, and grid-template-areas property. Let us understand them one by one and set areas withing the grid ... Read More

Selecting Sibling Elements with CSS

AmitDiwan

AmitDiwan

Updated on 26-Dec-2023 15:43:13

3K+ Views

To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with example. Both of them allows selecting sibling elements with HTML and CSS. Adjacent sibling selector Use the adjacent sibling selector (+), if we want to match ... Read More

Advertisements