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

To set the text color, use the color property in CSS. You can set the color with the color name, hexadecimal value, RGB value, or using the HSL value.Example Live Demo span {    background-color: orange;    color: white; } p.demo {    display: none; } span.demo1 {    display: inline; } Match Details Match will begin at 9AM 10AM on 20th December. Match will end at 5PM on 20th December. OutputExampleLet us now see another example − Live Demo p.demo1 {    word-spacing: 1cm;    color: #F8E61C; } p.demo2 {    word-spacing: 40px; } Demo Heading Heading2 This is demo text. Heading2 This is demo text. Output

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

To set space between letters i.e. characters, use the letter-spacing property. Following are the property values −letter-spacing: normal|length|initial|inherit;Example Live Demo p.demo1 {    letter-spacing: 1px; } p.demo2 {    letter-spacing: 10px; } Demo Heading Heading2 This is demo text. Heading2 This is demo text. OutputExampleLet us now see another example − Live Demo p.demo1 {    letter-spacing: 1cm; } p.demo2 {    letter-spacing: -2px; } Demo Heading Heading2 This is demo text. Heading2 This is demo text. Output

The object-position property is used to specify whether how we should position image or video inside its own box. It is always used with the object-fit property. Let us how to implement the object-position property. Syntax The following is the syntax of the object-position property − object-position: value; The value above can be the position of the image or video inside its own content box. Representation The 1st value of the object-position property controls the x-axis position and the second controls the y-axis. The position values can be − Left Right Center px % Object position ... Read More

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 layout using HTML and CSS. The grid-template-areas property Use the grid-template-areas property to set areas within the grid layout − grid-template-areas: 'newArea newArea . . .' 'newArea newArea . . .'; The grid-gap property To set the gap between the rows and ... 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

Every element in CSS has a default display value and we can easily change. This is done by explicitly setting the display property value. We will first consider an Unordered list and will set it horizontally with inline. Set the Unordered List With the Default Display The following sets an unordered list. The default display i.e., vertical for a list is displayed here − Machine Learning Python Data Science Python C# Artificial Intelligence Change the Default Display Now, we will change ... 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 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