CSS A to Z — Complete Guide
Simple, friendly, and detailed — like a book.
This guide is written in simple English so your audience (including Hindi-speaking kids) can understand.
Each chapter contains explanations, examples, and practice exercises. Use the code samples directly in your
editor.
Table of Contents
1. Introduction — What is CSS?
2. Ways to add CSS (Inline, Internal, External)
3. CSS Syntax & Comments
4. Colors in CSS (names, hex, rgb, hsl)
5. Selectors (basic to advanced)
6. Specificity & Cascade
7. The Box Model (content, padding, border, margin)
8. Display, Visibility, and Positioning
9. Units & Measurements (px, em, rem, %, vw, vh)
10. Typography (fonts, text properties)
11. Backgrounds & Gradients
12. Borders, Radius & Shadows
13. Flexbox — layout made easy
14. CSS Grid — two-dimensional layout
15. Responsive Design & Media Queries
16. CSS Transitions & Animations
17. Transformations (2D & 3D)
18. Pseudo-classes & Pseudo-elements
19. Forms & Input Styling
20. CSS Variables (Custom Properties)
21. Preprocessors (Sass overview)
22. Accessibility & Best Practices
23. Performance tips
24. Debugging & Browser DevTools
25. Projects (with step-by-step code)
26. Cheatsheet & Quick Reference
27. Exercises & Answers
28. Further Reading & Tools
1
1. Introduction — What is CSS?
CSS (Cascading Style Sheets) controls how HTML elements look on screen. HTML gives structure; CSS gives
style — colors, layout, spacing, and responsiveness.
Why learn CSS? - Make websites beautiful and usable. - Control layout for different devices. - Improve user
experience.
2. Ways to add CSS
Inline CSS
Used inside the HTML element using style attribute. Small, quick, not recommended for large projects.
<p style="color: blue; font-size: 18px;">Hello world</p>
Internal (Embedded) CSS
Inside <style> tag in the HTML <head> .
<head>
<style>
body { font-family: Arial, sans-serif; }
</style>
</head>
External CSS
Create a .css file and link it. Best practice for real projects.
<link rel="stylesheet" href="[Link]">
[Link] :
body { margin: 0; }
2
3. CSS Syntax & Comments
Basic rule:
selector { property: value; property2: value2; }
Comments:
/* This is a comment */
Example:
h1 { color: #333; font-size: 32px; }
4. Colors in CSS
Ways to write colors: - Color names: red , blue , green - Hex: #ff0000 , #0f0 (short) - RGB:
rgb(255, 0, 0) - RGBA: rgba(255, 0, 0, 0.5) (with alpha) - HSL: hsl(120, 50%, 50%)
Example:
p { color: #1a73e8; background: rgba(0,0,0,0.05); }
Tip: Use HSL when you want to adjust lightness easily.
5. Selectors (A to Z)
Basic selectors
• Type: p {}
• Class: .btn {}
• ID: #main {}
• Universal: * {}
3
Grouping selectors
h1, h2, h3 { font-family: sans-serif; }
Descendant & Child
• Descendant: .card p {} (any nested p )
• Child: .card > p {} (direct child only)
Adjacent & General sibling
• Adjacent: h1 + p {} (immediately after)
• General sibling: h1 ~ p {} (any following sibling)
Attribute selectors
a[target] { }
a[href^="https"] { } /* starts with */
a[href$=".pdf"] { } /* ends with */
Pseudo-classes & Pseudo-elements (short intro)
• Pseudo-class: a:hover {}
• Pseudo-element: p::first-line {}
6. Specificity & Cascade
Which styles win? - Inline styles (highest) — e.g., style="..." - IDs (100) - Classes, attributes, pseudo-
classes (10) - Elements, pseudo-elements (1)
Example:
/* element */ p { color: black; } /* 1 */
/* class */ .special { color: blue; } /* 10 */
/* id */ #main { color: red; } /* 100 */
Result: #main .special p -> color red (ID wins).
Use !important sparingly — it breaks maintainability.
4
7. The Box Model
Each element is a box: content | padding | border | margin .
.box { width: 200px; padding: 10px; border: 2px solid #ccc; margin: 20px; }
box-sizing controls whether width includes padding/border.
box-sizing: content-box; /* default */
box-sizing: border-box; /* recommended for layout */
Practice: change box-sizing and observe.
8. Display, Visibility, Positioning
display
• block , inline , inline-block , none , flex , grid
visibility
• visibility: hidden hides but keeps space.
position
• static (default)
• relative — positioned relative to normal spot
• absolute — positioned relative to nearest positioned ancestor
• fixed — relative to viewport
• sticky — acts like relative until a scroll threshold
Example:
.header { position: sticky; top: 0; }
5
9. Units & Measurements
Absolute: px (pixels) Relative: em , rem , % , vw , vh
• em relative to parent font-size
• rem relative to root ( html ) font-size — recommended for consistent scaling
Example:
html { font-size: 16px; }
h1 { font-size: 2rem; }
10. Typography
Properties: font-family , font-size , line-height , font-weight , letter-spacing , text-
transform , text-align .
Example:
body { font-family: 'Inter', sans-serif; line-height: 1.6; }
h1 { font-weight: 700; }
Web fonts: use Google Fonts link or @font-face .
11. Backgrounds & Gradients
Simple background:
body { background-color: #f8f9fa; }
Image background:
.hero { background-image: url('[Link]'); background-size: cover; background-
position: center; }
Gradients:
6
.button { background: linear-gradient(90deg, #ff7a18, #af002d); }
12. Borders, Radius & Shadows
Border radius:
.card { border-radius: 12px; }
Box shadow:
.card { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
Border shorthand:
border: 1px solid #ddd;
13. Flexbox
Flexbox is for 1D layouts (row or column). Main concepts: - Container: display: flex - Main axis & cross
axis - justify-content , align-items , flex-direction , flex-wrap , gap
Example:
<div class="nav">
<div>Logo</div>
<div class="links">Home About Contact</div>
</div>
.nav { display: flex; align-items: center; justify-content: space-between;
padding: 12px; }
.links { display: flex; gap: 16px; }
Flexible items:
7
.item { flex: 1 1 200px; } /* grow shrink basis */
Practice project: Create a responsive navbar.
14. CSS Grid
Grid is for 2D layout. Main properties: - display: grid - grid-template-columns ,
grid-template-rows - gap , grid-column , grid-row
Example:
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.item { background: #fff; padding: 12px; }
Responsive change:
@media (max-width: 800px) {
.gallery { grid-template-columns: repeat(2, 1fr); }
}
Advanced: grid-template-areas for semantic layout.
15. Responsive Design & Media Queries
@media rules change styles by viewport.
@media (max-width: 600px) {
.nav { flex-direction: column; }
}
Mobile-first approach: write base styles for small screens, then add min-width queries.
Breakpoints example:
8
@media (min-width: 768px) { /* tablet */ }
@media (min-width: 1024px) { /* desktop */ }
Fluid typography with clamp() :
h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }
16. CSS Transitions & Animations
Transitions (simple)
.button { transition: transform 0.2s ease, box-shadow 0.2s; }
.button:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,
0.12); }
Keyframe animations
@keyframes floatUp {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.card { animation: floatUp 0.6s ease-out; }
Keep animations subtle for good UX.
17. Transformations (2D & 3D)
Properties: transform: translate(), rotate(), scale(), skew()
Example:
.icon { transform: rotate(45deg) scale(1.1); }
3D:
9
.card { transform-style: preserve-3d; }
18. Pseudo-classes & Pseudo-elements
Common pseudo-classes: - :hover , :focus , :active , :nth-child(n) , :first-child
Pseudo-elements: - ::before , ::after , ::first-line , ::first-letter
Example using ::before to add an icon:
.button::before { content: ""; display: inline-block; width: 16px; height:
16px; background-image: url([Link]); margin-right: 8px; }
19. Forms & Inputs Styling
Style inputs carefully for accessibility.
input, textarea, select { padding: 8px 12px; border: 1px solid #ccc; border-
radius: 6px; }
input:focus { outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,0.12); }
Style placeholders:
::placeholder { color: #999; }
Custom checkbox example (short): use hidden real input + stylized label.
20. CSS Variables (Custom Properties)
Define reusable values in :root .
:root {
--brand: #1a73e8;
--gap: 12px;
10
}
.button { background: var(--brand); padding: var(--gap); }
Variables can be updated in different scopes for themes.
21. Preprocessors (Sass overview)
Sass gives variables, nesting, mixins, and functions.
Example (Sass):
$brand: #1a73e8;
.container { max-width: 1200px; .card { padding: 12px; } }
Compile Sass to CSS using a build tool (npm, webpack, vite).
22. Accessibility & Best Practices
• Use relative font sizes and good contrast.
• Ensure focus states for interactive elements.
• Use aria-* attributes when needed.
• Avoid display:none for content that must be reachable by screen readers.
Contrast check: text should have at least 4.5:1 contrast ratio for normal text.
23. Performance tips
• Minimize CSS file size (use minification).
• Load critical CSS inline for above-the-fold content.
• Defer non-critical CSS using media or rel="preload" .
• Avoid heavy selectors like body div ul li a span {} — be specific but short.
24. Debugging & Browser DevTools
• Use Elements panel to inspect and edit styles.
• Toggle classes, test layout issues with box model view.
• Use Device toolbar for responsive testing.
11
• Use :hov panel to force :hover / :active states.
25. Projects (Step-by-step)
Project 1 — Simple responsive profile card
HTML:
<div class="card">
<img src="[Link]" alt="avatar" class="avatar">
<h2>Aditya Kumar</h2>
<p>Frontend developer</p>
<div class="links"><a href="#">Follow</a></div>
</div>
CSS:
.card { width: 320px; padding: 18px; border-radius: 12px; box-shadow: 0 6px
18px rgba(0,0,0,0.05); background: #fff; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
@media (max-width: 420px) { .card { width: 100%; } }
Project 2 — Responsive Navbar with mobile menu
(Include display:flex , hamburger with :checked input trick, or simple JS)
26. Cheatsheet & Quick Reference
• Center a div: display: flex; align-items: center; justify-content: center;
• Make element full screen: width:100vw; height:100vh;
• Hide scrollbar: overflow: auto; scrollbar-width: none; (some browser differences)
27. Exercises & Answers
1. Build a 3-column grid that becomes 1 column on mobile. (Answer: use grid-template-columns:
repeat(3,1fr) and media query)
2. Create a card with hover lift using transform and box-shadow .
12
3. Make a button style using CSS variables.
(Answers included at end of document.)
28. Further Reading & Tools
• MDN web docs (CSS) — read often
• CSS-Tricks
• Google Fonts
• Can I Use (browser support)
Appendix — Common Code Snippets
Center text & box:
.container { display:flex; align-items:center; justify-content:center; height:
100vh; }
Sticky footer basic:
body { display:flex; min-height:100vh; flex-direction:column; }
main { flex:1; }
footer { height:60px; }
Button with ripple-like hover (simple):
.btn { padding: 10px 18px; border-radius: 8px; transition: transform .18s
ease; }
.btn:active { transform: scale(.98); }
Answers to Exercises
1. Grid responsive answer:
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
13
2. Card hover lift:
.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,
0,0,0.12); }
3. Button with variables:
:root { --brand: #1a73e8; --pad: 10px 16px; }
.btn { background: var(--brand); padding: var(--pad); border-radius: 8px;
color: white; }
Closing notes
This book-style guide covers most CSS topics from beginner to advanced. If you want, I can: - Convert it to a
downloadable PDF - Make it 30+ pages with more examples and images - Add more projects (portfolio site,
blog layout, e-commerce card grid)
Tell me what you want next and I will continue.
14
