From the course: Interactive Animations with CSS and JavaScript
HTML custom elements
From the course: Interactive Animations with CSS and JavaScript
HTML custom elements
- [Instructor] So now we have a basic HTML structure to work with, and we have an environment set up. Let's go ahead and start putting together our application. Let's go back to the source code and look at our content div, and we can talk about how we're gonna structure the rest of our application. So you'll see I have this one div and it has an ID of content. And up until, you know, the last few years, that was pretty much the way things were done in HTML. You would have divs or spans and you would use CSS styles and classes to differentiate them. Well, with HTML5, we have the concept of custom elements. Now, a custom element is not really anything particularly fancy. The definition is any element that has a hyphen in it is a custom element. So when I name my element with a hyphen, I have the ability to style it myself. I have the ability to apply only the styles that I want to. The browser will not style it in any way, which can be good and it can be bad. Also, it lets me organize my application in a much cleaner way. So what I'm gonna do is I'm gonna get rid of this content div, and I'm gonna name all of my custom elements starting with an hp hyphen prefix, and a HTML presentation is what I'm thinking of. So let's create a content tag, and we'll go ahead down here and close it. All right, so now we've defined a custom element. That's it. Let's go back to the browser and I'm gonna refresh. You'll notice that the red background is gone. That's because my style sheet is referencing that div with an ID that is no longer there. So let's go to our style sheet. Now you'll see we have that hash selector, so it was styling the element that had the content ID. There is no longer an element like that, but we're going to use our custom tag name here as our selector, so any element named hp-content will inherit this background-color property. So let's go back to the browser again and refresh, and just always reminding you I'm using Command + Shift + R to refresh here so that I pick up any style sheet changes so that won't mess you up. And you'll see it is not styled. If you've done any amount of web development with CSS, this is a pretty common occurrence. You're gonna spend time figuring out why didn't my styles get picked up? Let's go ahead and bring up Chrome's developer tools using Command + Option + I, and I'm going to select this h1 tag. Now when I go over here and look at my new custom element, I'll see that it is in fact being applied. The background color property is being applied to this element. But it's not being displayed. And this brings up the other part of the benefit of having a completely blank slate. When you create a custom element, you don't inherit any styles from the browser at all. That includes the display property. In this case, you can see the display has defaulted to inline, and inline elements can't have a background color. So we're gonna go back to our style sheet here and add 'em, and we're going to manually set display block, all right? Let's go back to the browser. Refresh. And now we have our red style. Okay, so now I need to add some more HTML structure to our page, and you probably don't wanna watch me type it, so I'm gonna put that in and you can use the exercise files for the beginning of the next video to pick up where we left off.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.