Some Less Known CSS Properties

What is CSS

CSS stands for Cascading Style Sheets. It is a style sheet language that is used to describe the look and formatting of a document written in a markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML document including plain XML, SVG, and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

Some Less Known CSS Properties

place-items

Shorthand for setting both align-items and justify-items.

.container 

{

  display: grid;

  place-items: center;

}

gap

Defines the spacing between elements in a flex or grid container. Shorthand for row-gap and column-gap.

.container 

{

  display: flex;

  gap: 12px;

}

filter

Add effects like brightness, contrast, grayscale, etc.

.image

{

  filter: blur(10px);

  filter: contrast(150%); 

}

accent-color

Applies color tint to HTML input elements.

.checkbox

{

  accent-color: #FF1493;

}

text-decoration

Shorthand for decoration line, style, and color.

.text

{

  text-decoration: underline wavy;

}

clip-path

Clips an element and shows only the content defined by the shape.

.image

{

  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

writing-mode

.container 

{

  writing-mode: horizontal-tb;

  -webkit-writing-mode: horizontal-tb;

}