Stop using floats for layout! Modern CSS offers powerful tools for arranging elements. Flexbox (Flexible Box Layout)
/* Desktop */ @media (min-width: 1024px) .cards-grid grid-template-columns: repeat(3, 1fr);
You set width: 300px; . Then you add padding: 20px; and border: 1px solid black; . Suddenly the box is 342px wide. Your layout breaks. You cry.
.box box-sizing: border-box;
CSS is not about forcing pixels. It is about defining relationships. CSS Demystified Start writing CSS with confidence
CSS is not broken, nor is it a matter of guesswork. It is a deeply logical, rules-based system. Once you understand the core mechanics operating under the hood, the frustration vanishes.
/* tokens */ :root --gap: 1rem; --max-width: 1100px; --color-1: #0b66ff; --muted: #666;
Instead of fighting the cascade by adding more specific selectors, learn to embrace it. Use low-specificity classes for your base styles and layer more specific classes only when necessary. If you find yourself reaching for !important , it is usually a sign that your CSS architecture needs a rethink, not that the browser is being difficult. The Box Model
Writing confident CSS means making your code maintainable. If you need to update a brand color across a 2,000-line stylesheet, manual searching will inevitably lead to mistakes. Stop using floats for layout
Targets a unique element with a specific id attribute. Should only be used once per page. Example: #header height: 100px;
To write CSS with confidence, you must first respect the "C" in CSS: .
Responsive design isn’t an afterthought; it’s built into modern CSS from the ground up. The core tool is – conditional CSS that applies only when certain screen characteristics are true.
HTML:
Keep specificity flat . If you nest too deep ( .sidebar .widget .title a ), you cannot override it later without a more specific mess. Use one class per component .
: The element that a child positions itself against isn't always its immediate parent; knowing the rules for containing blocks makes position: absolute much more predictable. Practical Learning Paths
By default, browsers calculate the total width of an element by adding width + padding + border . If you set a box to width: 300px and add 20px of padding, the actual layout width becomes 340px . This behavior breaks layouts unexpectedly.
html font-size: 62.5%; /* Makes 1rem = 10px (easier math) */ Then you add padding: 20px; and border: 1px solid black;
.nav display: flex; gap: 1rem; justify-content: space-between; /* space out items */ align-items: center; /* vertical alignment */