ToolScope Notes
CSS Notes in Simple English — Code Scope
Free CSS notes for beginners: what CSS is, selectors, colours and fonts, the box model, display, Flexbox, Grid, positioning, responsive design, transitions and animations — plus a complete landing-page project and two deep-dive lessons on animations and CSS variables. Code examples, common mistakes and practice tasks in every lesson. From the Code Scope CSS series.
CSS Notes
14 LESSONS · CODE SCOPE SERIES 2.1–2.14The design layer, step by step: what CSS is and its three homes, selectors and their weights, colours and fonts, the box model, display, Flexbox, Grid, positioning, responsive design, motion — a full landing-page project, then deep dives on animations and variables.
CSS Kya Hai? + 3 Ways to Add CSS
What CSS is, the selector–property–value rule, and the 3 ways to add CSS (inline, internal, external) — plus who wins when they fight: the cascade.
Selectors (element, class, id, attribute)
CSS finds elements by address: element, .class, #id, [attribute], groups and descendants — and the specificity ladder that decides conflicts.
Colors & Fonts
Colour in names, HEX, RGB and RGBA; readable contrast; and fonts — family stacks, Google Fonts, size and line-height.
Box Model (margin, padding, border)
Every element is a box of 4 layers: content, padding, border, margin — the real width math, shorthand order, border-box and margin collapse.
Display: block vs inline vs inline-block
The display property decides how a box sits on the page: block takes the full row, inline flows with text, inline-block does both.
Flexbox
One-line layouts made easy: the flex container, main and cross axes, justify-content, align-items, gap, wrap — and a real navbar.
CSS Grid
Two-dimensional layouts: grid lines, fr units, repeat(), template areas and spanning — full page layouts and galleries without floats.
Positioning (static, relative, absolute, fixed, sticky)
Place elements exactly where you want: static, relative, absolute, fixed and sticky — plus z-index for who sits on top.
Responsive Design & Media Queries
One page, every screen: the viewport meta tag, media queries, breakpoints and the mobile-first way of thinking.
Transitions & Animations
Bring pages to life politely: smooth hover transitions, timing functions, @keyframes spinners and badges — and when NOT to move things.
CSS in 60 Seconds — Hover Effect
One property trick in three lines: a button that lifts on hover — base style, transition, and the :hover rule. From the 60-seconds Shorts.
Project: Landing Page
The whole CSS series in one real page: a ChaiPoint landing page with variables, a flex navbar, hero, grid features, footer and a phone check.
CSS Animations Deep — Movement Ki Duniya
Animations beyond hover: @keyframes in depth, delay, direction, fill mode and iteration — movement with full control. Video coming soon.
CSS Variables + Dark Mode Project
Define colours once in :root, use them everywhere with var() — then flip the whole page to dark mode by redefining them. Video coming soon.