Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
CSS Functions
3.
Difference Between CSS Functions and Normal Functions
4.
Types of CSS Functions with Examples
4.1.
CSS Custom Properties
4.1.1.
HTML
4.1.2.
CSS
4.1.3.
OUTPUT
4.2.
Colour Functions
4.2.1.
HTML
4.2.2.
CSS
4.2.3.
OUTPUT
4.3.
Pseudo Class Selector Functions
4.3.1.
nth-child( )
4.3.2.
HTML
4.3.3.
CSS
4.3.4.
OUTPUT
4.3.5.
nth - last - child( )
4.3.6.
HTML
4.3.7.
CSS
4.3.8.
OUTPUT
4.3.9.
nth - of - type( )
4.4.
Example 1
4.4.1.
HTML
4.4.2.
CSS
4.4.3.
OUTPUT
4.5.
Example 2
4.5.1.
HTML
4.5.2.
CSS
4.5.3.
OUTPUT
4.6.
nth - last - of - type( )
4.6.1.
HTML
4.6.2.
CSS
4.6.3.
OUTPUT
4.7.
Sizing and Scaling or Transform Functions
4.8.
scaleX( ), scaleY( ), scaleZ( ), scale3d( ) and scale( )
4.8.1.
HTML
4.8.2.
CSS
4.8.3.
OUTPUT
4.9.
translateX( ), translateY(), translateZ(), translate3d(), and translate()
4.9.1.
HTML
4.9.2.
CSS
4.9.3.
OUTPUT
4.10.
rotateX(), rotateY(), rotateZ(), rotate3d(), and rotate()
4.10.1.
HTML
4.10.2.
CSS
4.10.3.
OUTPUT
4.11.
skewX( ), skewY( ) and skew( )
4.11.1.
HTML
4.11.2.
CSS
4.11.3.
OUTPUT
5.
List of Common CSS Function
6.
Frequently Asked Questions 
6.1.
What are CSS functions?
6.2.
How are CSS functions different from regular functions?
6.3.
What are the advantages of CSS functions?
6.4.
Name some common CSS functions. 
6.5.
What is the difference between rgb( ) and rgba( )?
7.
Conclusion
Last Updated: Mar 27, 2024
Medium

CSS Functions| Part 1

gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

I am sure you are aware of CSS. Cascading Style Sheets (CSS) is a popular language used to style web pages. It is one of the powerful features of CSS is its ability to use functions to manipulate the values of CSS properties. So welcome back Ninja, In this blog, we will explore CSS functions and how they can be used to create dynamic and responsive web pages.

Introduction

CSS Functions

Surfing through the web is as easy as clicking a button. But have you ever wondered about the trouble behind putting up a website? What if you opened Facebook and the page looked like this:

without css

Pretty boring?

But if you apply the CSS it will take a new view see below:

css

That’s how important it is to style a webpage. 

The primary markup language used to style web pages is CSS (cascading style sheet). I’m pretty sure you already knew that, but did you know that, like any other programming language, there are functions in CSS too?

To formally define them, 

CSS functions are predefined functions in CSS that enhance the presentation of web pages by altering colours, layout, and fonts. 

Don’t worry if you didn’t, because in this article we’ll learn all about some CSS functions. 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Difference Between CSS Functions and Normal Functions

Before moving on to the actual CSS functions, let us see some basic differences between functions in CSS and the functions we usually use in any programming language.

In any other programming language, functions may be predefined or user-defined. In contrast to this, CSS functions are only predefined. A concept similar to user-defined functions can, however, be implemented using CSS selectors. 

Apart from this, in any programming language, the result of functions are usually returned and then used elsewhere in the program. 

For example, in the Python code below, the function returns the sum of two numbers, which is used to find the average numbers in a list. 

def sum(a,b):
  return a+b

numbers = [1,2,3,4,5]
avg = 0
for each in numbers:
  avg = sum(avg,each)
print(avg)

 

Output :

15

In CSS functions, an output is produced, which is visible in the layout of the webpage. 

For example, the colour of an element may be specified using the rgb( ) or rgba( ) method.

Don’t worry if these functions' names confuse you because next, we’ll learn about the different CSS functions. 

Types of CSS Functions with Examples

So far, we only know a bit about CSS functions, but we haven’t seen any examples. 

Then what are we waiting for?

Let’s see the different types of CSS functions. 

CSS Custom Properties

Do you remember what a big advantage of using functions was? 

If you’re thinking about reusability, you’re right. 

The var( ) function in CSS is used for reusability too. To understand this better, let us see an example. 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
  <body>
    <h1 class="first-para">Hello Ninja, In the root, we have defined two colours.</h1>
    <h2 class="second-para">This heading will use colour 1 </h2>
    <h2 class="third-para">This heading will use colour 2 </h2>
  </body>
</html>

CSS

    :root
      {
          --color1: blue;
          --color2: red;
      }

      .first-para
      {
          color: var(--color1);
      }

      .second-para
      {
          color: var(--color1);
      }

      .third-para
      {
          /* <!-- color1 is reused --> */
          color: var(--color2);
      }

OUTPUT

OUTPUT

In the style sheet, two colours, red and blue, were already specified. Then, for the three headings (from the HTML code), we specified the colours of each heading using the var( ) function. 

Colour Functions

There are two colour functions in CSS - rgb( ) and hsl( ). These two again have another variation - rgba( ) and hsla( ), where ‘a’ denotes alpha which determines the opacity of the colour. You can read more about CSS colour here. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 class="first-para">This heading is using rgba colour</h1>
    <h2 class="second-para">This heading is using rgb colour</h2>
  </body>
</html>

CSS

:root {
  --color1: blue;
  --color2: red;
}

h1 {
  background-color: rgba(218, 55, 14, 0.5);
}
h2 {
  background-color: rgb(173, 216, 230);
}

OUTPUT

Output

Pseudo Class Selector Functions

We have all seen tables where every other row is of a different colour, making the table background look striped. 

Have you ever wondered how they are made?

Well, pseudo-class selector functions are the answer. There are two kinds of these functions that can be used to style a page. Let’s see what they are.

nth-child( )

This function takes an argument that is an equation in n to style only those elements. 

The example given below styles every other paragraph. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="first-para">Hello, my name is Neelakshi. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
  </body>
</html>

CSS

h2:nth-child(2n) {
  background-color: rgb(202, 32, 32);
  color: rgb(174, 201, 68);
}

OUTPUT

OUTPUT

nth - last - child( )

This method starts counting from the end and styles the elements accordingly.

For example, in the code below, every 4th element from the end is styled.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
  </body>
</html>

CSS

h2:nth-last-child(2n) {
  background-color: rgb(255, 162, 0);
  color: white;
}

OUTPUT

output

nth - of - type( )

Here, we can specify the type of the element, for example, even or odd. We can also mention the position of the element. 

Example 1

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
  </body>
</html>

CSS

h2:nth-of-type(odd) {
  background-color: black;
  color: white;
}

OUTPUT

OUTPUT

Example 2

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
  </body>
</html>

CSS

h2:nth-of-type(5)
{
    background-color: black;
    color: white;
}

OUTPUT

OUTPUT

nth - last - of - type( )

This is similar to nth-last-child, where the elements are counted from the end and styled accordingly.

For example, the 5th element from the end, i.e., the first element, will be styled only in the code below.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
  </body>
</html>

CSS

h2:nth-last-of-type(5)
{
    background-color: black;
    color: white;
} 

OUTPUT

OUTPUT

Sizing and Scaling or Transform Functions

In the introduction, we saw a picture of Facebook without any styling. None of the elements was scaled or arranged correctly on the page. So how do we scale the elements?

By using the sizing and scaling functions, of course!

Let’s see the different sizing and scaling functions in CSS.

scaleX( ), scaleY( ), scaleZ( ), scale3d( ) and scale( )

The scaleX( ), scaleY( ), scaleZ( ), scale3d( ) and scale( ) are used to scale elements along the x-axis, y-axis, z-axis, all three axes and in a 2-d plane, respectively. 

The value given as a parameter determines the fraction of scaling. 

The code below shows how the scaleX( ) function scales elements along the x-axis. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
  </body>
</html>

CSS

h2
{
    transform: scaleX(0.7);
}

OUTPUT

OUTPUT

translateX( ), translateY(), translateZ(), translate3d(), and translate()

Similar to the scale function, the translate function can translate any element along all three axes’ individually and simultaneously and in a 2-d plane. 

A percentage or number of pixels determining the translation is passed as a parameter to the function.

An example of translateX( ) is shown below.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
    <h2 class="first-para">Hello, my name is Ninja. How are you?</h2>
    <h2 class="second-para">What's your name?</h2>
    <h2 class="third-para">Do you know about CSS functions?</h2>
    <h2 class="fourth-para">I guess not.</h2>
    <h2 class="fifth-para">Let us learn about CSS functions</h2>
  </body>
</html>

CSS

h2
{
    transform: translate(50px);
}

OUTPUT

OUTPUT

Here, the heading is translated along the x-axis by 50 pixels.

rotateX(), rotateY(), rotateZ(), rotate3d(), and rotate()

These functions are used to rotate an element along the x-axis, y-axis, z-axis, all three axes’ or in a 2-D plane. 

In the example below, we rotate div2 along the x-axis to produce a 3-D effect using the perspective attribute.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
   <div class="div1">
      DIV1
      <div class="div2">DIV2</div>
    </div>   
  </body>
</html>

CSS

 .div1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 5px solid rgb(67, 205, 21);
        perspective: 100px;
      }
      .div2 {
        padding: 50px;
        position: absolute;
        border: 1px solid black;
        background: rgba(255, 153, 0, 0.5);
        transform-style: preserve-3d;
        transform: rotateX(60deg);
      }

OUTPUT

rotate

skewX( ), skewY( ) and skew( )

These methods are used to distort an element. This will be better understood with the help of an example. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="div1">
      DIV1 30 deg skew
      <div class="div2">50 deg incline to plane</div>
    </div>
  </body>
</html>

CSS

.div1
{
    position: relative;
    height: 150px;
    width: 150px;
    margin-left: 50px;
    border: 1px solid rgb(9, 231, 79);
    perspective: 100px;
    transform: skew(30deg);
}
.div2
{
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background: rgba(255, 157, 0, 0.5);
    transform-style: preserve-3d;
    transform: rotateX(50deg);
}

OUTPUT

skew

List of Common CSS Function

Here is a list of some commonly used CSS functions:

  • calc() - performs calculations to determine property values
  • rgb() - sets a color using red, green, and blue values
  • rgba() - sets a color using red, green, blue, and alpha (opacity) values
  • hsl() - sets a color using hue, saturation, and lightness values
  • hsla() - sets a color using hue, saturation, lightness, and alpha (opacity) values
  • url() - sets a background image or other resources
  • linear-gradient() - creates a gradient color effect
  • radial-gradient() - creates a circular gradient color effect
  • var() - sets a variable value
  • clamp() - creates a range with a minimum, preferred, and maximum value
  • min() - sets the smallest value among a set of values
  • max() - sets the largest value among a set of values
  • attr() - sets the value of an HTML attribute as a CSS value.
  • transform() - applies transformations to an element such as rotate, scale, skew, and translate
  • transition() - sets the transition effect for an element when its properties change
  • animation() - sets an animation effect for an element
  • cubic-bezier() - creates a custom cubic-bezier timing function for animations
  • repeat() - repeats an element a certain number of times, either vertically or horizontally
  • calc() - performs calculations to determine property values
  • rem() - sets a font-size relative to the root element's font-size
  • vw() - sets a length relative to the width of the viewport
  • vh() - sets a length relative to the height of the viewport
  • rotate() - rotates an element around a specified point
  • scale() - scales an element up or down in size
  • skew() - skews an element along the X and/or Y axis
  • translate() - moves an element horizontally and/or vertically

In the next part we will discuss more CSS Function.

Frequently Asked Questions 

What are CSS functions?

CSS functions are predefined functions in CSS that enhance the presentation of web pages by altering colours, layout, and fonts.

How are CSS functions different from regular functions?

They are always predefined. They always give an output in the form of changes in the presentation of web pages.

What are the advantages of CSS functions?

Functions in CSS can be easily used to style web pages. Moreover, they also facilitate reusability like normal functions.

Name some common CSS functions. 

Some common functions in CSS are: rgb( ), scale( ), translate( ), rotate( ) and skew( ).

What is the difference between rgb( ) and rgba( )?

The rgb( ) function requires only three parameters - the intensity of red, green and blue, respectively. In contrast, the rgba( ) function requires an additional parameter alpha that determines the opacity of an element.

Conclusion

In this article, we learn what CSS functions are. We also saw some different kinds of functions in CSS and examples of them, but they are not the only functions available in CSS. 

There are so many more functions about which we don’t know yet. So without further ado, let’s learn about them in the second part of this article - CSS Functions Part 2.

Previous article
Z-Index and Stacking Contexts
Next article
CSS Functions- Part 2
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass