Hello, in this HTML Crash Course video, we are going to be covering CSS. So what is CSS? Well, it stands for Cascading Style Sheets. Simply put, it's a way of styling your website. So if you want to add a background color, a background image, change the sizing of something, changing the positioning of something, simply put, the beautiful websites that you see are they look like that? Because our C, F F, this isn't really a tutorial, or not an extensive CSS tutorial, but I will be creating a CSS Crash Course series as well.

So check that out. So C s s, how do we start that? Do we put it in the body tag? Generally No. You either put it in the head tag within style tags, or you're putting in a separate file or files or some mixture. It's It's totally up to you.

Generally speaking, you want to abstract it into a separate CSS file. I want to show you both methods. So first of all, actually, before we even do that, let's put some elements here. So we can actually use them and refer to them afterwards. So we're going to put a p tag. And in here, don't put Hello, well.

And then we're gonna put another p tag. And in here, I'm gonna put paragraph, one very long paragraph. I can no I'm gonna put the famous Latin. You've seen what slides when during development in design mode, lorem ipsum, which stands for pain itself. So So ID equals my thinking was this idea. Let me just work through that and then I'll explain to you ID one Id is an attribute, which allows you to uniquely refer to a element, essentially.

Because if I were to refer to all p tags, I mean, if I were to refer to P, as in the paragraph tag, it would affect all of the P tags for refer to already one, it will only affect this particular paragraph tag, you only have one ID in any single page, you can have it. So you can't have a nova element with the same ID. You could have it with ID two, but not ID one, Mo thinking, Okay, what if I were to have several paragraph tags, but I wanted to affect let's say half of them? Do I do several IDs. Now thankfully, there's a number of cool way of affecting multiple elements and they don't have to be of the same type. So you've got an effective paragraph tag, a div tag, an anchor tag and then reached out the video tag however you want.

So what you do is add a class, which allows you to, I guess, identify your, I would say refer to multiple different elements inside here, I'm just going to put paragraph lawn to, yeah, to the fine. I'm gonna copy and paste this, change this to three Alma chambers to div. Do and leave that as class one. So if I refresh, it all looks the same, pretty much simply because I've got no styling at the moment. And the number thing you may know, or remember is, if I were to put an h1 tag, for example, which is a header tag, and toggling 4456 in there, save that refresh. You can see it's bigger.

And that's because this got me Build stones have a right click. This is the stone in upright applied to it. So it's a display of blocks. So it's on its own line. It's a bigger font size, it's got margin, and the font weight is bold. So that's essentially what we're going to be doing not unnecessarily this sort of code.

So to add CSS, just add a box here, you open up a style tag. And inside here, we're going to put Body Body. background, there are a whole heap of ways to affect CSS. I recommend checking out the W three schools website or the Mozilla Developer Network, and have not all the different codes that you can use to affect different aspects of your website and different apps. aspects of your element is fantastic. So read you might be thinking what does this do I think it should be to get body so that refers to the body element which is right here and it sets it to the background color red for refresh everything right?

Very simple stuff. So now you might be thinking, Okay, we've got our fingers red, but the black text doesn't quite go with the red or the shade of red so let's change it to white. So how would we do that? What we can do is refer to the p tag and do color. white and color is referring to the text color I have always fought this is confusing for beginners it should be text, dash color color should be offering felting color should be the background color, but that's just my opinion. You can also replace the inbuilt colors with hexadecimal values.

So If you know a bit more about how you could do something like ff ff ff, which is the equivalent to white, but I'm just going to keep it simple. Save that refresh. Let's see, it's now white. You might be thinking, why isn't this on white. And if we go down, have a look, it's not white, because we've only referred to the p tag. And this is not a p tag.

This is a div tag. So now, let's refer to this ID one. So I'm going to do hash ID one. Color. green, yellow, save that that should only affect this particular p tag because it's unique to this one I forgot to mention. When you're referring to an element, you put the element name, when you're referring to an ID you put hash.

This is what indicates to the browser that you're affected. or trying to reference an ID, then you put the ID name and it is case sensitive. So be wary of that. Let's refresh and as you can see, but this little green yellow color. Next, we're going to affect all of the class one classes to affect a class you do dot dot refers to a class and the class name. So class one again, case sensitive.

And in here, I'm gonna put font dash size, we're going to increase the font size to free me charges universal unit pixels as well refresh and as you can see if it's affected all of the elements with the class one tag, final thing I want to show you is something that I mentioned towards the start of this video. And that is having a separate file for CSS is recommended because as you can see, we've already added quite a few lines here. And if you're trying to make websites or are going to my education platform Start adding CSS to make it look something like this or make it look more appealing, you get a whole heap of CSS, you don't want that mixed in with HTML, which you only have a few lines like this, you'll have a lot of HTML, you'll probably mix it with JavaScript and PHP, and God knows what else.

So what you want to do is, I'm going to show you the best way of structuring your project. So right click on the new folder, then the SS. Then in here, your all your CSS file, so right click, new file, and then name it. index dot CSS, you don't need to have the same name as the file that you reference in the from. I'm just going to call it index or CSS and to actually, actually before do anything, I'm going to put some code in there. So what I'm going to do is give this effect all the div tags, which is just this one right here and in here, I'm going to put font, style, italic, save.

So I'm going to send the font, we're going to set it to italicize for go back refresh my thinking, it hasn't changed. And the reason is this file is separate just because it's in the same sort of project directory doesn't mean it's going to automatically link because that's not the way it works not the way it should work because just in case you have other files in there for whatever reason, you don't want them to automatically be linking to your website. So to include a TFS for you do in the head tag, you do link, Arielle, which means relationship and the relationship is a style sheet. Then you put type for the type is text for slash CSS, and then you put href which simply means where is the fall so this could be accepted. Not on somebody else's looks a lot like the content delivery network.

For example, the very common practice to use a CSS or JavaScript fall from a content delivery network. Want to keep it simple. It's in our CSS folder. We can't just put index dot CSS like that, save that refresh. It doesn't do anything. Because this doesn't exist in our root directory.

To reference CSS, we do CSS for slash, save it, refresh. And as you can see, it is now in Tally. So that's it. There's two ways of doing it using a style sheet. I mean, using style tags, or put a put in it in an external file or files. I recommend this method right here, putting it in an external file.

This is great just for quickly testing for not a long term solution, by any means. So that's it for our HTML Crash Course video on CSS. If you liked it laughs now if you didn't please let me know so I can improve it for the next time I created a video. And as usual, thank you for watching, and I hope you have a great day.