CSS Cheat Sheet
CSS Cheat Sheet
===============
1. Selectors
------------
- Universal: *
- Type: element
- Class: .classname
- ID: #id
- Grouping: selector1, selector2
- Attribute: [attr=value]
2. Box Model
------------
- Margin: space outside the border
- Border: edge around the padding
- Padding: space inside the border
- Content: area where content is displayed
3. Colors
---------
- Name: red, blue
- Hex: #RRGGBB
- RGB: rgb(255, 0, 0)
- HSL: hsl(0, 100%, 50%)
4. Text
-------
- color: #333;
- font-size: 16px;
- font-family: Arial, sans-serif;
- font-weight: bold;
- text-align: center;
- line-height: 1.5;
5. Background
-------------
- background-color: #f0f0f0;
- background-image: url('image.jpg');
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
6. Positioning
--------------
- Static: position: static;
- Relative: position: relative;
- Absolute: position: absolute;
- Fixed: position: fixed;
7. Flexbox
----------
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: row;
- gap: 10px;
8. Grid
-------
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
- grid-column: 1 / span 2;
9. Animation
------------
- animation-name: slideIn;
- animation-duration: 2s;
- animation-timing-function: ease-in-out;
- animation-iteration-count: infinite;
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
10. Media Queries
-----------------
@media (max-width: 768px) {
body { font-size: 14px; }
