CSS Cheatsheet with Explanations
Level 1: CSS Basics
Syntax:
selector { property: value; }
- Selector targets the HTML element.
- Property is the style you want to change.
- Value is the value assigned to that property.
Including Styles:
- Inline: <h1 style="color:red;"> for quick one-off styling.
- Internal: <style> h1 { color:red; } </style> used within <head>.
- External: <link rel="stylesheet" href="style.css"> best for large projects.
Selectors:
- p element selector
- #id ID selector (unique)
- .class class selector (reusable)
- div, p group selector
- div p descendant selector
Comments:
/* Add notes or temporarily disable code */
Level 2: Color System & Background
Color Models:
- RGB: rgb(255,0,0) red, green, blue (0-255 range).
- HEX: #FF0000 same as RGB in hex format.
- RGBA: rgba(255,0,0,0.5) RGB with transparency.
CSS Cheatsheet with Explanations
Background:
- background-color: lightblue;
- background-image: url("img.jpg");
- background shorthand: background: #fff url('img.jpg') no-repeat center;
Dimensions & Visibility:
- width/height: Controls element size.
- visibility: hidden; hides the element but still takes space.
Level 3: Text Properties
Text Styling:
- text-align: center; aligns text horizontally.
- text-decoration: underline; adds underline, overline, etc.
- text-transform: uppercase; capitalizes text.
- line-height: 1.5; spacing between lines.
Font Styling:
- font-size: 16px;
- font-weight: bold;
- font-style: italic;
- font-family: 'Arial', sans-serif; preferred fonts.
Level 4: Box Model
Box Model Layers:
- content padding border margin
Properties:
CSS Cheatsheet with Explanations
- padding: space inside element, around content.
- margin: space outside the border.
- border: outline around padding (e.g., 2px solid black).
- border-radius: 10px; for rounded corners.
- box-sizing: border-box; includes padding & border in total width/height.
Level 5: Display & Position
Display Types:
- block: takes full width (e.g., <div>)
- inline: fits content (e.g., <span>)
- inline-block: like inline but allows width/height.
- none: hides element.
Positioning:
- static: default flow.
- relative: relative to its normal position.
- absolute: relative to nearest positioned ancestor.
- fixed: relative to viewport (doesnt scroll).
- z-index: controls stacking order.
Responsive Units:
- % relative to parent.
- em/rem relative to font size.
- vw/vh relative to viewport size.
Semantic Tags:
<header>, <main>, <footer>, etc. for better SEO and readability.
CSS Cheatsheet with Explanations
Level 6: Flexbox, Grid & Media Queries
Flexbox (1D layout):
- display: flex;
- flex-direction: row | column;
- justify-content: center | space-between;
- align-items: center;
- flex-wrap: wrap;
Flex Items:
- flex-grow: defines ability to grow.
- flex-shrink: shrink if needed.
- order: change order.
- align-self: override container alignment.
Grid (2D layout):
- display: grid;
- grid-template-columns: repeat(3, 1fr);
Media Queries:
@media (min-width: 600px) {
body { background: lightblue; }
Level 7: Animation, Transition & Transform
Pseudo-classes:
- :hover, :active define states of elements.
Transitions:
CSS Cheatsheet with Explanations
- transition: all 0.5s ease-in-out; smooth changes.
Transform:
- rotate(45deg), scale(1.2), translateX(50px)
Animations:
@keyframes slide {
from { left: 0; }
to { left: 100px; }
animation: slide 2s infinite; repeating animation.
