Day 8 of My Web Dev Internship at Cudose Creative Agency

CSS Syntax | Fluid Web Design | em & rem Units

Hello again!

Today at Cudose Creative Agency, we went deeper into CSS — learning about its core syntax, important design principles, and how to use responsive sizing with em and rem.

It was one of those days where everything started to feel more “real” — where code meets design thinking

---CSS Syntax Refresher: Selector, Property & Value.

CSS is written in a simple pattern:

selector {

property: value;

}

Example:

h1 {

color: blue;

font-size: 2rem;

}

Key Terms:

Selector – targets the HTML element (h1)

Property – the style you want to change (color, font-size)

Value – the value assigned to that property (blue, 2rem)

This structure is consistent across all CSS stylesheets and is the foundation of styling any web page.

--3 Things Every Website Must Have (Design Principles)

We discussed three essential design qualities for building modern, user-friendly websites:

1. Fluidity

Your layout should adapt across different screen sizes.

Avoid fixed widths; use percentages or flexible units.

2. Elasticity

Design should scale based on the user’s settings or device font size.

Think about scalability and accessibility.

3. Content Decision

Content should drive layout, not the other way around.

Plan your structure based on what the user needs to consume.

This changed how I think about websites — it’s not just about how things look, but how they flow, scale, and serve users.

--- em vs. rem – Modern Sizing Units

Instead of using pixels, we’re now encouraged to use em and rem units.

Best Practice:

We set 1em = 10px for clarity and consistency in scaling.

Quick Breakdown:

em = relative to the parent element’s font-size

rem = relative to the root element’s font-size

Example:

p {

font-size: 1.6rem; /* = 16px if root is 10px */

}

Why it matters:

Makes responsive scaling easier

Better for accessibility

Adapts well to user settings across devices

---Final Thoughts

Today connected technical syntax with design logic. I now see how the smallest units like em or layout decisions can affect how a user experiences a site.