Selectors
p { ... } (element)
.class { ... } (class)
#id { ... } (ID)
Colors
color: red;
background: #00ffcc;
color: rgb(0,255,204);
Box Model
margin: 10px;
padding: 20px;
border: 1px solid #000;
Font & Text
font-size: 2rem;
font-family: 'Fira Mono', monospace;
text-align: center;
Backgrounds
background-color: #222;
background-image: url('img.png');
background-size: cover;
Flexbox
display: flex;
justify-content: center;
align-items: center;
Grid
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
Positioning
position: relative;
top: 10px; left: 20px;
z-index: 2;
Pseudo-classes
a:hover { color: #0ff; }
li:first-child { ... }
Media Queries
@media (max-width: 600px) { ... }
Transitions
transition: all 0.3s ease;
Anime Tip!
Use transition for smooth hover effects:
button:hover { background: #0ff; transition: 0.2s; }