How to Use Classes and IDs Properly
► Classes and IDs are attributes that we add to HTML elements for a variety of purposes. We can think of them as hooks that allow us to pull CSS and JavaScript, the other languages of the front-end triad, into our web pages.
Basic HTML elements are great for describing content but are limited when it comes to layout, presentation, and interactivity.
Using class and id means we have additional identifiers attached to elements that we can target with CSS or JavaScript.
We can use more than one class on an element, and multiple instances of the same class throughout our webpage. IDs are unique on the page and must not be repeated. We can use IDs for purposes of internal linking and binding labels to form inputs, and also use them to style elements.
In this video, we will learn what classes and IDs are, how we attach them to HTML elements, how they differ from one another, and also how we use them to plug CSS and/or JavaScript into our webpages.
► Timestamps:
0:00 Start
1:27 CSS Syntax
3:01 Using CSS syntax with Emmet to create HTML elements that have classes & IDs
4:21 Class & ID syntax
5:32 The difference between classes & IDs
6:04 Using classes to create targetable elements
8:41 Classes & Specificity
10:30 Targeting descendants of elements that have a particular class
13:28 Reusing classes
13:55 Quick overview of Bootstrap
14:59 Using multiple classes on a single element
15:47 Different element types can share a class
16:26 Use of classes with JavaScript
18:19 We use classes & IDs to target elements and do something with them
20:31 IDs must be unique
21:09 Why IDs must be unique - Internal links
23:07 GitHub gist to add smooth scrolling to internal links
23:27 Using IDs to target elements with JavaScript
25:04 IDs can be used to bind labels & form inputs
25:25 Summary
► Get the code:
Classes & IDs Start: https://codepen.io/craigabourne/pen/L...
Classes & IDs Final: https://codepen.io/craigabourne/pen/L...
Classes & IDs Repo: https://github.com/craigabourne/html-...
► Links used in the video:
Syntax Gist: https://gist.github.com/craigbourne/8...
Scroll Gist: https://gist.github.com/craigbourne/5...
CSS Tricks Specificity: https://css-tricks.com/specifics-on-c...
The Important Declaration: https://developer.mozilla.org/en-US/d...
Bootstrap: https://getbootstrap.com/
Bootstrap Classes: https://www.w3schools.com/bootstrap/b...
Video that includes internal linking: • Video
Forms video: • Video
► The HTML for Absolute Beginners Playlist: • HTML for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Смотрите видео How to Use Classes and IDs Properly онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 03 Апрель 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,532 раз и оно понравилось 173 людям.