css-protips
⚡️ A collection of tips to help take your CSS skills pro 🦾
CSS Protips is a curated collection of practical tips for writing cleaner, more correct CSS, covering layout tricks, browser consistency fixes, and less-obvious features, each with a brief explanation and a working code example.
CSS Protips is a curated list of practical tips for writing better CSS — the language used to control the visual appearance of web pages. CSS (Cascading Style Sheets) handles things like colors, fonts, layout, and spacing, but it has many quirks and less-obvious features that can trip up developers or lead to messy, hard-to-maintain code.
Each tip in the collection addresses a specific situation. For example, one explains how to reset default browser styles so your page looks consistent across different browsers. Another shows how to center an element vertically on a page using modern layout techniques. Others cover topics like maintaining the correct aspect ratio for images, applying borders to all navigation items except the last one without writing two conflicting rules, hiding autoplay videos that are not muted, and using relative units for font sizes to make text scale properly on different screen sizes.
The tips range from beginner-friendly basics (add a line height to the body element once rather than repeating it for each text element) to more advanced selectors and CSS features. Each tip includes a brief explanation of the problem it solves and a small code example showing the solution, along with links to interactive demos.
You would use this as a reference when building or maintaining a website and wanting to do things the cleaner or more correct way, rather than reaching for a workaround. It is plain CSS documentation — no specific programming language or framework is required.
Where it fits
- Look up a clean, modern way to center an element vertically on a page without hacking margins or using old tricks.
- Reset browser default styles so a webpage looks consistent across Chrome, Firefox, and Safari without fighting style conflicts.
- Find the correct CSS technique for maintaining an image's aspect ratio automatically as the container resizes.
- Learn how to use relative font-size units so text scales properly on all screen sizes without setting it on every element separately.