CSS Guide: Common CSS Functions

CSS Function Example 1: rgb()

The rgb() function uses numbers to specify a color. "r" stands for red, "g" is green and "b" is blue.

How you write this function in CSS and how it looks in HTML:

color: rgb(200, 20, 30);

color: rgb(100, 10, 20);

color: rgb(50, 5, 10);

CSS Function Example 2: url()

The url() function is probably one you've used before learning specifically about CSS functions. It's used to place outside links in your CSS. It can be used for images, fonts, and other stylesheets.

How you write it in CSS and how it looks in HTML:

background-image: url(../link-to-image.jpg);

CSS Function Example 3: :nth-child()

The nth-child() function lets you target one or more elements in a group. It only works if the group of elements are the child of the same parent.

Example: Make a specific item in a list bold text:

li:nth-child(3) { font-weight: bold; }

CSS Function Example 4: blur()

The blur() function does what it sounds like; it blurs the element you apply it to. The blur() function is on a scale, so depending on what amount of pixel's you apply, it'll blur it less or more.

How to write in CSS and how it looks in HTML:

filter: blur(3px);

Text with blur()

CSS Function Example 5: rotate()

The rotate() function also does what it sounds like; it rotates an element depending on the degree you use.

How to write in CSS and how it looks in HTML:

transform: rotate(-15deg);

Text with rotate