The past two weeks have been a bit up and down. Week 2 was a slow one – I struggled to focus and had other things going on. But in Week 3, I got back on track, a little bit at least.

Getting Started with CSS

I started with the basic CSS syntax – learning about selectors and the property-value pair format.

On Thursday, I finished the Intro to CSS section and gained some practical experience:

Linking CSS to HTML
Using different types of selectors and properties
Playing around with styles in the assignment

👉 Check out my GitHub page to see the results.

Understanding the Cascade

What is the cascade?

The cascade determines which CSS rules are applied to an element when there are conflicting styles.

Specificity

Every CSS rule has a specificity value, and more specific selectors override less specific ones.

For example:

htmlCopyEdit<!-- index.html -->
<div class="main">
  <div class="list subsection">Red text</div>
</div>

cssCopyEdit/* Rule 1 */
.subsection {
  color: blue;
}

/* Rule 2 */
.main .list {
  color: red;
}

Here, Rule 2 is applied because it’s more specific (it uses two selectors instead of one).

Inheritance

Some CSS properties are inherited by child elements if no more specific rule is applied. These include properties like color, font, and text-align.

Rule Order

When two rules have equal specificity, the last one defined takes precedence:

cssCopyEdit.alert {
  color: red;
}

.warning {
  color: yellow;
}

If an element has both alert and warning classes, the color will be yellow because .warning comes last.

✅ Assignment: Cascade

The assignment was a bit tricky at first – I had to fix a rule order issue in a pre-filled HTML and CSS file to make the design look right.
But once I reviewed the concepts of specificity and rule order, it wasn’t too hard. Just moved a few rules around and boom – fixed it!

🛠 Inspecting HTML and CSS with DevTools

Next up: Chrome DevTools.

I learned how to:

Open the Element Inspector
Select and inspect specific elements on a page
View the HTML structure in the Elements panel
Edit and experiment with styles in the Styles panel
Debug and test CSS changes without touching the source code

Being able to live-edit styles was 🔥 and super helpful for quick testing. The dev tool is something i have been getting familliar with alot this pasy year since i’m learning alot about cybersecurity and web vulnurabilities.

📌 Reflection

It’s been a slow couple of weeks, but I’m not giving up.
Sometimes life gets in the way, and that’s okay. The important thing is to keep moving forward, even if it’s just a little bit. Day by day to see a better day - Corey Sanders 🏀

Let’s see what Week 4 has to offer!

Week 2 & 3: Intro to CSS