Introduction
CSS (Cascading Style Sheets) is used to style web pages. It controls how HTML elements look on the screen. With CSS, you can change colors, fonts, layout, spacing, and more. This cheatsheet will help you understand all important CSS concepts with simple definitions and examples. It is useful for both beginners and people who want to revise CSS quickly.
1. CSS Syntax
Definition: CSS uses a selector and a declaration block.
Example
p {
color: red;
font-size: 16px;
}
Important Point: Each rule ends with a semicolon. The whole block is wrapped in { }.
2. Selectors
Definition: Selectors are used to target HTML elements.
Common Selectors: .,.
/* Element Selector */
h1 {}
/* Class Selector */
.myClass {}
/* ID Selector */
#myId {}
/* Universal Selector */
* {}
/* Grouping */
h1, p, div {}
Important Point: Class uses a dot, ID uses a #.
3. Colors
Definition: Used to change the color of text, background, borders, etc.
Example
color: blue;
background-color: yellow;
border-color: black;
Important Point: Colors can be named, hex (#ffffff), RGB (rgb(255, 255, 255)), or HSL.
4. Fonts and Text
Properties
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
font-style: italic;
text-align: center;
text-decoration: underline;
color: green;
Important Point: Use font-family with fallback fonts.
5. Box Model
Definition: Every HTML element is a box with content, padding, border, and margin.
Example
div {
padding: 10px;
border: 2px solid black;
margin: 20px;
}
Important Point: Total width = content + padding + border + margin.
6. Width and Height
Example
width: 200px;
height: 100px;
max-width: 100%;
Important Point: Use % for responsive design.
7. Backgrounds
Example
background-color: lightblue;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
Important Point: background-size: cover makes the image fill the container.
8. Borders
Example
border: 2px solid red;
border-radius: 10px;
Important Point: Use border-radius to make rounded corners.
9. Display Property
Values
display: block;
display: inline;
display: inline-block;
display: none;
Important Point: None hides the element.
10. Positioning
Types
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
Example
div {
position: absolute;
top: 10px;
left: 20px;
}
Important Point: Use z-index to layer elements.
11. Float and Clear
Example
float: left;
clear: both;
Important Point: Use clear to stop content from wrapping around floated items.
12. Flexbox
Example
display: flex;
justify-content: center;
align-items: center;
Important Point: Flexbox is used for layout. It aligns and distributes space in a container.
13. Grid
Example
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
Important Point: Grid helps create two-dimensional layouts.
14. Overflow
Example
overflow: hidden;
overflow: scroll;
Important Point: Use when content goes outside its container.
15. Visibility
Example
visibility: hidden;
Important Point: The element remains in the layout but is not visible.
16. Opacity
Example
opacity: 0.5;
Important Point: 0 is fully transparent, 1 is fully visible.
17. Transitions
Example
transition: all 0.3s ease;
Important Point: Use for smooth changes on hover or other events.
18. Pseudo-classes
Example
a:hover {
color: red;
}
Important Point: hover, active, focus, nth-child, etc., are pseudo-classes.
19. Pseudo-elements
Example
p::first-line {
font-weight: bold;
}
Important Point: Used to style parts of an element like: before or: after.
20. Media Queries
Example
@media (max-width: 600px) {
body {
background-color: lightgrey;
}
}
Important Point: Used for responsive design based on screen size.
21. Units
Common Units
- px: fixed pixels
- %: relative to parent
- em: relative to font size
- rem: relative to root font size
- vh, vw: relative to viewport
22. Z-index
Example
z-index: 10;
Important Point: A higher z-index means the element will be on top.
23. Important Keyword
Example
color: red !important;
Important Point: Overrides all other rules. Use only when necessary.
24. Box-Sizing
Definition: Controls how the total width and height of an element are calculated.
Example
box-sizing: border-box;
Important Point: With border-box, padding and border are included in the element’s total size. It helps maintain a consistent layout.
25. Visibility vs Display
Example
visibility: hidden; /* Element is hidden but takes up space */
display: none; /* Element is hidden and removed from layout */
Important Point: Use visibility to keep the space, and display to remove it.
26. Object-Fit
Definition: Defines how media (images/videos) should fit into their container.
Example
img {
width: 100%;
height: 200px;
object-fit: cover;
}
Important Point: cover, contain, and fill are the most used values.
27. Cursor
Example
cursor: pointer;
Important Point: Used to change the mouse cursor when hovering over an element.
28. Pointer Events
Example
pointer-events: none;
Important Point: Disables mouse interactions (clicks, hovers) on that element.
29. Aspect Ratio
Example
aspect-ratio: 16 / 9;
Important Point: Maintains a width-to-height ratio. Very useful in responsive design.
30. Custom Properties (CSS Variables)
Definition: Reusable values defined using -- syntax.
Example
:root {
--main-color: blue;
}
p {
color: var(--main-color);
}
Important Point: Helps in managing and reusing styles across a website.
31. Clamp Function
Definition: Sets responsive values with min, preferred, and max.
Example
font-size: clamp(14px, 2vw, 18px);
Important Point: Adapts size based on screen width without media queries.
32. Calc Function
Definition: Performs calculations inside CSS.
Example
width: calc(100% - 50px);
Important Point: Use for dynamic sizing.
33. Scroll Behavior
Example
html {
scroll-behavior: smooth;
}
Important Point: Enables smooth scrolling when navigating to anchors.
34. Isolation
Example
isolation: isolate;
Important Point: Prevents nested elements from blending with the background using mix-blend-mode.
35. Mix Blend Mode
Example
mix-blend-mode: multiply;
Important Point: Controls how an element’s content blends with the background.
36. Filter
Example
filter: blur(4px);
Important Point: Apply visual effects like blur, brightness, grayscale, etc.
37. Line Clamp (for text truncation)
Example (with WebKit prefix)
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
Important Point: Limits the number of lines shown for text with ellipsis.
38. Inheritance and Specificity
Important Concepts
- Some CSS properties are inherited (like color, font).
- Specificity rules determine which CSS rule applies if multiple rules match the same element.
Specificity Order (High to Low)
- Inline styles
- ID selectors
- Class, attribute, pseudo-class selectors
- Element selectors
39. Combinators
Types
/* Descendant */
div p {}
/* Child */
div > p {}
/* Adjacent Sibling */
div + p {}
/* General Sibling */
div ~ p {}
Important Point: Defines the relationship between selectors.
40. Attribute Selectors
Example
input[type="text"] {
border: 1px solid black;
}
Important Point: Useful for styling based on HTML attributes.
Conclusion
CSS is not just about colors and fonts, it's a complete layout and design tool. Mastering it involves understanding both the visual aspects (like colors, spacing, and borders) and the layout systems (like Flexbox, Grid, and positioning). This detailed cheatsheet covers both the basic and advanced topics. Revisit it often, apply what you learn in projects, and explore real use cases to become confident in CSS. CSS evolves, so stay updated with new features like: has(), @layer, or newer layout techniques as they get browser support.
Join the conversation! Your thoughts help the community grow.