Day 9 of My Web Dev Internship at Cudose Creative Agency.

Box Sizing | Display & Positioning | Font Weights in CSS

Hey friends

We’re now knee-deep into CSS here at Cudose Creative Agency, and today’s session was all about layout logic and typography control — two key areas every frontend developer needs to master.

Here’s a full breakdown of what we explored on Day 9:

---Understanding box-sizing

CSS boxes are the foundation of every webpage layout.

By default, when you add padding and border to an element, it adds to the total width/height. But using:

box-sizing: border-box;

...allows you to include padding and borders inside the defined width/height.

Why It Matters:

Prevents layout-breaking issues

Makes elements easier to size and align

Encouraged as a best practice for modern layouts

---Display & Positioning Concepts

We took a deep dive into how elements are rendered, positioned, and layered on a page.

Display

Controls how elements behave in the layout.

display: block | inline | inline-block | none | flex | grid;

Position

Determines the element’s place in the document flow.

static (default)

relative

absolute

fixed

sticky

Each affects how the element behaves in relation to its parent or the viewport.

Float

Used to wrap text around elements like images.

float: left | right;

clear

Stops elements from wrapping around floated elements.

clear: left | right | both;

z-index

Controls which elements sit on top of others — useful for modals, tooltips, and overlapping layouts.

z-index: 999;

\> Elements with higher z-index stack above lower ones (only if they are positioned).

--- Fonts & Font Weights

Typography plays a huge role in design. We explored how to apply font families and adjust font-weight from light to bold.

Font Weight Scale:

0 – Thin

300 – Light

400 – Normal (default)

500 – Medium

600 – Semi-bold

700 – Bold

900 – Extra-bold

font-weight: 600;

font-family: 'Poppins', sans-serif;

\> Pro Tip: Always pair readable fonts with clear sizing and spacing.

---

Reflection

Today gave me a big-picture understanding of how CSS affects structure, hierarchy, and visual order. From stacking cards with z-index to controlling how elements wrap.

Typography, too, is more than choosing a font — it’s about voice, clarity, and consistency.