* – 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 */ }