Website for illustrating the world of CSS possibilities. This site builds on HTML.Haus, which will teach you HTML. Start there if you haven't learned HTML yet. If HTML is the haus ('house') or structure of webpages, then CSS is the paint, the lights, the trim, the style for houses, which makes the beautiful city that is the web possible.
I recently returned to the world of web development, and I've been delighted to learn how far CSS has come, especially in light of modern UI development frameworks which support all sorts of strategies for styling components. CSS.City is an introduction to CSS, a reference for common CSS strategies, CSS styles to get you started, and a guide on the various CSS approaches in modern web development.
Tutorials that take you through the basics of CSS:
- Introduction
- Selectors
- Colors
- Typography
- Units
- Positioning
- Box Model
- Layout
- Specificity
- Building Memory
- Experimenting on the Playground
- Playing Games
- Attributes
- Stylesheets
- Inline styling
- CSS-in-JS
- CSS Modules
- Styled-components
- Font families
- Water.css
- Specificity Calculator
- Minifier
The following cities have been or will be implemented in a CSS Zen Garden style way. These are organized by continent to try and accomplish distribution:
Africa
- Cairo
- Dar es Salaam
- Johannesburg
- Khartoum
- Kinshasa
- Lagos
Asia
- Bangkok
- Beijing
- Delhi
- Dhaka
- Hong Kong
- Jakarta
- Karachi
- Mumbai
- Osaka
- Seoul
- Shanghai
- Singapore
- Tokyo
Europe
- Berlin
- London
- Madrid
- Moscow
- Paris
- Rome
Middle East
- Amman
- Baghdad
- Dubai
- Istanbul
- Tehran
- Tel Aviv
- Riyadh
North America
- Los Angeles
- Mexico City
- New York
- Toronto
South America
- Buenos Aires
- Lima
- Rio de Janeiro
- Santiago
- Sao Paulo