The Basics of CSS: Selectors

I love CSS. Wrapping my mind around some of its more incricate features requires a good understanding of the basics--and that's what this video is all about. We're going to cover selecting HTML elements by their tag names, by class, and by ID, and introduce the concept of CSS Specificity.

Make sure you hit that SHARE button if you found this video useful!

0:31 - Overview of our markup
1:22 - What is CSS?
1:52 - Linking your CSS file in HTML
3:05 - Selecting by tag name
3:57 - Selecting children elements by tag name
6:16 - Choosing your selectors
6:51 - IDs and classes
8:51 - Getting specific
10:40 - Multiple classes on a single element
12:03 - Selecting for IDs

12:31 - Intro to Specificity
14:14 - Example of specificity

Join this channel to get access to perks:

You can find me on these socials:
* I am an Odysee partner

Support the Show
* BTC: 1DckZocn7pA7MDzKSu98UbS4TjocfK633x
* ETH: 0x1C0FDD6d450679359876a077A15DFd0537E8C2D8

# Comment Section Rules

1. Be kind to each other.
2. Don't swear, don't use racial slurs (you will be automodded)
3. I reserve the right to permanently ban habitually abusive commenters and I don't apologize. You /won't/ be notified.

If you can't *cope* with having rules, you're welcome to *not* leave a comment.

You can email me at gardiner-at-heavyelement-dot-io

# What are your machines specs?
Office Rig:
* AMD Ryzen 7 1800x
* MSI Pro Series X370 SLI PLUS
* AMD RX VEGA 64
* GSkill Ripjaw V DDR4 8GB x4 (32 GB)
* Fractal Design Define R9 Case
* Manjaro GNOME

Living Room Gaming Rig:
* ASUS X99-E-10G WS
* Intel Core i7-6900K @ 3.2GHz
* NVidia Titan X (Pascal)
* DDR4 Corsair Vengeance RGB 8GB x8 (64GB)

Backup Rig
* System76 Thelio Minor
* AMD Ryzen 5 3400G
* DDR4 16GB RAM
* Zotac Nvidia GTX 970 4GB

Home Server:
* ASUS M5A78L-M/USB3
* AMD FX 6300 at 3.5 GHz
* Nvidia GTX 750 1GB
* DDR3 20 GB RAM

[JohnChvatalGSTV]

Thanks for this video! I’m reasonably good with CSS. This was a great refresher on the basics of CSS. I look forward to videos that go deeper.

[SelfMadeSystem]

I still really like this videos. Keep 'em coming! I'm still learning.

[rafaelpalmalima]

Thanks for sharing your knowledge! I have always found this topic to be a bit confusing, and now things are clearer!

[bergglobus]

Why don't you use the normal VS Code and just deactivate telemetry?

I rely heavily on extensions and I've read that some won't work nor be available

[ruaidhrilumsden]

Sorry to be the necessary pedant, but you got you got 'inline' CSS mixed up with 'internal' CSS. With internal you place the style tags in the head of the HTML page, inline means you put the styling within the actual element that you want to style (ie <ul style="margin: 0;"><li>Item 1</li></ul> )

[Dubmaster]

What editor are you using? I am sure you mentioned it in other videos, but that doesn't mean I remember.

Online how it has the vertical lines to keep track of spacing. I have a few I like but none have that.

[antanasxg]

Thanks for the content as well as increase of font size. Though I stii find it tad bit on the smaller side

[linux]

Gardener, that's very cool, bryant

[batuhanakyol]

I have a question for you @Gardiner Bryant. I have a full AMD desktop build= R5 2600X and RX 5700. I'am running Pop OS. I can't wake my machine from suspend to ram. It shows me green screen only. I have to reset it to been able to keep going. Does this happens to your rigs too? I am asking because your build is similar to mine. Thank you.

[lillywho]

Did I miss the episode with what I presumed would be the intro, what I wrote? 😅 Or is it still coming? (Just a silly little thing I was looking forward to.)

[xuldevelopers]

I think you should get to know your audience well and create in your mind a prototype of your typical viewer so you can be more consistent in difficulty level of your lessons. You had web components tutorial last time which is definitively quite advanced technique that requires advanced understanding of HTML/JS/CSS and now you jump on very basic CSS tutorial...