In the previous lesson, I relied heavily on classes. Today, I learned to use 'CSS Combinators' to target elements based on their relationships. This kept my HTML cleaner and my CSS more powerful.
Child Selector (`>`): With this, I used `.Book > h3` to style only the direct heading inside my book cards, ignoring any nested titles elsewhere.
Descendant Selector (` `): With this, I used `.Book p`, to style every paragraph within a card, no matter how deep it was nested.
Sibling Selectors (`+` and `~`): I experimented with targeting elements that sit next to each other, which is perfect for spacing out images and text without adding extra classes.
Then I ran into a classic beginner trap: I set a fixed `height` on my book cards, and when the text was too long, everything scattered! 😅
This thought me that for content-heavy cards, 'fixed height is dangerous'. Instead, I adopted a flexible approach:
- Let content dictate height: No fixed `height` on the cards.
- Control width with `max-width`: This ensures my cards look good on mobile and desktop without stretching awkwardly.
- Margin vs. Padding: I used this to refine my spacing, `margin` to push cards apart, and `padding` to give the text inside room to breathe.
Moving on, I noticed my "Read More" links were boring text links and I wanted them to look like buttons.
By switching `display: inline-block`, I turned standard `a tags into stylish buttons that accept padding, background colors, and rounded corners (`border-radius`), all while staying inline with the text flow.
It’s a small change in code, but a big change in presentation.
One unexpected lesson came from testing my site on mobile Chrome. My light peach title looked beautiful in dark mode but faint in normal brightness.
I switched to a deep teal (`#006064`) for better contrast against the light gray header. The difference was immediate. The title became bold and authoritative, properly anchoring the page.
Lesson learned: Always test your designs in different brightness modes and devices. What looks good in one environment may not work in another.
This lesson shifted something for me.CSS is no longer just about changing colors. It’s about:
- Structure
- Responsibility (which element controls what)
- Flexibility instead of rigidity
- Clarity over clutter
I’m beginning to think in layout logic rather than just properties.And that feels powerful.
🔗 You can view the live update here: Link →