What's the difference between IDs & Classes? | HTML, CSS & JavaScript

how's it going guys my name is DOM and today I want to talk about the difference between using IDs versus using classes in your HTML CSS and JavaScript code so basically let's start with ID so you're going to want to use IDs whenever you have an element on the page that appears once or is the only one performing that certain function so IDs are used when you have a single element okay a unique element so for example I've got this HTML document right here in the browser it looks like this we have a single title for this page so in the actual code you can see I'm using an 82 tag with an ID of title when I read this I expect that there's only one title on this page and Sam goes with the CSS inside here if I target the title ID once again I expect this to be the only title on the actual page so I these are used for a single unique element okay this is in contrast to classes so you're going to want to use classes when you have multiple elements that serve the same purpose or that look the same so for example let's just say in in the body here we create three divs with a class of box so we'll say div and then dot box okay and do these three times we have three three divs here with a class of box so we have multiple elements with the same class they all part of the same group they're all gonna look the same okay so in the actual CSS code yeah if I say box I expect this to mean that there might possibly be multiple boxes on the actual HTML document okay let's just add some basic styles here margin of five with the 50 same for the height background of red and a float of the left okay if I was to save this and refresh the browser we get three red boxes on the screen so you're gonna want to use classes when you have multiple elements of the same type or the same group okay this becomes even more apparent when using javascript okay so if I was to write some JavaScript code down here we have the document dot get element by ID function okay this is called gets element so only a single element is expected to be returned from this function in fact this function can't return multiple elements I can just prove this if I was to make two elements here with the same ID okay we'll call this one title number two and then if I was to actually make a variable here they call this one title equal to give its own value of this function by passing title here and then console dot log beat title this should select only a single title element okay let's just say and refresh the browser here open the console and we get the first ID title element so this function here only returns a single element which matches the idea of having an ID okay once again in contrast to using classes we've actually got a function in JavaScript chords document dot get elements by class name so here we actually get an HTML collection returned so we have get elements with an S but last name will put a box inside here okay and then consult load the boxes now we should get multiple boxes let's save this and refresh the browser in a console we get an HTML collection we get an array of dibs with an R with a class of box okay so once again use IDs for a single unique element and use classes for multiple elements that serve the same purpose or appear to be the same alright that's all for this video thank you for watching and I'll see you

Channel: dcode

Views: 19,167

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, into, english, with, example, examples, html, html5, css, css3, javascript, web, website, design, app, application, id, class, ids, classes, selector, selectors, query, difference, when, should, use, you, compare, tag, element, attribute, styles, styling, unique, multiple, validation, w3, validate, document, widget, support, target, anchor, hashtag, period

Id: SHIMUoAJHYU

Length: 4min 45sec (285 seconds)

Published: Sat Jun 09 2018