CSS Cheat Sheet

* – Universal selector

element – Type selector (e.g., p, div)

.class – Class selector

#id – ID selector

element, element – Group selector

element element – Descendant selector

element > element – Direct child selector

element + element – Adjacent sibling selector

element ~ element – General sibling selector

[attribute] – Attribute selector

[attribute=value] – Exact attribute match

[attribute^=value] – Starts with value

[attribute$=value] – Ends with value

[attribute*=value] – Contains value

:hover – Hover state

:nth-child(n) – Selects the nth child

:first-of-type – Selects first of its type

:last-of-type – Selects last of its type

width: auto; – Defines width

height: auto; – Defines height

padding: 10px; – Space inside the border

margin: 10px; – Space outside the border

border: 1px solid black; – Border styling

box-sizing: border-box; – Includes padding & border in size

outline: 2px dashed red; – Outline styling

overflow: hidden; – Hides overflow content

clip-path: circle(50%); – Clips an element into a shape

font-family: Arial, sans-serif;

font-size: 16px;

font-weight: bold;

text-align: center;

text-decoration: underline;

letter-spacing: 2px;

line-height: 1.5;

word-wrap: break-word;

text-shadow: 2px 2px 5px rgba(0,0,0,0.5);

color: red;

background-color: blue;

background-image: url(image.jpg);

background-size: cover;

background-position: center;

opacity: 0.5;

mix-blend-mode: multiply;

display: flex;

justify-content: center; (flex-start, flex-end, space-between, space-around, space-evenly)

align-items: center; (flex-start, flex-end, stretch, baseline)

flex-direction: row; (column, row-reverse, column-reverse)

flex-wrap: wrap;

align-self: flex-start;

order: 2;

flex-grow: 1;

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: 100px auto;

gap: 10px;

align-content: center;

grid-column: span 2;

grid-row: span 2;

position: static; (relative, absolute, fixed, sticky)

top: 10px;

left: 10px;

right: 0;

bottom: 0;

z-index: 100;

visibility: hidden;

display: none;

transition: all 0.3s ease-in-out;

@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

animation: fadeIn 2s infinite alternate;

transform: scale(1.1);

rotate: 45deg;

translate: 50px, 100px;

box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

@media (max-width: 600px) { /* CSS rules */ }

@supports (display: grid) { /* CSS rules */ }

@container (width > 600px) { /* CSS rules */ }