CSS Cheatsheet

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Sets prioritized fonts for text */

font-style: italic; /* Makes text italic */

font-variant: small-caps; /* Displays lowercase as small capital letters */

font-weight: bold; /* or 100–900 for thickness control */

font-size: 1rem; /* Sets text size, responsive with rem */

font: italic small-caps bold 1rem/1.5 'Segoe UI'; /* Combines style, variant, weight, size, line-height, family */

font-kerning: normal; /* Controls spacing between letters */

font-stretch: condensed; /* Expands or condenses text width */

font-variant-ligatures: common-ligatures; /* Enables typographic ligatures */

text-align: justify; /* Aligns text evenly across the line */

letter-spacing: 0.15em; /* Adjusts space between characters */

text-decoration: underline; /* Adds decoration like underline/overline/line-through */

word-spacing: 0.25em; /* Sets spacing between words */

text-transform: uppercase; /* Converts text to uppercase */

text-indent: 0.5cm; /* Indents the first line of text */

line-height: 1.5; /* Sets vertical spacing between lines */

text-overflow: ellipsis; /* Adds ... when text overflows */

white-space: nowrap; /* Prevents text from wrapping */

word-break: break-word; /* Breaks long words to fit */

hyphens: auto; /* Allows automatic hyphenation */

background-image: url("path"), linear-gradient(...); /* Adds image or gradient */

background-position: center; /* Positions background image */

background-size: cover; /* Scales image to cover element */

background-clip: text; /* Clips background to text */

background-blend-mode: multiply; /* Blends background layers */

background: url('image.jpg') no-repeat center/cover; /* Sets multiple background properties at once */

border: 2px solid #000; /* Adds border with size, style, color */

border-radius: 15px; /* Rounds corners */

outline: 2px dashed red; /* Adds outline outside element box */
outline-offset: 4px; /* Adjusts distance from element */

border-image: url(border.png) 30 round; /* Uses image as border */

margin: 10px 20px; /* Outer spacing */
padding: 5px 10px; /* Inner spacing */

width: 100%; /* Element width */
height: fit-content; /* Height based on content */

box-sizing: border-box; /* Includes padding/border in total size */

overflow: hidden; /* Hides overflow */
overflow-x: scroll; /* Scroll horizontally */
overflow-y: auto; /* Scroll vertically as needed */

aspect-ratio: 16/9; /* Keeps width:height ratio */

object-fit: cover; /* Scales image/video to fill box */

color: #333; /* Text color */

opacity: 0.8; /* Element transparency */

color: hsl(200, 80%, 40%); /* HSL color format */

position: relative; /* Sets positioning context */

z-index: 10; /* Stacking order */

display: flex; /* Activates flex layout */
flex-direction: row; /* Row direction */
justify-content: space-between; /* Distributes space */
align-items: center; /* Aligns items vertically */
gap: 1rem; /* Space between flex items */

flex: 1; /* Flexible width */
align-self: center; /* Individual alignment */
order: 2; /* Changes visual order */

display: grid; /* Enables grid layout */
grid-template-columns: 1fr 2fr; /* Defines columns */
grid-template-rows: auto 1fr auto; /* Defines rows */
grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer"; /* Named grid areas */
gap: 1rem; /* Space between grid items */

grid-area: main; /* Places item in named area */

:root {
  --primary-color: #007bff; /* Declares variable */
}
 
div {
  color: var(--primary-color); /* Uses variable */
}

@media (max-width: 768px) {
  body {
    font-size: 14px; /* Applies styles on small screens */
  }
}

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
 
.element {
  animation: slide 1s ease-in-out infinite alternate; /* Animates element */
}

transition: all 0.3s ease-in-out; /* Smoothly animates property changes */

transform: scale(1.1) rotate(10deg); /* Moves, rotates, scales elements */

scroll-snap-type: x mandatory; /* Creates snap scrolling */

backdrop-filter: blur(10px); /* Adds blur behind element */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } /* Styles scrollbar */

font-size: clamp(1rem, 2vw, 1.5rem); /* Responsive font size */