CSS Articles - Page 87 of 160

To set a column gap on a web page, use the column-gap property. You can set the values as − column-gap: length|normal|initial|inherit; The values can be − length − The gap between the columns normal − A normal gap between the columns Gap between the columns To set a gap between the columns, we have set a length unit i.e. − column-gap: 25px; Example Let us see an example to set a gap between the columns − .demo { ... Read More

For styling the tables with CSS, we can set borders, collapse, set width and height. We can also set the padding, alig text in it, etc. Let us see some examples −ExampleTo add borders to a table in CSS, use the borders property. Let us now see an example − Live Demo table, th, td {    border: 2px dashed orange; } Team Ranking Table Team Rank Points India 1 200 England 2 180 Australia 3 150 NewZealand 4 130 SouthAfrica 5 100 ... Read More

The CSS Display property is used to set how the element is displayed on a web page. With this property, create a grid layout, a flex, inline, etc. Some of its values are displayed here − Sr.No Property Value Description 1 inline Displays an element as an inline element. 2 block Displays an element as a block element. 3 contents Makes the container disappear, making the child elements children of the element the next level up in the DOM 4 flex Displays an element as a block-level flex container ... Read More

CSS3 has support for RGBA, HSL, HSLA, and other color values. Additionally, more than 100 color names are also provided. CSS3 RGBA The CSS3 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. Example Let us now see an example to set the background color on a web page using the RGBA color values − ... Read More

For text transformation in CSS, use the text-transform property with the following values −text-transform: none|capitalize|uppercase|lowercase|initial|inherit;Example Live Demo div {    line-height: 1.9;    text-transform: uppercase; } Demo Heading This is demo text. This is another demo text. OutputExampleLet us see another example − Live Demo div {    text-transform: lowercase; } Demo Heading THIS is demo text. This is ANOTHER demo text. Output

The scale3d() function is used to scale an element in 3D space. The element is scaled based on numbers set as parameter. Syntax The following is the syntax of the scale() method − scale3d(x, y, z) Above, x, y, z is the x-axis, y-azis, and z-axis. Scale an image Let us now see another example. In this, we will scale an image using the x, y, and z values in the scale3d() method − .scale3d_img { transform: scale3d(-1.4, 0.4, 0.7); } Example Let us see the example − ... Read More

The text-justify property in CSS is used to set the justification method of text when the text-align property is set to the justify value. Let us see the syntax − text-justify: value; The value here can be any of the following − auto− Sets automatically and the web browser determines inter-word− To increase or decrease the space between words inter-character− To increase or decrease the space between characters none− The justification method is disabled The syntax can also be seen like this − text-justify: auto|inter-word|inter-character|none|initial|inherit; Inter-word justification of text In this example, we have ... Read More

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: drop shadow, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. The drop shadow on an image can look like the following image − To add the drop ... Read More

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. To adjust the contrast of an image in CSS3, use the contrast value for filter property. The contrast ... Read More

The scale() function in CSS is used to define a transformation that resizes an element on the 2D plane. Set the amount of scaling in each direction as the parameter of the scale() function. The transform property is used to set the scale. Syntax The following is the syntax of the scale() − transform: scale(width, height); Above, scale along the width and height. Increase the image size In this example, we have set the transform property to scale the image size. The scale(1.2, 1.3) will increase the height and width of an image − transform: scale(1.2, 1.3); ... Read More