title: :is() #pseudo_class 
 
```css
/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
 
/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
title: 2D-3D transform
 
```css
 
div {  transform: rotate(20deg);}
 
div {  transform: rotateY(150deg);}
 
title: Transitions
 
```css
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}
 
div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
title: CSS variables
 
To create a variable with local scope, declare it inside the selector that is going to use it.
 
```css
 
:root {  --blue: #1e90ff;  
  --white: #ffffff;}  
  
body { background-color: var(--blue); }
title: Combinators
 
There are four different combinators in CSS:
 
-   descendant selector (space)
-   child selector (>)
-   adjacent sibling selector (+)
-   general sibling selector (~)

Css pie chart

https://www.freecodecamp.org/news/css-only-pie-chart/- radial gradient- conic gradient- background: radial-gradient(circle at 50% 50%,ffffff, #000000);-