/* Element Selector */
div { }

/* Class Selector */
.class-name { }

/* ID Selector */
#id-name { }

/* Attribute Selector */
[type="text"] { }

/* Pseudo-classes */
:hover { }
:focus { }
:first-child { }
:last-child { }

/* Pseudo-elements */
::before { }
::after { }
::first-line { }

/* Combinators */
div > p { }  /* Direct child */
div p { }    /* Descendant */
div + p { }  /* Adjacent sibling */
div ~ p { }  /* General sibling */

/* Box Model Properties */
.element {
  /* Content */
  width: 100px;
  height: 100px;
  
  /* Padding */
  padding: 10px;
  padding: 10px 20px;  /* top/bottom left/right */
  padding: 10px 20px 15px 25px;  /* top right bottom left */
  
  /* Border */
  border: 1px solid black;
  border-radius: 5px;
  
  /* Margin */
  margin: 10px;
  margin: 10px auto;  /* Center horizontally */
  
  /* Box Sizing */
  box-sizing: border-box;  /* Include padding and border in width/height */
}

/* Color Values */
.element {
  /* Named colors */
  color: red;
  
  /* Hex */
  color: #ff0000;
  color: #f00;
  
  /* RGB */
  color: rgb(255, 0, 0);
  
  /* RGBA */
  color: rgba(255, 0, 0, 0.5);
  
  /* HSL */
  color: hsl(0, 100%, 50%);
  
  /* Background */
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
  /* Shorthand */
  background: #f0f0f0 url('image.jpg') no-repeat center/cover;
}

/* Flex Container */
.container {
  display: flex;
  flex-direction: row;  /* row | column */
  flex-wrap: wrap;     /* wrap | nowrap */
  justify-content: space-between;  /* flex-start | center | space-around */
  align-items: center;  /* flex-start | stretch | baseline */
  gap: 10px;          /* Space between items */
}

/* Flex Items */
.item {
  flex: 1;            /* grow shrink basis */
  flex-grow: 1;       /* Grow factor */
  flex-shrink: 0;     /* Shrink factor */
  flex-basis: auto;   /* Initial size */
  align-self: center; /* Override container alignment */
  order: 1;           /* Display order */
}

/* Grid Container */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  
  /* Named areas */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

/* Grid Items */
.item {
  grid-column: 1 / 3;  /* Start / End */
  grid-row: 1 / 2;
  grid-area: header;   /* Named area */
  
  /* Alignment */
  justify-self: center;
  align-self: center;
}

/* Responsive Grid */
.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Position Types */
.element {
  position: static;    /* Default */
  position: relative;  /* Relative to normal position */
  position: absolute;  /* Relative to nearest positioned ancestor */
  position: fixed;     /* Relative to viewport */
  position: sticky;    /* Hybrid of relative and fixed */
  
  /* Offset Properties */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Z-index */
  z-index: 1;
}

/* Float */
.element {
  float: left;
  clear: both;
}

/* Font Properties */
.element {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.5;
  
  /* Shorthand */
  font: italic bold 16px/1.5 Arial, sans-serif;
}

/* Text Properties */
.element {
  color: #333;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 1px;
  word-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* @font-face */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Variable Fonts */
@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 200%;
}

/* Transition Properties */
.element {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
  
  /* Shorthand */
  transition: all 0.3s ease 0s;
  
  /* Multiple Properties */
  transition: 
    background-color 0.3s ease,
    transform 0.5s ease-in-out;
}

/* Common Use Cases */
.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

/* Keyframes */
@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Animation Properties */
.element {
  animation-name: slide;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  
  /* Shorthand */
  animation: slide 1s ease 0s infinite alternate forwards;
}

/* Multiple Keyframes */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Transform Properties */
.element {
  /* 2D Transforms */
  transform: translate(100px, 100px);
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: skew(10deg, 5deg);
  
  /* 3D Transforms */
  transform: translate3d(100px, 100px, 100px);
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
  
  /* Multiple Transforms */
  transform: translate(100px, 100px) rotate(45deg) scale(1.5);
  
  /* Transform Origin */
  transform-origin: center center;
}

/* Basic Media Queries */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

/* Multiple Conditions */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 750px;
  }
}

/* Device Orientation */
@media screen and (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none;
  }
}

/* Relative Units */
.element {
  /* Viewport Units */
  width: 100vw;
  height: 100vh;
  font-size: 2vmin;
  
  /* Percentage */
  width: 50%;
  
  /* Relative to parent font size */
  font-size: 1.5em;
  font-size: 1.5rem;
  
  /* Container Queries */
  @container (min-width: 400px) {
    .card {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
}

/* Art Direction */
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

/* CSS Background Images */
.element {
  background-image: url('small.jpg');
}

@media (min-width: 800px) {
  .element {
    background-image: url('large.jpg');
  }
}

/* CSS Custom Properties */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

.element {
  color: var(--primary-color);
  font-size: var(--font-size-base);
  margin: calc(var(--spacing-unit) * 2);
  
  /* Fallback */
  color: var(--primary-color, #000);
  
  /* Dynamic Updates */
  --primary-color: #ff0000;
}

/* :is() and :where() */
:is(header, main, footer) p {
  color: blue;
}

:where(header, main, footer) p {
  color: blue;
}

/* :has() */
div:has(> img) {
  border: 1px solid red;
}

/* :not() with multiple selectors */
p:not(.special, .important) {
  color: gray;
}

/* :focus-visible */
button:focus-visible {
  outline: 2px solid blue;
}

/* Container Queries */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Subgrid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
}

/* Masonry Layout */
.masonry {
  columns: 3;
  column-gap: 20px;
}

.masonry-item {
  break-inside: avoid;
}