To format text in CSS, you can change the text color, text decoration, line height, text direction, text alignment, etc.Let us see some examples −Text AlignmentTo set text alignment using CSS, use the text-align property. Following are the possible property values −text-align: left|right|center|justify|initial|inherit;ExampleLet us see an example to set text alignment − Live Demo .demo {    -webkit-columns: auto auto; /* Chrome, Safari, Opera */    -moz-columns: auto auto; /* Firefox */    columns: auto auto;    text-align: justify; } Machine Learning Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and ... Read More

The rotate() function in CSS rotates an element. The parameter sets the angle for rotation. Values can be degrees, radians, etc. The transform property is used to set the rotation. Syntax The following is the syntax of the rotate() − transform: rotate(angle); The angle is set as a parameter, such as 45deg, 90deg, etc. Rotate an element by 45 degrees To rotate an element by 45 degrees, use the rotate() function − transform: rotate(45deg); Example Let us see the example − #demo1 ... 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

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

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