To set column rules, you can use the shorthand column-rule property, which allows you to set the following properties − column-rule-width: set the width of the rule between columns column-rule-style: set the style of the rule between columns column-rule-color: set the rule of the rule between columns The value for column rules can be set as − column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; Also, the properties can be used separately. We will see both the examples. Column-rule shorthand property In this example, we have set the column-rule using the shorthand property − column-rule: ... Read More

Background position is to set the beginning position of a background image. For this, use the background-position property.ExampleLet us now see an example − Live Demo body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: left center; } .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example − Live Demo body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: 50% 50%; } Details Examination Center near ABC College. Exam begins at 9AM. Output

To set background color using CSS, use the background-color property.ExampleLet us now see an example − Live Demo .demo {    text-decoration: overline underline;    background-color: red; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example − Live Demo .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. Output

With relative positioning, the element is positioned relative to its normal position. For this, use position: relativeExampleLet us now see an example − Live Demo div.demo {    position: relative;    color: white;    background-color: orange;    border: 2px dashed blue;    left: 50px; } Demo Heading This is demo text. This is demo text. position: relative; This is another demo text. Output

With static positioning, the elements are not affected by the top, bottom, left, and right properties. For this, use position: static.ExampleLet us now see an example − Live Demo div.static {    position: static;    color: white;    background-color: orange;    border: 2px dashed blue; } Demo Heading This is demo text. This is demo text. position: static; This is another demo text. Output

To set line height, use the line-height property. Followng are the property values −line-height: normal|number|length|initial|inherit;ExampleLet us now see an example − Live Demo div {    line-height: 1.9; } Demo Heading This is demo text. This is another demo text. OutputExampleLet us now see another example − Live Demo div {    line-height: 200%; } Demo Heading This is demo text. This is another demo text. Output

The fonts, height, width, margins, padding, etc. are set on a web page with the length units. For example, height 100px, width 100px, font 2em, etc. These length units are categorised into Absolute and Relative Units. CSS Absolute Units The absolute length units are fixed in relation to each other. These units are used when the output format is already known. The following are some of the Absolute Length Units − Sr.No Unit & Description 1 cmcentimeters 2 mmmillimeters 3 ininches (1in = 96px = 2.54cm) 4 px *pixels (1px ... Read More

The translate() function in CSS is used to reposition an element in a horizontal and vertical direction. If you want to move an element from the current position along the X- and the Y-axis, use the translate() function. Syntax The syntax is as follows − Transform: translate(x, y) Above, transform the element along with x-axis and y-axis. Translate an image In this example, we will translate i.e., move an image using the translate() method. Set it using the transform property − .translate_img { transform: translate(50px, 20px); } Example Let us now see the ... Read More

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