====== CSS Cheat Sheet ======

=== Selectors ===

''*'' – 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

=== Box Model ===

''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

=== Typography ===

''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);''

=== Colors & Backgrounds ===

''color: red;''

''background-color: blue;''

''background-image: url(''image.jpg'');''

''background-size: cover;''

''background-position: center;''

''opacity: 0.5;''

''mix-blend-mode: multiply;''

=== Flexbox ===

''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;''

=== Grid ===

''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;''

=== Positioning ===

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

''top: 10px;''

''left: 10px;''

''right: 0;''

''bottom: 0;''

''z-index: 100;''

''visibility: hidden;''

''display: none;''

=== Transitions & Animations ===

''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);''

=== Responsive Design ===

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

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

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