Youtor
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=LSGnukBVUH8
► 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
#############################
