A Gentle Intro to CSS Files in HTML — Build Your First Website (Part 4)

Video: Learn how to create and load CSS Files in HTML

Lincoln W Daniel
ModernNerd Code
Published in
23 min readAug 2, 2024

--

Welcome to another installment of our popular Web Development Series, where we delve into the intricacies of CSS and how it can transform the visual appeal of your websites.

In today’s tutorial, we’re exploring advanced CSS techniques that will take your web design skills to the next level. Whether you’re a beginner looking to solidify your understanding or a seasoned developer keen on refining your styling strategies, this video is tailored just for you.

We’ve previously covered the basics of HTML and introductory CSS, setting the foundation for what we’ll tackle today. Now, we’re focusing on external CSS files — a method that not only organizes your code better but also enhances your site’s scalability and maintainability. From styling H1 and H2 tags to understanding the cascade and inheritance in CSS, we’ll show you how to apply these properties effectively to create visually compelling web pages.

Join us as we demonstrate the creation and linking of external CSS files, discuss the benefits of separating styling from HTML, and provide practical examples that you can implement right away. Ready to elevate your web development skills? Let’s dive in!

Video Transcript

Hey there. Today, we’re finally going to go over the third of three ways that I promised that I will show you how to add CSS styling to your HTML documents to build websites that look unique to you and the style you want your users to see when they come to your website, your domain on the internet. So in our previous two videos, we went over adding CSS via the style attribute directly on your HTML elements.

And then we went over on the second video how to use the style tag in the head of your HTML document in order to add CSS to a selector, which can be a HTM LM S tag name, or a class or a id. We haven’t gone over classes and IDs yet, but we will get to that in the future. But so far we have seen how to use the style tag in your HTMLs head.

To add CSS to your website and we’re going to now expand upon that by taking what we learned in the last video. So if you haven’t seen the last video or the one before that, you should go watch those two because this is a series and we’ve done videos on HTML, the basics, and then we’re doing now CSS and then we’ll eventually do JavaScript.

So if you are interested in learning HTML, CSS and JavaScript, this is the series for you. And if you enjoyed this video and the ones before please do make sure to like the video below by pressing the like button In fact by smashing the like button and commenting and if you just want to say hi, I would appreciate it any comment It’s very helpful to let me know that you are enjoying the video and to let youtube know that these are helpful videos for you And you’re learning something which will help me grow and help me continue to make these videos And subscribe to the channel and share with a friend I would appreciate it.

Now let’s get back to this video and talk about the third, the most advanced way of the three that we’re covering in this series so far on how to add CSS to your HTML websites. Now, as you can see here from our previous video, we have the style tag, which is in our head of our HTML document. And that allows us to add a selector that we can then add CSS properties to.

So our selector here is the H1 elements tag name, and this will allow us to target any header with an H1 tag and give it these CSS properties, right? Padding, margin, color, font, size, background, color, border. And we can do a similar thing for our H2 elements and again, add CSS properties and our paragraph elements.

And our anchor tags for our links and even our body, our entire HTML body, right, right here. This is the body element. We chose all the contents of our website. We can target that and give that a background of whatever color we want or whatever other properties that we want. And those values will then cascade down.

To the rest of our documents. So if we say we want our font size of the documents body to be 10 pixels, then every font size, all the texts in our document will be by default, 10 pixels, or we can even go bigger and say, Hey, we want it to be 20 pixels by default. All of our texts would be 20 pixels by default.

So if we save that and go back to our website, we can see that we have our text here. On this page that is much smaller than 50 pixels. So these are the default sizes of our text right now, all the texts on our pages. So now if we refresh this page with our new font size, our new default font size for the body of our HTML document, we can see how it cascades down.

So all of our texts now got bigger by default to the What we told our document to be 50 pixels for all of our font sizes by default. So now to all 50 pixels, we can actually increase it and do 100 pixels. Just to be very clear, look at that 100 pixels. Now you can see that this link is not a hundred pixels.

It’s actually smaller, right? This link takes us to medium. com, which is where we told it to take us in our HTML document. So let’s look at that link. The same, same with this link right here. It is not as big as the rest of our text and we want to know why that is so if we go back we can see that we actually gave our anchor tags a font size of 20 pixels now that’s great because we can tell the html body that all of our font sizes be 100 by default but the rest of our elements can decide What they want their font sizes to be.

So they don’t want it to be a hundred. They can say, Hey, I want to be smaller. I want to be 20 pixels. Or if we tell it to be, let’s say 20 by default week, they can say, Hey, I want to be 25 instead. I don’t want to be 20. I want to be bigger. So that’s how cascading works. The higher element, right? So the highest element in the HTML is the body here, and that has its own styling right here in our style tag.

And all of its values cascades down to its children. And their children. And their children’s children. It’s like a family tree. Right? They inherit from their parent. Right? So the H1 inherits from its parent, which is the body. The div inherits from the body, too. But the H2 also inherits from its parent, which is the div.

Which inherits from its parent, which is the body. So the H2 inherits from its grandparent, the body. So just think of CSS cascading. Style sheets as a family tree. The children inherit from their parents who inherit from their parents and so on. So the children inherit from their grandparents or great, great, great grandparents and so on.

Right? So that’s how this works. Now I told you we have three ways. We’ve covered the style attribute. We now know how the style tag in the head of the HTML document works. And. There is one more that we want to cover before we move on from CSS to talk about how we actually design a nice website. So once we covered this next part.

We can actually go into how we start designing a nice website that looks good that we’ll want to show to someone like our mom. And now we can get to it. So before we get to it, just a reminder, like this video below and tell me that you are still enjoying it, that it’s still useful and that you’re learning something.

And of course, if you’re not following along, get out your text editor and write this code yourself, type it out, don’t copy and paste, type it out so you can learn. It’s all about learning. And if you don’t have a text editor yet, you need to go watch my previous video on text editors for coding and how it works and how it’s much similar to a word document processor, like Google docs or Microsoft word and so on.

So let’s get to our third way of how we can add CSS styling to our HTML documents. Now this is the style tag. Let’s just take all of this out. I’m just going to cut this, Command X or Control X, and just hold on to it. If we hit save, we can see that our styling, now most of our styling is gone because all the styling that was in our style tag is no longer there.

The only style that remains are the styles from our style attributes on our HTML elements. H1, H2, the div, and the path. In the paragraph and the image. So these are the ones that still have their styles, but the rest of our stylings are gone. We can see what we offer. This H2 down here also has some styling and it’s right here.

It color, color red, but everything else doesn’t have styling because we took out our style tag, which contains all this other styling that we added that was supposed to cascade down. And now we’ve put it back. We can see and refresh the page. We can see it’s back here. Now we have it again. So let’s take that out again.

Again, I want to just take this out. And hold on to it for now, and I want to show you how we can actually make our CSS in its own file, put it in its own file, and then import it, link to it from our HTML and load it in as a resource for our HTML to use and build upon. So now, How we’re going to do that is we’re going to go to our text editor or in VS Code.

We’re going to find a way, the way that we can create a new file in VS Code. We can right click and do new file or we can click this button right here that says new file. And in our current folder, I’m in my folder called project two. So I have all my files here, my index file, my contact page, all of that’s here.

So I’m in the same directory. I’m going to actually create a new folder and say, styles and I’m just going to now right click on this new folder called styles and say new file. I’m going to call this file home. css, css stands for cascading style sheets. So I’m going to make a style sheet, a new file that is just for my homepage styles.

So index. html is our homepage. So our css is going to be home. css. Again, you can call whatever you want. I’m just going to call my home. css. You can call it index. css. You can call it homepage. css. Whatever you want to call it. I’m just going to call it home to be very simple and straight to the point. Now, we have our home.

css file. In here, we can put all of our CSS definitions for our homepage so that that can apply to our index. html once we link it, once we import it into that document. index. html file. We’re going to start by just doing a simple CSS definition just so you can see that it works once we link it in. So what I want to do is just as we did in our style tag, I’m going to define a CSS definition here.

I’m going to target our h1’s and I’m going to make all of them have a color of lime green. I’ll make all of them have a color of lime green. Then, what we’re going to do, now that we have our home. css file, I’m going to come back to our index and now add a resource, a link, to our home. css file. What that’s going to do is pull in our home.

css contents, all the contents of this file, home. css, it’s going to pull it into our index. html file. And the way we do that is by typing the tag named link. L I N K And then we’re going to close it. It’s a self closing tag, which we’ve covered before. Just like the image down here, it’s a self closing tag.

It doesn’t have to be opening and closing. You don’t have to do link and link because it closes itself. That’s not necessary. So, we do a link. Just like that. Link and then forward slash and right angle bracket to end it. And then in this We want to add an attribute called href, which stands for hypertext reference, much like on our link, our anchor tag, we have href.

The href on the link tells the browser where to find the resource we’re after. So we’re after a file in our project folder, and we’re going to tell the browser how to find that by first type in. period forward slash And then we can see in our autocomplete here, which is a feature of our text editor vs code It shows us that we have a styles folder in this directory in our project with a styles folder So we can do that styles and then in that styles folder.

We can see over here. We have a home. css file So we’re going to do forward slash again to go to the next directory the next inside of the styles folder And we’re going to do home. css When I hit save and we can see that this is similar to how we link to the contact page. We do period forward slash, which stands for start at the current directory and then find this file contact.

html. So we’re in the folder that holds index. html, contact. html and the styles folder. So we’re going to start this directory, the current directory. And then go and find contact. html, and then it finds it right there in the same folder. But in our case, in our link tag, we’re gonna pull in our CSS file. We actually want to do a similar thing, which is start the current directory, that’s periods, forward slash.

And then go to the styles folder, right, that’s styles, forward slash. And then in that folder, we want to find the file called home. css. And that’s what we have here. So we’re going to start in the index file, go to the styles folder, and then go and get the home. css file, which again has our css in it for our homepage, and the only selector in there right now is the h1 element, which applies a color of lime green, so it adds a css property called color, and has a value of lime green.

That’s color, colon, lime green, semicolon. So that’s all we have for now. Now there’s one more thing we have to do before this link is complete. We have to tell the browser what kind of link this is, what kind of resource is this? So we’re going to tell it that this is, which stands for relationship. It tells the browser, the relationship between the current file, which is the index.

html and the file we’re trying to link to that. We’re trying to import into this current file, the index. html. So it tells the browser. The relationship between the INO HTML and the home CSS file. So the relationship is actually that. The home CSS is a style sheet and that’s it. So you tell the browser, we have a link which is a style sheet, and this is where you find it, this Hre hypertext reference and give it the path to that CSS file in our project.

And that’s it. We hit save and we go back to our website. We hit refresh and we can now see that all of our H1s are green, lime green, just as we want it. If we undo this, if we just remove this for now, just so that we can prove that we’re right. We save that, remove it and save it and refresh. We can see it’s gone, right?

So if we go back and put it back there, link rel equals stylesheet href equals period forward slash styles forward slash home. css we’re now linking in we’re importing our home. css file into our index file and we save and now we can see it there so if we go back to that home. css we can actually add more styles we can do font size equals 40 pixels And we can refresh and we can see our font size for our h1 elements got bigger.

These are our h1s right here Just for example, you usually only have one h1 And that’s fine But for just for an example, we have multiple just so we can show us and we can see right here But our second h1 still has that border of 30 pixel solid red and we can see that right here learn to code life That has a border of 30 pixels, but it still gets the lime green color from this Honda CSS file.

Now that we know how to create a CSS file and then link to it in our HTML file to import it, to bring it in and apply those styles, those CSS selectors with their properties, their CSS properties to our HTML and its elements. We can now apply all the CSS that we previously had in our style tag. We can, we can take all of this, right?

All of this that we had before that was in our style tag in our index that HTML is head in the style tag. We can take all of that and actually get rid of this style tag and just depend on this whom. css file. What we’re going to do is we’re going to copy and paste all those styles. back into our home.

css file. Look at that. So because the home. css file is a CSS file, we don’t have to, and we can’t actually, because we don’t have to type the style tag and then the closing style tag in the CSS file in order to tell the browser that this is the CSS, because the style tags is only relevant in HTML. We’re not in HTML right now, we’re in a CSS file.

The index. html is an HTML file, so that’s why we can have the style tag in there. But the style tag only applies to HTML. So you cannot put HTML, this is HTML right here, you cannot put that in CSS. So we’re going to get rid of that. And we’re going to get rid of this closing tag, we’re going to save, and we can see we now have a valid CSS file called home.

css. It has all of our selectors that we have from our last video that we started with. And we can see it’s here now. Now again, we link to it. And so if we go back to our website and refresh, we can see it’s all here. All of it’s here. If we go back to our CSS file, home. css, we can actually make this, let’s go with whatever this color is.

And look at that, it’s now on this pale violet red. Sure, right? Kind of pink color. And we can go back and make it, let’s say blue, just to drive the point home. We can apply our styles in the CSS file and keep our index. html file just for HTML. There’s no need to put CSS and HTML in the same file. So we can separate the concerns and have a very concise file that is just for HTML and have another concise file that is just for CSS that we then link in to our HTML.

So then when we’re writing our HTML, we just write HTML and then we can just go over here and write just CSS and then connect them. That’s great. So that’s what you want. That is a very fundamental programming principle. The separation of concerns. Now you know how to create a CSS file, add CSS to it, and link to it in your HTML in order to import those styles, those CSS selectors and their properties.

Into your HTML file. So now that we’re here, just so that we can add something to this homepage while we’re in this video, because we want to continue to add to this homepage later and make it look actually presentable. So it’s not just whatever this looks like right now, it’s not ugly. We’re going to just do a little bit more styling just so we can see how we can add more CSS to our CSS file.

Now let’s go ahead and make our list nicer. Look, we have a list down here. It says YouTube. Videos and then code examples and one on one tutoring. We can actually add some CSS to this. So we can say, we can go to the end of our file, our CSS file and type L I. We’re going to target the list items. That’s this element right here.

L I, you see that that’s the list item in our list, our U L, which is our unordered list, which is a bullet point list. So we can target this L I. All of our LIs, our list items, and say we want their colors to be, let’s go with, um, what are we feeling right now? Let’s go with brown. Yeah, brown. Perfect. And then we want the font size to be, let’s go with 30 pixels, and we want the font weight to be, yeah, 200.

Actually, let’s go with 600. Let’s make it bold, right? And if we save, we can see that it’s there. We have a font size that’s brown. We have 30 pixels. We can actually go with 70 pixels just to drive the point home. Look at that 70 pixels, bullet points, huge. You can’t miss that. And now we have 600 for our font weight.

Let’s get rid of that. We don’t need them to be very heavy. Just keep it normal. Normal font weight. See, that’s fine. That works. And let’s just shrink this back down. Let’s go with 50 pixels. for our font size. That’s fine. That works for me. Now, we’re gonna actually say we want to pad our list items so that they don’t, they’re not as close to the bullets as they currently are.

You see, they’re very close to the bullet right now. I don’t like that. Let’s add some more padding to the left side of each of our list items so that they’re not so close to the bullet. Let’s just do 20 pixels. So, on the left, the padding left is gonna be 20 pixels. I mean, refresh, look at that. It moves over.

There’s now 20 pixels of padding here. We can go ahead and make that 40 just to drop the point home. Look at that. There’s even more padding here. So that’s great. Alright, I like, I like this. Let’s, let’s go back to 20. I like 20. 20 is good for me. And now we have StyleLink for our list items, which we have in our HTML document.

And now it has StyleLink. Because we created a CSS file. That is inputted into our index. html file. Our home. css file is now imported into our index. html style using this link tag, which is in our head of our HTML document. Isn’t that wonderful? Isn’t that just grand? We now know how to add styling to our HTML elements in three different ways.

The style attribute directly on the HTML element. And then we also have the style tag. And again, we can do that and say color equals red for our H ones or whatever element we want, but even better because we want to separate concerns, we can have our CSS in a whole different file in our server, in our project.

And load it into our HTML using the link and load in the specific CSS file that we want right here, home. css. But, just so that we can see the power of this, we can go to our stylus folder and create a new file called contact. css. And this will be for our contact page, which we have right here. It’s a very modest page, it doesn’t have much to it.

But we can add some CSS style in there. So if we have our CSS file here and we have our contact. html here, we’re going to link those two now. But let’s just go to our contact page real quick to see how it currently looks before we start editing it. So let’s see how to contact us. This is our contact page right here.

There’s a link to it and this is how it looks right now. So if we add some styles to our CSS, For this page using our CSS file. Let’s just make the whole body have a background that is red, save that and go back to our contact. html and refresh. And let’s just refresh. Just to be clear. We can see that nothing happened.

It’s still, it’s not red. The background of our, our body is not red. Why is that? That’s because all we have so far is this contact. css file. But it’s not connected to this html this contact. html in any way Remember we have to link to that css file In our html in order to import it in order to link to it And tell the browser that we want to load it in and bring in all the styles So we have this contact.

css. We have this contact. html. They currently are not linked in any way so Remember you want to type all this out yourself and practice so we’re going to type now We’ll bring in our contact. css into our contact. html and when we do that is by typing link, right? rel equals Style sheet so we can tell the browser what kind of link this is what kind of resource we’re loading in and then tell it Where to find this style sheet and the href is how we do that.

We tell it we say href equals Period forward slash we go to our styles folder and then in that styles folder. We want to find our Contact that CSS file to load in the styles for our contact page So we’re going to load in our contact. css into our contact. html file and again All we have in our contact page right now is just this background on the body of red And if we go back and we refresh we Look at that.

Our background is red. Success. So now we know how to build a website that has multiple pages and each page has its own styles. That’s great. So we can actually add more. Let’s go ahead and not make this background. Let’s just, let’s make it gray because that’s less offensive. I like gray. It’s more muted.

Let’s do light gray. That’s, that’s too, that’s too gray. Let’s do light gray, light gray. That’s good. Right there. Look at that. Nice and gray. So now we’re going to on this page, we’re going to add another CSS selector. And this time we’re going to, we’re going to target our links, all of our links. We want them to be the color of lime and we want them to be a bigger font size.

They’re a little small right now. So let’s make them bigger. Let’s go to 20 pixels and we want them to have a text decoration of underline. So the browser does this by default. This is default in browsers, but we can just be very explicit in case someone else try to change it somewhere else. Now if we save our contact.

css file, which again, we have imported into our contact. html file using the link tag, and refresh, we can now see our link that goes back to the home page is green. So let’s go back to our contact pages so we can continue, but you see, we have our anchor tag here, the a, which is what we’ve targeted as our selector on this CSS definition here, a opening curly bracket, our CSS properties, and then we have our closing curly bracket.

And this is a CSS definition for our a tag selector. Let’s make this not so unreadable and make it. Let’s go with orange. I like that better and if we refresh we can see right there. That’s our link now We also have on this page a p tag and it’s actually pretty small if you would like to contact us It’s very hard to see this.

So let’s make that bigger. Let’s say p we want the font size of our paragraph p to be 30 pixels and we refresh now It’s much bigger and we wanted to have a background of white because that would just make it stand out better So we’ll make the background white And we refresh, we can see it has a white background now, which is different from the body’s background, that’s light gray.

It has its own background that is white. And we can add some padding, because I don’t like how this text touches the left side of the element’s border. I don’t like that. So this is the box around the paragraph. Every element in HTML is pretty much a box. And they all start as transparent boxes, so you can’t, you can’t tell that they’re just boxes, but they’re all boxed.

When we added a white background, we can now see the box that holds this paragraph’s content. So now, I don’t like how this box and the text that it contains are touching. So I want to give it some padding on the left side, and let’s say 20 pixels. See, now it’s not touching, but I actually want that padding all around.

So I can do padding top is 20 pixels. Padding bottom is 20 pixels and padding right is 20 pixels. Or I can make the top padding to be 30 pixels Actually, let’s just save that first and see you see now everywhere is 20 pixels around And let’s just say we want the top padding to be bigger 30 pixels and the bottom be 30 pixels as well And now we can see is 30 on top 30 in the bottom 20 on the left and 20 on the right, but we actually can’t see that because the Paragraph is just it’s taking up the whole width.

So let’s just say the width should just be fit content Just take up as much space as you need to You Hold your content. So the content actually ends here. So our, our box should just end around here. So that’s what fit content does. The width, we can make the width a hundred percent if we want, and it will take up a hundred percent right there.

You see that? It takes the whole width, or we can say we want it to be 50 percent or 25 percent or 36%, whatever percentage we want, but we actually want it to be fit content. Right there. So we just want it to be as big as it needs to be to hold this content. That’s perfect. Now, I like how this looks. It’s not the prettiest, but it’s good enough for our purposes for now.

We’ll make this look prettier later on. And that’s it! We now have a website that has multiple pages. It has a homepage, index. html, and it has a contact page, contact. html. And for each of those pages, they link in, they bring in, they import, and they load in their own CSS files to add Specific styling for their specific pages, right?

So the home. css is loaded into the index. html. Because that is the home page and we’re loading in the home page of CSS. And then the contact. css is loaded into the contact. html file because we want those styles just for the contact. html. Now, CSS is even more powerful because we can actually create a general CSS file that we want to apply to all of our pages and load it in.

But we’ll learn that in a future video. For now, we’ve covered a whole lot in this video, so I’m going to leave it there. But if you want to get ahead and figure out how to create a CSS file that you can add to each of your pages, so that you have a unified style across your entire website, and then also have specific styling in each page by loading in a second stylesheet that is specific to that page, like we’ve done here with contact.

css for our contact page. And home. css for our homepage index. html. Then I highly encourage you to go figure out how to do that. Again, Google is your friend. Googling is a important skill that I still use today. If I, if I don’t know something, I just Google it. You cannot, you can’t possibly know everything.

So it’s always important to learn how to Google. So go figure out how to do that. And if you do share below in the comments, if you enjoyed this video and I really hope you did, and you learned something. Then please do me a big favor like the video and help me grow this channel Help me get to 200 subscribers and i’ll continue to make more videos to help you learn How to build websites rich websites that you will actually like and want to show to your friends and your family And colleagues and potential recruiters right to get a job Do me that favor and i’ll do the favor of continuing to make these videos.

I’m lincoln Thank you again, and i’ll see you in the next one

--

--

ModernNerd Code
ModernNerd Code

Published in ModernNerd Code

Learn to Code Life. Subscribe to Video Tutorials on Youtube

Lincoln W Daniel
Lincoln W Daniel

Written by Lincoln W Daniel

Chief Bull @ BullAcademy.org ® Elevating writers @ ManyStories.com. Author @JavaForHumans Ex: Editor in Chief MarkGrowth (acq.), Engineer @Medium @GoPuff

Responses (1)