div{ width: calc(100vw - 50px);}As you can see above, we use the calc() function to calculate the exact width we want without changing units. So, this is a perfect feature to automate such calculations in your CSS code.
2. var() Function
This function is very useful if you are using vanilla CSS. It allows you to assign the value of a CSS variable to a property. So, the var() function is useful for creating CSS variables and using them in different places in your code.
Here is a code example:
:root { --main-bg-color: coral; --main-padding: 15px;} /* using the var function to insert variables as property values */ div{ background-color: var(--main-bg-color); padding: var(--main-padding);}As a result, due to the var function, the div will have a background color of coral and a padding of 15px.
3. url() Function
The url() function is used to describe or identify the location of files in our project. This function is typically used with the following properties: background-image, list-style, content, border, etc.
Here is a code example:
.element{ background-image: url("pic.gif"); list-style-image: url('../images/pic.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur);}As you can see, this function allows us to set files or media resources as values for certain properties in CSS.
4. rgb() and rgba() Functions
The rgb() and rgba() functions are used to describe color levels in CSS.
Here is an example:
#div1{ color: rgb(0, 0, 6);} #div2{ color: rgba(0, 0, 0, 1);}5. hsl() Function
The hsl() function stands for hue, saturation, and lightness. It allows us to define color levels using these parameters.
Here is a code example:
div{ background: hsl(0, 100%, 50%);}6. :not() Function
The :not() function in CSS is used to apply styles to specific elements that do not have a certain class or ID.
For example, we can use the :not() function to apply styles only to images that do not have the class .pic.
Here is an example:
img:not(.pic){ padding: 0; opacity: .5;}Conclusion
As you can see above, this is a short list of 6 useful CSS functions you can use in your code. There are many other functions we haven’t covered because the list would be long, but I might introduce a more extensive list in future articles.
Finally, thank you for reading.
Learn More Skills
Please click the public account below
