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: https://github.com/craigabourne/css-s...
CodePen Start: https://codepen.io/craigabourne/pen/Q...
CodePen End: https://codepen.io/craigabourne/pen/J...
► Links used in the video ( & other resources):
Live Server: https://marketplace.visualstudio.com/...
Shorthand font: https://developer.mozilla.org/en-US/d...
Shorthand properties: https://developer.mozilla.org/en-US/d...
MDN Selectors: https://developer.mozilla.org/en-US/d...
CSS Tricks - How Selectors Work: https://css-tricks.com/how-css-select...
► Inheritance video link: • Understanding Inheritance in CSS
► Other types of CSS Selectors:
Child & Descendant Selectors: • CSS Child and Descendant Selectors
Sibling Selectors: • Adjacent and General Sibling Selector...
Universal & Attribute Selectors: • Universal and Attribute Selectors in CSS
Pseudo-classes: • How to Use CSS Pseudo-Classes
Pseudo-elements: • How to Manipulate Content With CSS Ps...
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Смотрите видео CSS Selector Basics - Element, Class, and ID онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 24 Май 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,705 раз и оно понравилось 131 людям.