Created Using Generative AI
The following research summary was created using generative AI.
CSS functional notation refers to values written using a function format with parentheses. These functions allow calculations, reusable values, and dynamic styling, which makes CSS more flexible.
calc()
The calc() function performs math inside CSS. It is useful when combining values like percentages and pixels.
clamp()
The clamp() function sets a value between a minimum and maximum range. It is commonly used for responsive design.
rgb()
The rgb() function defines colors using red, green, and blue values.
var()
The var() function accesses CSS variables, allowing reusable values across a stylesheet.
Formal Citation
“Research CSS Functional Notation (CSS Functions). Document 4 different CSS functions.” prompt. ChatGPT, GPT-5.3, OpenAI, 23 Apr. 2026, https://chat.openai.com/.
Demonstration: Created By Me
Example HTML
<div class="demo-box">Responsive Box</div>
<div class="color-demo"></div>
<div class="var-demo">Variable Demo</div>Example CSS
:root {
--spacing: 20px;
--main-color: rgb(79, 70, 229);
}
.demo-box {
width: calc(100% - 40px);
font-size: clamp(16px, 2vw, 24px);
padding: var(--spacing);
}
.color-demo {
background: rgb(100, 150, 255);
}
.var-demo {
padding: var(--spacing);
}