We can define a fixed max-height for an element’s content box using CSS max-height property which does not allows the element’s content box to be taller even if height is greater than max-height. Remember to set the overflow property if the content is larger than the maximum height. Syntax The syntax of CSS max-height property is as follows − p.demo { margin: 35px 70px 50px; } The value can be − length − Set the max height in px, cm, em, etc. % − Set the max height in % Set maximum height for the child container Let’s see an example for the CSS max-height property. ... Read More

We can define the height and width exclusively for the element’s content, though these properties do not include margins, paddings or borders. Syntax The syntax of CSS height property is as follows − Selector { height: /*value*/ } The syntax of CSS width property is as follows − Selector { width: /*value*/ } Example Let us see an example of width and height properties − CSS height and width * { ... Read More

The height of a line can be defined by the CSS line-height property. It accepts only positive values.SyntaxThe syntax of CSS line-height property is as follows −Selector {    line-height: /*value*/ }ExampleThe following examples illustrate the CSS line-height property. Live Demo div * {    margin: 1.5em;    box-shadow: -13px -10px 10px 1px crimson; } #demo {    line-height: 60%; } p {    box-shadow: 13px -10px 10px 1px grey;    line-height: 50px; } Demo Heading This is demo text one. This is demo text two. This is demo text three. OutputThis ... Read More

The CSS border property is used to define the border properties for an element. It is a shorthand for border-width, border-style and border-color. Borders for individual sides can be styled and a border-radius can also be specified. On the other hand, the CSS outline doesn’t take up space and is displayed around the border if set. It supports offset. Further, we can’t specify if individual sides should have an outline or not. By default, both borders and outlines are not displayed. Syntax The syntax for CSS border and outline property is as follows − Selector { ... Read More

We can use the CSS overflow property to manage/handle the overflowing content of an element. 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 syntax for CSS Overflow property − Selector { overflow: /*value*/ } The property values can be auto, hidden, clip, scroll, and auto. Let us see some examples to handle overflow content using the CSS overflow property − The Overflow Scroll Value In this example, we have set the overflow property to scroll. The ... Read More

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 syntax for CSS Overflow property − Selector { overflow: /*value*/ } The following are the values for the CSS Overflow property − Sr.No Value & Description 1 visibleIt is the default value, content is not clipped and is rendered outside ... Read More

We can manipulate cursor image for different elements in an HTML document by using the CSS cursor property. Syntax The syntax of CSS cursor property is as follows − Selector { cursor: /*value*/ } The following are the values for CSS cursor property − Sr.No Value & Description 1 aliasIt indicates an alias of something is to be created 2 all-scrollIt indicates that something can be scrolled in any direction 3 autoIt is default and the browser sets a cursor 4 cellIt indicates that a ... Read More

The CSS caption-side property is used to vertically position the table caption box. It can take top and bottom as values. By default, table caption is placed at the top.SyntaxThe syntax of CSS list-style property is as follows−Selector {    caption-side: /*value*/ }ExampleThe following examples illustrate the CSS caption-side property. Live Demo table * {    border: ridge skyblue;    padding: 0.5rem; } table {    margin: 20px;    box-shadow: 0 0 6px 3px indianred;    empty-cells: show; } caption {    border-top-style: none;    caption-side: bottom;    border-color: darkkhaki;    border-radius: 50%; } ... Read More

CSS allows us to set side specific padding for elements. We can easily specify padding sizes for individual sides of an element. The padding-top, padding-right, padding-bottom and padding-right properties define the top, right, bottom and left padding respectively. The padding shorthand property can also be used to achieve the same output by specifying values in clock-wise direction. Syntax The syntax of CSS padding property is as follows − Selector { padding-top: /*value*/ padding-right: /*value*/ padding-bottom: /*value*/ padding-left: /*value*/ } Set the Shorthand Padding Property The shorthand ... Read More

The CSS margin shorthand property is used to define the margin area for an element. It sets values in clock-wise direction, i.e., margin-top, margin-right, margin-bottom and then margin-left. Syntax The syntax of CSS margin property is as follows − Selector { margin: /*value*/ } The value above can be − margin-top margin-right margin-bottom margin-left The following examples illustrate CSS margin shorthand property − Margin property with all the values The margin property with all the values sets values for the top, right, bottom, and left properties − margin: 7% auto -3% 25%; ... Read More