Css tips and tricks

Understand Selectors

Learn basic selectors like element (p), class (.classname), and ID (#idname) selectors

Flexbox Is Your Friend

Flexbox makes layout design so much easier. It helps in aligning and distributing space among items in a container, even when their sizes are unknown or dynamic.

Using Grid

Grid allows you to better control the places where each element ends up on the page as well as specify sizes.

Positioning: Relative vs. Absolute

Understanding how to use position is crucial for layout design.
relative: Element is positioned relative to its normal position.
absolute: Element is positioned relative to its closest positioned ancestor (can be tricky to use, but powerful).

Use em and rem for Responsive Font Sizes

Instead of using px for font sizes, use em (relative to the parent element) and rem (relative to the root element). This helps maintain scalability and responsiveness. e.g fontsize = 1.2em

Use z-index to Layer Elements

If you're working with overlapping elements, you can control their stacking order using z-index. Higher numbers are stacked on top of lower numbers.

Use :nth-child() and :nth-of-type() for Advanced Styling

These pseudo-classes let you target specific elements based on their position in a parent element, without needing extra classes or IDs.

Use overflow to Control Content Spills

If content inside a container is bigger than the container, it can overflow. You can control this with overflow

Use box-sizing: border-box for Easier Sizing

By default, the width and height of elements do not include padding and borders, which can be confusing. With border-box, the width/height includes padding and border, making layouts easier to manage.