CSS Pro Tips You Might Not Know

What is CSS?

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

It is a highly effective HTML tool that provides easy control over layout and presentation of website pages by separating content from design.

Now lets imagine how the webpage would look if there's no CSS in it. 😱

It would be so dull and boring.

There are number of CSS property and it is not humanly possible to remember them all.

In this article we'll come across some pro tips you might not know. Let's get started.

• user-select

The user-select property specifies whether the text of an element can be selected. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

.no-select {
    user-select: none;
}

• place-item

The CSS place-items property is the shorthand of align-items and justify-items property that allows you to align items along both the block and inline directions at once in a relevant layout system such as Grid or Flexbox.

item{
place-items: center start;
}

Note: If the second value is not set in the place-item property, the first value would be used for it.

item{
place-items: center ;
}

• clamp()

The clamp() property is used to clamp the value between an upper and lower bound. It takes three parameters : a minimum value, a preferred value , a maximum value.

The clamp() function can be used with the various elements such as font-size, width etc.

article{
font-size: clamp(1rem, 2.5vw, 2rem);
}

• calc()

The calc() function performs a calculation to be used as the property value. It takes a single expression as its parameter, with the expression's result used as the value.

box{
width: calc(10px + 100px);
}

• image-rendering

The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimension.

The three possible values are: auto, crisp-edges, pixelated.

img{
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

The End !

I hope you found this article valuable. If yes do let me know in the comments 😊

Also if you got any question feel free to ping me on Twitter.