CSS Selector Basics - Element, Class, and ID

► Selectors allow us to target elements and apply styles. We can select a large number of similar elements, or be more specific and construct rules that apply in very narrow circumstances.
In this video, we will focus on three common selector types. These are:
- class selectors
- ID selectors
- element selectors
A class can be used as many times on a page as we like, as opposed to an ID which is used just once to uniquely identify an element, say for example a page wrapper, a navbar, or a footer. Each of which will only appear once on any given webpage.
We select IDs by referencing them by their name preceded by a hash or octothorpe (#), and we select classes by using a full stop (.) preceding the name of the class. These will select elements that have matching ID or class attributes added to their opening tags.
When selecting an HTML element we simply need to reference the element by its name (h2, div, p, nav) without anything additional added to the HTML.
► Font stack to paste in, in CodePen: font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
► Timestamps:
0:00 Start
1:10 CSS Syntax & the general rule
2:08 Getting the project files
2:48 Live Server
3:20 The three kinds of selectors we’ll learn in this video
4:00 The element selector
5:20 Selector declaration blocks can contain multiple style declarations
5:54 Inheritance
6:41 Applying a font to body, which is inherited by descendant elements
7:07 Font stacks
9:06 More font props
9:38 Space separated property values
11:16 Shorthand properties
11:53 Inspecting styles in DevTools
13:18 Grouping selectors
14:41 Summary of element selectors
15:10 ID selectors
20:45 What IDs are used for
21:17 Class selectors
24:02 Adding a class to multiple elements
25:29 Adding classes to body & html elements in CodePen
26:21 Multiple classes on a single element
28:22 We cannot use more than one ID on a single element
29:40 Grouping mixed selector types
29:58 Summary
► Get the code:
GitHub Repo: github.com/craigabourne/css-s...
CodePen Start: codepen.io/craigabourne/pen/Q...
CodePen End: codepen.io/craigabourne/pen/J...
► Links used in the video ( & other resources):
Live Server: marketplace.visualstudio.com/...
Shorthand font: developer.mozilla.org/en-US/d...
Shorthand properties: developer.mozilla.org/en-US/d...
MDN Selectors: developer.mozilla.org/en-US/d...
CSS Tricks - How Selectors Work: css-tricks.com/how-css-select...
► Inheritance video link: • Understanding Inherita...
► Other types of CSS Selectors:
Child & Descendant Selectors: • CSS Child and Descenda...
Sibling Selectors: • Adjacent and General S...
Universal & Attribute Selectors: • Universal and Attribut...
Pseudo-classes: • How to Use CSS Pseudo-...
Pseudo-elements: • How to Manipulate Cont...
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Begin...
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne

[@craigabourne]

Learn CSS: kzbin.info/aero/PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR

[@janelleschuh3263]

Happy i "selected" this amazing video.

[@craigabourne]

ba dum tss! 😂

[@clinthoon]

Wish I could give two thumbs up. Superb! 👍👍

[@craigabourne]

Thank you so much 😀

[@shansutherland]

These selector videos are super helpful. You are a great teacher

[@craigabourne]

Thank you! I appreciate the kind words

[@jovanstrickland]

thanks brother youre layin it all out for us

[@craigabourne]

Glad to help

[@manendarpverma5252]

Thank you soo much!, I been looking for something like this for a while now and you explained it really well. You just got yourself a sub :))

[@craigabourne]

Awesome, thank you!

[@pranavguly]

Thanks! Another superb video. Cant wait to watching the rest of the videos on selectors

[@craigabourne]

Glad you like them!

[@Naz-yi9bs]

Amazing explanation! I'll be watching the "Developer Tools" playlist until the next video release in this series!

[@craigabourne]

Awesome! Thanks Naz. Appreciate the kind words 👍 Making the videos as quick as I can. Wish I could go faster!

[@jensdan4489]

This channel is soo good

[@craigabourne]

Thank you! Appreciate it!

[@dobrilofotis]

100th like congrats!

[@craigabourne]

🎉

[@sophiawokoma3711]

so can you still apply two ids to one html element but just not via the the space separated list method , e.g Heading ?

[@craigabourne]

Hi Sophie! No, you can only have one ID on one HTML element. Since ids are unique only one is needed to uniquely identify that specific tag. If you try to add two separate id attributes to an HTML element, the browser will ignore the second added and only recognise the first id attribute in the opening tag.

[@laflamenca7742]

One question, Did you separate the classes uppercase and big text just for the example? Or why you didn't create only one class in css like upper case big text??

[@ovidiu2394]

springgreen

[@craigabourne]

😂 Every video pretty much