9. Seriously Salivating Over CSS

An explanation of CSS selectors

Screenshot of CSS code combined with a book cover image from Amazon
Photo by Pankaj Patel on Unsplash combined with book image from Amazon

Matt is working his way through HTML & CSS, by Jon Ducket (no affiliation). He learned HTML days back in the early days of the web (around 1999). He wants to give himself a refresher and then learn programming. Want to learn with him? Join our tribe!

Let the games begin! We are now at the half way point of our book. Our learning has shifted from HTML and into CSS. This is still kind of a review for me. I was familiar with CSS from my days of originally learning HTML. I continued to use it with email design, but you are forced to use all of your styles inline (on each tag). Additionally, some email clients (programs) don’t support all of the CSS tags.

So my knowledge of CSS is broken, at best.

I was a wee bit nervous going into this section. Stuff is getting real. The stakes are really low, but still I want to learn this. I don’t want to mess up. Perhaps it’s the fact that I want to get a really good job to support a large family with six kids.

How do I write an article as an “expert” if I only half know what I’m doing. I just gotta be honest. I’m no expert, here. I’m learning as I go. I can make mistakes. It’s how we all learn.

Slow down. Breathe. It will come when it comes.

I applied some very light CSS to my sandbox page. I thought I knew what I was doing, and tried to race ahead and do some “extra credit.” I tried to do some style that wasn’t covered by the book yet.

It didn’t work. I couldn’t tell why.

With a sigh, I returned to the book.

Slow and steady. It will all make sense at some point.

I like how the book is spoon-feeding me concepts. I need that right now.

Why am I so nervous?

What did and didn’t make sense

Incorporating CSS. The book covered the different ways to incorporate CSS on your page. It started with linking to an external stylesheet. That’s good, because that’s the preferred way to do thing. It also showed you how you can declare a style inside of the “head” of your document. This is for styles that only pertain to the file you are working on. It is still preferred to have this as a separate CSS file (with a second “link” tag), but the book explains how you could.

The book also covers the third way that CSS can be declared. It can be used “inline” (directly on each tag). This is not the way it should be used. It’s messy and it’s a pain in the ass. This is the way I had to use it for email design. This is what I practiced with. I’m unlearning that.

CSS Selectors. Then I hit the CSS selectors. Some of this I understood. Some of this I did not.

I went online to do some further reading. I looked at two tutorials. I looked at some coders talking it over on the Stack Overflow website. There’s still some stuff I don’t quite get.

Namely, I didn’t understand the difference between three different types of selectors:

  • Child
  • Descendant
  • General

I took a rest with my eyes closed. I breathed. I meditated. When I got back up, I read another tutorial online. I think I understand now. Let me break it all down so you understand.

When I first looked at this, the three looked identical. Here’s the difference (as I understand). It’s all very subtle.

1 The descendant selector is in the format p a {}. That means that every a tag inside a “p” tag is selected. This is the most general of the three tags. The computer looks at every “p” tag in a page and then find all the “a” tags inside. Lastly, for each of those, it applies your style.

We have to understand the difference between a “child” and “descendant.” If a tag surrounds another tag, that 2nd tag is a child. If that child tag surrounds a 3rd tag, that tag is a descendant of the 1st tag.

For example, a “p” tag surrounds a “b” tag. The “b” tag is a child of the “p” tag. That “b” tag could have an “a” tag inside. That “a” tag is a child to the “b” tag (aka parent) and it is a descendant to the “p” tag (aka grandparent).

2 The child selector is in the format li > a {}. That means the first “a” tag inside an “li” tag is selected. The rest would be ignored.

Diagram showing the relationship between child and descendant

3 The general selector is in the format h1 ~ p {}. This example would select every sibling p tag (aka, on the same level, or cousins) after an h1 tag.

At this point, you have to understand the concept of nesting. If a tag contains another tag, the 2nd tag is “nested inside” the 1st. That second tag is on “another level.” Children on the same level are also known as siblings (cousins).

I’m also not 100% sure I understand

It is all so terribly confusing. It didn’t help things at all that I was combining “child” and “descendant” in my head. They are two distinct things, and can play by different rules.

I gotta be comfortable holding conflicting ideas in my head. I know the answers will come as I practice and get better.

Since I don’t have an HTML mentor, I’ve got to make the best sense of this as I can. Perhaps that is what every web developer goes through. That may be the web developer’s journey.

If that is the case, I could see the journey as being very lonely.

You think you know the answer, but you’re never quite sure. You don’t have a teacher that can look at it and say, “That’s the right answer.”

“When the student is ready, the teacher will appear.”

I guess I’m still not ready. Maybe?

I’m poking around in the dark, here. I guess that’s how it will be from this point on.

Let’s do this thing! #braveYetStupid

Thermometer showing the various levels of web developer. My current level is marked (Supreme Kitty)
Image found at
Thermometer Vectors by Vecteezy (customized by author)

Matt is on a noble quest to grow into the next level of web developer. He will be documenting his battles along the way. There will be pain. There will be tears. There may be blisters.

He doesn’t know what he is doing, so he would welcome brave knights on his journey.

You may be a wise, old knight. You already know the ways of the web developer. You won’t be going on my dangerous journey, but you can certainly warn about the pitfalls and the venomous code we will encounter.

You might be a brave, young knight. You don’t know what you’re doing, either. We will learn together. Join our tribe! Leave me a comment or send me an email.

Let the battle begin! Sign up for the M.W. McCabe newsletter.

Sally forth!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.