Home
Basics
Introduction Adding styles Selectors Headings and Text Lists Links Tables Colors Background Box Model Fonts Icons Display Position Overflow Align Images Tool tips FlexAdvanced
Shadows Rounded Corners Units Specificity Responsive design Media Queries Grid Animations Psuedo elements CSS variables and functions SASS and SCSSMiscellaneous
CSS Templates CSS Interview QnAVariables and functions
Functions
- calc - used to perform mathematical operations
- min - used to get the minimum of given values
- max - used to get the maximum of given values
- clamp - clamp function is used to select ideal value between 2 other values
- var - used to create css variables
- attr - returns the value of attribute of selected element
- rbg - defines color using red, green, blue model
- hsl - defines color using Hue, Saturation, Lightness
Variables
Variables can have local or global scope. To create variables with global scope, you need to use :root selector.
:root {
--primaryColor: blue;
}
body { color: var(--primaryColor); }
You can also create/access these variables from JavaScript.
getComputedStyle(document.documentElement).getPropertyValue('--primaryColor');
document.body.style.setProperty('--primaryColor', 'black');
Web development and Automation testing
solutions delivered!!