Hello, and welcome to this setting up video for the CSS Crash Course. Pretty simple. We're going to set up our projects is going to have a HTML file and a CSS file that we will be using throughout this series. So make sure you have some sort a text editor. If you have a personal favorite fantastic if you don't recommend Sublime Text, it is free and it is fantastic. It has been my favorite text editor for a very long time now, brackets is also another good one.
It's outside if you're doing a series big project brackets is probably the way to go. This offers a few more features or plugin variety. But Sublime is a great way of opening file quickly and doing a bit of editing. Borlaug said you might have your own preference so if you do just get hold of whatever technology you want, and not I didn't mention, brackets is also free, anything made by Adobe, which is Good as well. So I'm just gonna open up my CSS tutorial folder, go nothing in here. First of all, I'm going to create a new file, I'm going to call it index dot HTML index.
Html. If you haven't seen our HTML Crash Course series, go check that out. I would recommend that before you do this here, because we're not going to be covering, like, what HTML is, for the most part in this series, it's just going to be given that you have basic HTML, understand, you don't have to be an expert. Just some basic knowledge on HTML will suffice. So let's just quickly with a website, so doctype HTML, HTML. So he'll go ahead and now we're going to a body skeleton first and then stop filling out some of its organs.
Try to CSS tutorial. leave that blank for now. I'm going to put in the body. I'm gonna start off with a div tag. And I'm going to start off with before do any of that. That's just text in here from Hello, world.
Great, lonely, lonely going for another div. Inside Hey, I'm gonna just put the text and save that. So let's open up our file. And so this is our web page at the moment. I'm going to show you the future premade ways of styling, I'm not going to talk about really destroy the method we're going to be using aka the property and the identifier, I'm just going to show you three ways of applying styling. first way is inline styling.
And to do that, you go into any element that you want. And on the open tab, you go and put the style attribute equals quotation marks. And inside here, you put the property that you want to modify. So I'm going to put color red, we just modify the text color, but don't worry about understanding the properties in this video, because we're going to be covering all the different properties that you'll be using in separate videos. Sorry, quotation marks should close after the entire property. I don't know why that happened or must be my mistake of doubt.
Sublime just did it. Refresh, rent fantastic another way. Actually, let me mention our inline styling is Not recommended for any serious development. It just isn't adaptable very well. Unique to one element. And it just doesn't look very nice.
So stay away from inline styling as much as possible. Throughout the series, I will be doing quite a lot in non styling. That is just to illustrate what I'm doing for this a lot easier when you're testing stuff out and teaching. But as a serious developer, do not use inline styling, I'll show you the ideal method. The next method I'm going to show you is using a style tag inside of the head tag. So you put all your like so and inside here, you simply put your CSS, you can't just put color code on red, because this style property knows it's affecting this element.
So what you need to do is identify the element or elements that you're affecting, then apply The properties are diff. So this affects every single div, and have a background color of yellow, you might have seen that you've automatically given me recommendations. That is the properties of a good text data. That's what sublime does. And other text editors do that as well. So having a good text editor really does help learning and development in general.
So let's go back refresh. It's now yellow. Let's just actually you might be wondering, why is Ms minimize this? Why is the background all the way to the right, pretty much by a little bit of pattern here. And the simple reason is actually, my technically simple reason is, it's a block level element, which covers the width of the parent element similar. For this mention that in case you're wondering, this method is recommended more than the inline styling method.
But the best method to use is a separate CSS file. So what we're going to do is create a folder inside our main folder called CSS. css, you can call it whatever you want. There's no rules about what you call it. The general standard is to call a CSS, then in here, create a file. You can call this whatever you want.
But I'm just going to call it index dot CSS. So for index dot CSS, here, here's another great thing about sublime or another good quality programming text editor. You'll detect what sort of file you've got open and set the high load into HTML, CSS, PHP, JavaScript, etc. So in here, we can now apply some styling. The rules for the CSS file is essentially the same as a store tag, in that you can just put a property you need to put the element or elements that you want to modify it and then the property itself. So what you do you don't need to put style tag because all you would put in here is style code.
So we can just immediately put body. And body just refers to this element here, which is the face to the entire web page on for background color, black, black, save that, go to the web browser refresh. And it's not working anymore. We're thinking, Oh, why isn't it working? You might even go to the developer console, like so if you've watched the HTML tutorial series, I've showed this and you've applied nothing. And the reason it's not working is because it doesn't automatically know that you should include a CSS file.
No matter what you name your inviter where you put it, unless you link it up. You won't use it link in it. Thankfully, very simple. You do it for a link tag. This is a fourth element and I don't have a specific closing tag. It doesn't have any content in between it.
Put link Korea, which is the relationship and the relationship of default is going to be a style sheet. And you put h ref, which refers to the path of our CSS file. So for us if CSS for slash index dot CSS, but this could be hosted on a separate website, and you can just put the URL to that file, if you want to save that, and if I go back to my web browser refresh, and you can see the background is now black. So those are the free methods in my styling, not recommended. Only recommended for testing I'm just quickly doing some styling but do not use the as a main styling method. Then the the store tags out recommended more than inline styling, but preferably you want to be using a separate file.
And just to mention, you can use multiple CSS file so if you have a very big website, it's very common to have several CSS files too. To be able to say, Okay, this is main power, maybe this is a footer header, that a crony for thousands or even 10s of thousands of lines of code, you can just sort of punch up into a couple of hundred or 200 or 300 lines of code into different files. The last thing I'm going to show you how to do a comment in C FF, D, Ford slash asterik, a strict four slash 334, slash, and anything in between here is not well used, essentially, probably the best way to put it. So hello world. Comments are used to explain your code. You might be thinking, well, I can source you know, the effects the background color changes to black for the body.
And for this, it's simple. But when you have hundreds of thousands of lines of code, and the code becomes more complex, is harder to understand. And you might be saying, Well, if nobody else is ever going to read it, why would I ever want to do something like this, and the simple reason is, so others may not read it. You may come back a week later, later A month later And trust me, this will happen in your development career, you might look at it and think what the hell? So, ideally, comment the code if it's not exactly obvious, or if you do some trickery with it, so you or nobody can understand exactly what's going on on it at a later date. So that's it for setting up CFS.
There will be several more videos in this series. If you have any question, any question whatsoever, feel free to post it on my education platform. So no learning Dakota UK, there will be a link in the description to well, the archy won't be a link up just a resource. There'll be added to the source code from this video, and the fourth code from every other video in the series. If you liked the video, please let us know. And as usual, thanks for watching and I hope you have a great Day