Basic CSS properties
🅰️ Font
font-family: Arial, sans-serif; /* font family */
font-weight: bold; /* font weight: normal | bold | 100–900 */
font-style: italic; /* italic */
font-variant: small-caps; /* small caps */
📏 Text size and scaling
font-size: 16px; /* font size */
line-height: 1.5; /* line height */
letter-spacing: 0.5px; /* letter spacing */
word-spacing: 2px; /* word spacing */
🎨 Color and styling
color: black; /* text color: #ffffff */
text-shadow: 2px 2px 5px gray; /* text shadow */
📍 Alignment and styling
text-align: center; /* alignment: left | right | center | justify */
text-indent: 30px; /* first-line indent */
text-transform: uppercase; /* text transform: uppercase | lowercase | capitalize */
direction: rtl; /* text direction: ltr (left to right), rtl (right to left) */
white-space: nowrap; /* prevent line breaks */
🔗 Link styling and underlining
text-decoration: underline; /* underline: none | underline | line-through | overline */
text-decoration-color: red; /* underline color */
text-decoration-style: wavy; /* underline style: solid | double | dotted | dashed | wavy */
🔧 Flexbox
display: flex; /* enable flex container */
flex-direction: row; /* direction: row | column | row-reverse | column-reverse */
flex-wrap: wrap; /* wrapping: nowrap | wrap | wrap-reverse */
justify-content: center; /* horizontal alignment: flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: center; /* vertical alignment: stretch | flex-start | flex-end | center | baseline */
align-content: space-between; /* alignment of rows (when wrapping) */
gap: 10px; /* spacing between items */
🧩 Child elements
flex-grow: 1; /* stretching — how much space it takes (1 = evenly) */
flex-shrink: 0; /* shrinking — whether it can shrink */
flex-basis: 100px; /* base size */
flex: 1 1 100px; /* shorthand: grow shrink basis */
align-self: center; /* individual alignment */
order: 2; /* display order */
💡 Example:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
🧠 Pseudo-classes and pseudo-elements
:hover /* when hovered */
:active /* when clicked */
:focus /* when focused (e.g., in input) */
:visited /* visited link */
:checked /* checked checkbox/radio */
:disabled /* disabled element */
:enabled /* enabled element */
:required /* required form field */
:valid /* valid form value */
:invalid /* invalid form value */
🔁 Logical and positional selectors
:first-child /* first child of the parent */
:last-child /* last child */
:nth-child(2) /* second child */
:nth-child(odd) /* odd children */
:not(.disabled) /* everything except .disabled */
:has(input) /* if contains an input (not supported everywhere) */
:empty /* element with no content */
🧩 Pseudo-elements
::before {
content: "★ ";
color: gold;
}
::after {
content: " →";
color: gray;
}
💡 Example:
a:hover::after {
content: " (link)";
color: gray;
}
🎨 Colors, background, and borders
background-color: #f5f5f5; /* background color */
opacity: 0.8; /* opacity (0 — fully transparent, 1 — fully visible) */
🖼 Background
background-image: url("image.jpg"); /* background image */
background-size: cover; /* scaling: cover | contain */
background-repeat: no-repeat; /* repeat: repeat | no-repeat */
background-position: center center; /* position */
background-attachment: fixed; /* scroll behavior: scroll | fixed */
⏹ Borders
border: 1px solid black; /* shorthand property */
border-width: 2px; /* thickness */
border-style: dashed; /* style: solid | dashed | dotted | double | none */
border-color: red; /* color */
border-radius: 8px; /* border radius (round corners) */
📦 Box shadow
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* box shadow */
🧱 CSS Grid
display: grid; /* enable grid */
grid-template-columns: 1fr 2fr; /* column widths: can be px, %, fr */
grid-template-rows: auto 100px; /* row heights */
grid-template-areas: /* named areas */
"header header"
"sidebar main";
grid-gap: 10px; /* gap between rows and columns */
column-gap: 10px; /* gap only between columns */
row-gap: 20px; /* gap only between rows */
justify-items: center; /* horizontal alignment of cell content */
align-items: start; /* vertical alignment */
📦 Child elements
grid-column: 1 / 3; /* from which to which column (can use span: span 2) */
grid-row: 2 / 4; /* similarly — for rows */
grid-area: header; /* placement in the named area */
justify-self: end; /* horizontal alignment of the element */
align-self: center; /* vertical alignment of the element */
💡 Example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
📱 Responsive design and media queries
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
🔍 Frequently used conditions
(min-width: 600px) /* from 600px and wider */
(max-width: 1024px) /* up to 1024px */
(orientation: landscape) /* landscape orientation */
(pointer: coarse) /* devices with coarse input (fingers) */
💻 Combining conditions
@media (min-width: 768px) and (max-width: 1024px) {
.menu {
display: none;
}
}
🧭 Navigation and cursors
a {
text-decoration: none; /* remove underline */
color: inherit; /* inherit color */
cursor: pointer; /* "hand" cursor */
}
button {
border: none; /* remove border */
background: transparent; /* remove background */
cursor: pointer; /* "hand" cursor */
}
🖱️ Cursor types
cursor: pointer; /* hand (on clickable elements) */
cursor: default; /* default cursor */
cursor: text; /* text cursor (I-beam) */
cursor: move; /* move cursor */
cursor: not-allowed; /* not allowed */
cursor: grab; /* grab hand cursor */
📐 Sizes, margins, and positioning
width: 200px; /* width */
height: 100px; /* height */
min-width: 100px; /* minimum width */
max-width: 500px; /* maximum width */
box-sizing: border-box; /* includes padding and border in width/height */
📦 Internal padding (padding)
padding: 10px; /* padding on all sides */
padding: 10px 20px; /* top/bottom, left/right */
padding: 10px 15px 5px 20px; /* top, right, bottom, left */
📤 External margins (margin)
margin: 0 auto; /* centered horizontally */
margin: 10px; /* all sides */
margin: 10px 20px; /* top/bottom, left/right */
margin: 10px 15px 5px 20px; /* top, right, bottom, left */
📌 Positioning
position: static; /* default position */
position: relative; /* relative to its normal position */
position: absolute; /* absolutely positioned (inside a parent with relative/absolute) */
position: fixed; /* fixed to the screen */
position: sticky; /* "sticks" when scrolling */
top: 10px; left: 20px; /* offsets */
z-index: 10; /* stacking order */
🧱 Display and element type
display: block; /* block element */
display: inline; /* inline element */
display: inline-block; /* inline, but with dimensions */
display: none; /* hide the element */
visibility: hidden; /* hide the element, but keep space */
🧮 Overflow
overflow: visible; /* default */
overflow: hidden; /* cut off excess content */
overflow: scroll; /* always show scrollbar */
overflow: auto; /* show scrollbar when necessary */
🎞️ Animations and transitions
transition: all 0.3s ease; /* property, duration, timing function */
transition-property: color, background; /* properties to animate */
transition-duration: 0.5s;
transition-timing-function: ease-in-out; /* speed: linear | ease | ease-in | ease-out | cubic-bezier(...) */
transition-delay: 0.2s; /* delay */
💡 Example:
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: red;
}
🎬 Animations (@keyframes + animation)
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0.2s;
animation-iteration-count: infinite; /* or 1 */
animation-direction: alternate; /* normal | reverse | alternate */
animation-timing-function: ease-in;
animation-fill-mode: forwards; /* keeps the final state */
}
animation: fadeIn 1s ease-out forwards; /* shorthand */
🔄 Transformations
transform: scale(1.1); /* scale */
transform: rotate(45deg); /* rotation */
transform: translateX(100px); /* horizontal translation */
transform: skewX(10deg); /* skew along the X axis */
🌫️ Effects and filters
filter: blur(5px); /* blur */
filter: brightness(120%); /* brightness */
filter: grayscale(100%); /* black and white */