The `link` element is most commonly used to load external stylesheets. This lesson demonstrates the basics of creating a link element and using a link element to load the popular Bootstrap library.

https://app.egghead.io/api/v1/lessons/css-load-external-css-with-the-link-element/subtitles

Load External CSS with the Link Element

Instructor: [00:00] Create a new file, and I'll call this index.html. Then I can generate the necessary HTML elements using exclamation point, and hitting tab. Then I'll just write hello inside the body, make sure to save this, and we can preview this by dragging it over into our browser address bar. You can see this hello here is reflected in the browser.

[00:23] Now, you can create a link tag by typing link, then hitting the tab. You can see the element that this generates has an R-E-L, or relationship, of stylesheet, and a blank href, or hypertext reference. This is, by far, the most common scenario for links, where you want to load in a style sheet, and you'd add the reference where that style sheet is located.

[00:47] If you go ahead and google Bootstrap CDN, which is a very famous CSS library, you'll land on bootstrapcdn.com. You can just come here and click on this link, which copies the link to the clipboard. Then click here, and paste it inside the href attribute.

[01:03] I'll switch back over to my document, refresh the page, and you can see my hello now has new styles applied. Let's make that bigger by creating a large header, and calling this hello. Then we'll add a button that says click me, and we'll add some CSS classes from Bootstrap, such as button and button-primary.

[01:27] We'll save this, hit refresh, and you can see this hello reflected here, and a styled button with the Bootstrap classes right here. If I remove this link -- I'll delete that entire line, hit save, and refresh -- you'll see all the styles disappear, because the style sheet is no longer referenced.

[01:46] I'll hit undo, bring it back, and refresh. We now, again, have the styles from our referenced style sheet. Note that with the link element, you look at the end of it. There is no closing tag, like you see with title, header one, or body.

[02:04] A link element is an empty element. There will never been content between an opening link tag and a closing link tag. That way, it's more similar to the input element, or an image element, where the content and display of the element is defined within the attributes of the element itself, not the content inside of the element.

Load External CSS with the Link Element

Share this video with your friends