Found 1566 Articles for CSS

Understanding the difference between CSS Border and Outline

AmitDiwan
Updated on 02-Jan-2024 18:40:00

887 Views

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

Handling Overflowing Content using CSS

AmitDiwan
Updated on 02-Nov-2023 12:01:09

316 Views

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

The border Shorthand Property in CSS

AmitDiwan
Updated on 28-Dec-2023 18:14:37

228 Views

The border property is used to define the border properties for an element. It is a shorthand for the following properties − border-width − medium, thin, thick or a specific length border-style − solid, dashed, dotted, double border-color − Set the color Syntax The syntax of the CSS border property is as follows − Selector { border: /*value*/ } The value is the border style, width, and color. The following examples illustrate CSS border property − Set a dotted border In this example, we have set a dotted border using the border ... Read More

Working with CSS Overflow Property

AmitDiwan
Updated on 26-Dec-2023 15:57:29

97 Views

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

Changing the look of Cursor using CSS

AmitDiwan
Updated on 30-Oct-2023 14:49:57

234 Views

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

Controlling the Position of Table Caption using CSS

AmitDiwan
Updated on 06-Jan-2020 10:07:09

564 Views

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

Define Paddings for Individual Sides in CSS

AmitDiwan
Updated on 01-Nov-2023 14:08:14

74 Views

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 margin Shorthand Property in CSS

AmitDiwan
Updated on 29-Dec-2023 15:05:25

1K+ Views

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

Adding Borders to Tables in CSS

AmitDiwan
Updated on 27-Oct-2023 14:05:38

2K+ Views

Borders can be easily set on a table with CSS using the border property. Specific borders can also be set, such as left border, right border, top border, etc. With that, the border style, width, colour, etc, can be set for the left, right, top, and bottom positions. For example, here, the left border is set with a different style and color compared with all the other locations − For example, here, the top border is set with a different style and color compared with all the other locations − Syntax The CSS border property is used to ... Read More

Setting Margins for Individual Sides using CSS

AmitDiwan
Updated on 27-Dec-2023 16:16:19

206 Views

CSS allows us to control the space around individual sides of an element. The CSS margin property is a shorthand for the following properties: margin-top, margin-right, margin-bottom and margin-left. Syntax The syntax of CSS margin property is as follows − Selector { margin-top: /*value*/ margin-right: /*value*/ margin-bottom: /*value*/ margin-left: /*value*/ } The value can be the following − length − Set a a margin in px, pt, etc. The default is 0 % − Set a margin in percent auto − The web browser ... Read More

Advertisements