Day 7 of My Web Dev Internship at Cudose Creative

Separation of Concerns, CSS Selectors & Specificity Explained

Today marked the beginning of something exciting at Cudose Creative Agency — we officially started learning CSS! 💅

We moved beyond HTML’s structure and began exploring how to make our pages look and feel beautiful using Cascading Style Sheets.

Here’s what we tackled today:

---What is Separation of Concerns?

We began with the idea of “Separation of Concerns” — which simply means keeping structure (HTML), style (CSS), and behavior (JavaScript) in their own layers.

Why it matters:

Makes code easier to read and maintain.

Allows teams to collaborate better (designers vs. developers).

Encourages clean, scalable web development.

---CSS Selectors: Tag, ID, Class

We explored different ways of targeting HTML elements with CSS:

Tag/Element Selector

Targets all elements of a type.

p {

color: blue;

}

Class Selector

Reusable styling across multiple elements.

.card {

padding: 10px;

background-color: #f9f9f9;

}

ID Selector

Targets a single unique element.

#header {

font-size: 2rem;

}

Class = reusable

ID = unique

Tag = generic

---Specificity & !important

Next, we got into the specificity battle — the browser’s way of deciding which styles take precedence when multiple rules apply.

Specificity Hierarchy:

1. !important

2. Inline styles

3. ID selectors (#id)

4. Class selectors (.class), attributes, and pseudo-classes

5. Element/tag selectors (div, p, etc.)

!important – Use with Care

It overrides everything else. We were advised to use it sparingly because it can lead to messy and hard-to-debug code.

.button {

color: red !important;

}

--- Reflection

Today’s session was deep and practical. I now see CSS as more than just colors and fonts — it's about precision and control. Learning specificity helped me realize how browsers resolve style conflicts and how to write better CSS from the start.

Looking forward to diving deeper into the cascade, the box model, and responsive design in the coming days!