Lists are ordered as well unordered. With CSS, you can set the set list item markers or an image for the markers. With that, with CSS, we can also set the position for list-item markers.Let us now see some examples −list-style-typeThe list-style-type is used to set the type of list-item marker.ExampleLet us now see an example wherein we are formatting ordered lists (ol) − Live Demo ul {    list-style-type: upper-roman; } Teams India Australia England West Indies South Africa Srilanka Outputlist-style-imageThe list-style-image property is used to set an image as the ... Read More

For text decoration in CSS, use the text-decoration property as a shorthand property for the following properties −text-decoration-line text-decoration-color text-decoration-styleExampleLet us see an example for text decoration in CSS − Live Demo .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example wherein we are using separate values − Live Demo p {    writing-mode: vertical-rl;    text-decoration-line: overline;    text-decoration-color: red;    text-decoration-style: wavy; } Demo Heading This is demo text. Output

To 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 quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of ... Read More

To set spacing between words, use the word-spacing property. The property values are as follows −word-spacing: normal|length|initial|inherit;ExampleLet us now see an example − Live Demo p.demo1 {    word-spacing: normal; } p.demo2 {    word-spacing: 10px; } Demo Heading Heading2 This is demo text. Heading2 This is demo text. OutputExampleLet us now see another example − Live Demo p.demo1 {    word-spacing: 3cm; } p.demo2 {    word-spacing: 40px; } Demo Heading Heading2 This is demo text. Heading2 This is demo text. Output

The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax − Syntax 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: contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. The sepia sets the sepia effect to an image. To set the sepia effect in CSS3, use the ... Read More

The rotate3d() function in CSS is used to rotate an element in 3D space. Set the amount and angle of rotation as parameter of rotate3d(). Syntax The following is the syntax of the rotate3d() method − rotate3d(x, y, z, angle) Above, x, y, z is the x-axis, y-azis, and z-axis. The angle is the angle of rotation − Positive angle − Clockwise rotation Negative angle − Counter-clockwise rotation Clockwise rotation of an element In this example, we have set the x, y, z axis. We have set the clockwise rotation with a positive angle − ... Read More

To convert an image to Grayscale in CSS3, use the grayscale value for filter property.ExampleLet us see an example − Live Demo img.demo {    filter: brightness(120%);    filter: contrast(120%);    filter: grayscale(130%); } Spring Framework Learn MySQL Below image is brighter and has more contrast than the original image above. With that the image is in grayscale: Output

The RGBA color value is for Red, Green, Blue and Alpha. The alpha is the color opacity i.e. a number between 0.0 and 1.0. Here, 1.0 would be for full opaque. Here, we can see the difference in opacity created with the Alpha parameter in RGBA. Syntax The following is the syntax of the RGBA Color Values − rgba(red, green, blue, alpha) Above, the following values are added to the rgba() method. Red Set the color as an − Integer between 0 and 255. Percentage between 0% and 100% Green Set the color as an − ... Read More

To set image brightness in CSS, use filter brightness (%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter. The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax − Syntax filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you ... 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