Category:Cascading Style Sheets
General education and tutorials
- Language fundamentals
- Inheritance and the cascade
- The box model
- Normal flow
- Formatting contents
- Being in or out of flow
- Responsive Design
- Fonts and typography
- Transforms and animation
- Using cheat sheets
CSS Diner gamifies learning CSS.
Animation is a design technique for drawing the eye to a specific piece of content on the page. CSS allows for designers to animate elements on the page efficiently and with little performance overhead.
Web Animation Essentials: CSS Animations and Transitions by Rachel Nabors on her website
- Ceaser - CSS Easing Animation Tool by Matthew Lein on his website.
- Transforms tool for testing transformations and animations by Western Civilization
Cascades and Specificity
Also known as "why is this thing here overriding that thing over there?!?"
- Specificity Calculator by Keegan Street helps to display the specificity of a selector in a more understandable visual way.
FUN FACT: in CSS and SVG, 'gray'/'grey' (#808080) is darker than 'darkgray'/'darkgrey' (#A9A9A9) because that’s how they were defined in HTML and one version of the X11 color system, respectively. When the two systems were merged, nobody wanted to touch the underlying values.
- Focusing on Focus Styles by Eric Bailey at CSS-Tricks explains the basics of applying focus to elements, when to do it, and why. It also covers some upcoming focus elements not yet widely supported, such as focus-within.
- Ultimate CSS Gradient Generator by ColorZilla will help you build pretty much any gradient ever with CSS.
CSS Grid is hands-down the most effective recent way to do layout.
Flexbox is a close second, but only works in rows or columns, giving CSS Grid the edge in complex layouts.
Responsive Design is a layout tool that predates CSS Grids.
Grid Systems predate both Responsive Design and CSS Grids. While they're not exactly the way that we'd do design today, knowing about the visual design elements, planning a desktop layout with a grid system can help figure out a visual design system even today.
Naming best practices
- nth-child-tester by Chris Coyier on CSS-Tricks helps you figure out what the nth-child controls will do.
- Stripes in CSS by Chris Coyier on CSS-Tricks, offers multiple ways to generate stripes in CSS
- Stripe Generator by Alessandro La Rosa and Fabio Fidanza generates stripes in a downloadable file that you can then x-repeat over the space that you need it to fill.