These are my personal study notes from learning and working with CSS. I use this repository to keep the core concepts, layout patterns, browser behavior, and examples I want to revisit in one place.
The notes start with CSS syntax and the cascade, then build toward page layout, responsive design, interaction states, animation, accessibility, debugging, and maintainable styles. Each chapter explains what a feature does, when it is useful, and how it behaves in a real page.
This is a focused reference for learning CSS from the fundamentals through the features used to build modern interfaces. It covers the box model, typography, Flexbox, Grid, positioning, responsive rules, custom properties, accessibility, performance, and CSS organization.
The examples use plain HTML and CSS so the browser behavior stays clear. Try each example in a small page, inspect it in browser developer tools, and change one value at a time to see how the layout responds. Browser support can vary, so check compatibility when using newer CSS features.
-
Foundations and CSS syntax
Understand stylesheets, rules, declarations, comments, and how the browser applies CSS. -
Selectors, specificity, and the cascade
Choose elements reliably and reason about cascade order, specificity, inheritance, and source order. -
Values, units, and colors
Use common CSS value types, lengths, percentages, color formats, and responsive sizing. -
The box model and layout flow
Work with content, padding, borders, margins, sizing, overflow, and normal document flow. -
Typography and text
Set readable fonts, line spacing, text flow, wrapping, and font fallbacks. -
Backgrounds, borders, and shadows
Layer backgrounds, crop images, style borders, and use shadows with restraint. -
Flexbox layout
Arrange items along a flexible axis and control alignment, wrapping, gaps, and growth. -
Grid layout
Build two-dimensional layouts with tracks, areas, auto placement, and responsive patterns. -
Positioning and stacking context
Place elements with static, relative, absolute, fixed, and sticky positioning, then understand stacking. -
Responsive design and media queries
Adapt layouts to available space with fluid values, media queries, and container-aware choices. -
Pseudo-classes, pseudo-elements, and forms
Style interaction states, generated content, focus, and native form controls accessibly. -
Transforms, transitions, and animations
Create motion and visual changes while respecting reduced-motion preferences. -
Custom properties and CSS functions
Reuse values with custom properties and compose calculations, clamping, and modern color functions. -
Accessibility and inclusive CSS
Preserve focus visibility, contrast, readable content, semantic flow, and user motion preferences. -
Debugging, performance, and browser tools
Inspect computed styles, trace layout issues, and reduce unnecessary rendering work. -
CSS architecture and modern CSS
Organize styles by responsibility and use cascade layers, logical properties, and progressive enhancement.
- All code samples collects the code examples from the core chapters.
- Complete questions and answers gathers review questions and clear answers.
Read the chapters in order when learning CSS, or open the chapter for the property or layout problem you are working on. Build each example in a local HTML file, check it at more than one viewport width, and use the browser inspector to compare the rule you wrote with the computed style.
These notes are available under the MIT License.
- Portfolio: https://www.ashishranjan.net
- GitHub: https://github.com/a2rp
- CodePen: https://codepen.io/ash1198
- LinkedIn: https://www.linkedin.com/in/aashishranjan
- Facebook: https://www.facebook.com/theash.ashish/
- YouTube: https://www.youtube.com/@ashishranjan-ashz?sub_confirmation=1
- Email: mailto:ash.ranjan09@gmail.com
- Support: https://a2rp-donation-page.netlify.app/
- Buy Me a Coffee: https://buymeacoffee.com/ashishranjan
- Patreon: https://www.patreon.com/ashishranjan