6: How Do We Include CSS In Our HTML | Basics Of CSS | Learn HTML and CSS | HTML Tutorial

today we're going to learn how to use CSS when we want to make a website and in the first episode of this course here I talked a bit about what HTML and CSS actually was so just to do a recap it's - most actual content and put inside the website which you can see right here right now have a index.html file which is front page and inside this file we have a bit of tags and some content so we're texaco inside the browser refresh you guys can see we have a header that says this is the title and then we have a piece of text saying norm Epsom so as you guys can see right now the text doesn't look very pretty and what we can do in order to teams of how this text looks like or any other kind of elements inside the website is we can go ahead and add some styling to it now a styling is basically used to change up how to HTML is going to look like inside the browser and we do that using CSS so the first thing we're going to do in this episode is I'm going to go to insert gasp how to actually create CSS inside your HTML file then afterwards I'm going to show you guys how to create something called a style sheet which is an excel CSS file that we use inside the website and this is how we mostly create websites using a style sheet and we don't really create styling directly inside the HTML file so basically in the future episodes we will be using a style sheet and we won't be styling directly inside the HTML file because that's not the typical way we do it inside real projects now after we talked about styling also want to show guys something called a research style sheet which is something we need to have inside any kind of web projects because basically when we have a browser such as Chrome or Firefox or edge or Internet Explorer they're all going to have some default styling inside the browsers right now if you guys will actually look at this you may notice the different ways to zoom in that we do actually have some spacing right before the text you know from the top of the browser and the left side of the text and that's because right now chrome has some default styling inside the browser meaning that if we were to go and set my developer tool which is sure the guys in the previous episode by right-clicking on the text go down to inspect you guys can see the right now we have these weird orange boxes on top of the text and below it which basically means that right now the text has been posed to have some spacing on the top and the bottom and we want to reset all this inside out before we actually do get started on any kind of web projects we're going to go and learn about that at the end of this episode so what we're going to do first is we're going to go ahead and just exit out here go back and set our code and the first thing we can do no taxes down something directly inside the HTML file is if I were to go up inside my head tag up here can actually go inside the head tag and create something called a style HTML element so right now you guys can see you have a pair of style tags and inside the style text we can actually go ahead and create CSS code now we haven't really talked about CSS code yet so just a few basics and what the syntax is when it comes to CSS code and by the way before you get frustrated that we have to learn CSS also it is really the most easy language you can learn inside coding because it's so simple to actually use so the first thing we're going to do here is I want to style my h2 tag down here which has the title inside of it that says this is the title so inside my style sheet I'm going to go ahead and say that we have a 8/2 tag so we're just going to say h2 space then I'm going to say we have curly brackets opening and closing brackets and then I'm going to go and go in between these brackets here so now you guys can see we have the closing tag at the bottom here and we have the opening tag right after the tag - h2 definition here so right now we actually told the code we want to style the h2 tag and we did that by actually putting the h2 tag inside the style elements we have here so inside the curly brackets I'm going to define what I want to change about the h2 tag so right now we could actually say I want to change the color of the text so I can say color Col 1 and then I can go ahead and define what the color the text should be inside the code here so can actually say that I want to have a red text then after I define the color I want to say semicolon so the basic thing here is that each time you want to style a specific thing we type the keyword for that specific styling then we say colon which means that now we need to tell what we want to do with the styling such as changing the color to red and then once we're done with this line we're going to go ahead and close off the line with a semicolon and it's very important that you guys remember to put a semicolon after each line here because see a lot of people saying that the code doesn't work or something and chains inside the processor always make sure you add a semicolon after the end of the line here okay before you go up to the next line so now we will just save the code go inside my browser refresh you guys consider the color teams to read okay so what we could also do is we could go back inside the code go down below the color and say that we want to change the font size so I can actually save fonts - sighs : and now we need to define what the font size should be so right now we could say we want to have 70 pixels which is quite a lot inside the browser and remember to add the semicolon then I'm going to go and open up the browser refresh and nine guys consider much bigger font inside the browser now let's actually go and try to manually remove the the margin that we talked about when I did actually right-click and inspect the text so as you guys can see we have all the aren't stuff on top of and below the actual text so if we were to go back inside the code and say we want to also change the margin colon semicolon and say that ones have zero pixels of margin on the top left right bottom but just saying zero pixels and go back inside my browser refresh my guys can see that the spacing disappeared now what we can also do here just to kind of mess around with the code that's actually going to add a background color inside this text is it with an axis a background - color colon then we could actually say blue semicolon go in and refresh the browser you guys can see that now we have a blue background color behind the text here so we can do a bunch of stuff when it comes to styling and if I want to send to the text inside the website I can also say something called text - a line Col one Center semicolon save it refresh the browser and now you guys can see we have the text centered inside the website so now we just out the h2 tag inside the browser and we're not going to talk too much today about all the different styles that we have inside CSS but as you move on this course here I will show you guys more code when it comes to CSS know to change different things such as text or boxes inside the website but we're not going to do today because it's quite a lot of code that would have to go through in just one episode so what I'm going to do here go ahead and change the styling of my paragraph tag as well so if you want to add more stylings inside our website what we can do is after the curly bracket the closest of the h2 tag up here and go down to next line and say I want to style the paragraph tag then again we add the curly brackets go in between the brackets and then we can do the exact same thing now if I want to change the color of my paragraph text what we can actually do here instead of using red because that is not very professional to use is we can go ahead and use a couple of different formats now we could use RGB we could use hex so let's actually go to add a hex code to this paragraph so I can access a hash tag and then to give it maybe a dark gray color we can go ahead and say nine nine nine nine nine nine which is six nines I'm going to save it go inside the browser then refresh and as you guys can see now we have a very darkest Gray's color inside the text too instead of just black we can also go back inside the code instead I want to have maybe a white color for the text and go and say ffffff now do you want to point out that if we're using a color that has the same letters or numbers all the way through it we don't need to put 6ss inside the hex color we can actually go ahead and just stick with three so if I save it go inside the browser refresh you guys considered the text disappear but it didn't really because it's just white so we can't really see it inside the browser on a white background okay now another color table you could also use this RGB so we were to go down give it a background color we can go and say RGB parentheses semi-colon because we need to end off each line with the semicolon and then inside the parentheses when go and say they want to change the red value so we can go ahead and say zero comma then the green value which is zero comment and then the blue value which is going to be zero as well in order to save this go inside the browser you guys can see that we have a black background and that's because the RGB value we just gave it by saying zero zero zero is going to be black you can also change the first one to 255 go back inside the browser nine guys can see it turns red so now I just learned how to add styling inside the HTML file but let's go and talk about how to add styling directly inside any kind of HTML element so we'll go down inside the h2 tag here save space we can actually go to add an attribute called style so essay style is equal to double quotes then inside the double quotes we can actually go ahead and write CSS code just like we did inside the style tags so we want to change the background color I can save backgrounds - color colon semicolon I can go and say I want this one to be the hex color of a very light gray color so I can actually say f3f3f3 save it go inside my browser I'm going to go and refresh the browser and you guys will notice that the background of the text here will actually turn into a light gray color so when i refresh you guys can see not turns light gray so we can actually go ahead and add styles directly inside HTML elements but like I said this is not really the way we usually do within size a typical web site typically we would actually create a CSS file that has all the CSS code inside of it so what I can do is I can actually go ahead and say we have a new file save it inside a root folder and I'm going to go and save this one as style dot CSS now one thing I want to mention here is that you don't have to call it style for CSS but if you want to create some websites in the future that might have a CMS system inside of it which some of you guys may not know what is yet then I recommend you make it a habit to call it style the CSS because you will be required inside WordPress at least to call us now that CSS later on if you want to use the CMS system so just make it a habit to call it style the CSS then we're going to go and save it and one thing I want to point out here before we actually start creating styling inside the stylesheet is that he can in fact have multiple style sheets inside your website now typically at least my cases that don't use more than one style sheet because it makes it too confusing having to have multiple documents open just team styling inside a website okay so what I'm going to go and do here is now that we have a style sheet inside the website if I were to go and say we want to style the h2 tag open up the curly brackets and then say I want to style the h2 tag for example giving it a different color I'm going to say color colon red semi : and save it you guys will notice that inside the browser it doesn't actually change the color and that's because right now even though we have a stylesheet inside the root folder we haven't linked to it inside the HTML file so if I were to go inside my headset here we can actually go ahead and go to the next line and we're going to go and create an HTML element called link so I'm going to open up my tag here I'm going to say link space then I'm going to say grill and set it equal to style sheet just to define what kind of link this is then I'm going to go afterwards and add a second attribute which is going to be the link to the actual stancy so I can actually say href which stands for Hyper reference equal to double quotes and then we need to create the actual path to the stylesheet now right now for were to go inside my root folder you guys can see this down seems actually right next to the index file so we don't need to tell to go inside any kind of folders anything so we just go ahead and write style dot CSS and then I'm going to go to end off the tag here now the link tag is actually an empty element meaning that we're not going to have a closing tag so I'm going to going to save it and now go inside my browser refresh and now I guys can see we have the text read so we can actually go ahead and go inside the stylesheet here and create a bunch of styling for example for the paragraph tag if you wanted to and we can go ahead and create all bunch of Sonic's inside the stylesheet now right now showed you guys how to target specific elements inside the website with the taxi called h2 and the paragraph tag so right now if we were to just say that we want to style the h2 if I were to have another h2 tag below here somewhere and start the website right now both of these tags if we were to save it refresh the browser are going to be red and we don't want to have all the different h2 tags inside our website to be red so we can in fact using styling change the path to the actual element so right now it is this h2 meaning that all eight to text inside the website are going to be red so what I can also do inside my styling is if I were to put the second age two inside and div box and just go ahead and paste it in here so I'm going to say copy and move it and then go and stop my styling here can actually go ahead and say that we have a paragraph tag but inside the website somewhere we have a div tag and inside the div tag we have an h2 tag so I say space h2 and then I hope maps occur in the brackets mean that inside the website if we have an h2 tag inside a div then it's going to apply the styling here so I can execute a color it's going to be green semicolon save it refresh the browser and now you guys considered this one down here turns green now you might be asking well we're just going to go to new stems each time we're going to go and target specific elements inside the website with styling and know that that's not really the optimal way to do it instead we usually use something called classes and ID's in order to target specific elements inside our HTML files so if we were to actually go inside my HTML file we're not going to learn too much about in this episode but just to demonstrate what I mean that we can actually target specific elements using classes and ID's I'm going to go and show you guys one example here so we'll delete the div tag and go inside my h2 tag say space and then I can go and add an attribute called a class equal to double quotes and then I can give this h2 tag some kind of name I can choose whatever want to so in this case I'm going to go and say title so right now we have an h2 tag inside our HTML file called title so we go inside my stylesheet I can actually define that I want to target this specific h2 tag by saying I want to target the tag that has a class by saying punctuation called title so now for were to go back inside the website you guys can see that the title is still green but like I said don't worry too much about it because we will be talking about classes and ID's and how they affect the website in a couple episodes from now now the last thing I want to talk about here before we actually end of this episode is something called a reset stylesheet because right now if I were to go inside the website like I said inside different browsers we will have some default styling inside the website such as spacing or font sizes or something else and the problem with this is that right now we were to create a website that looks the way 1 & 2 inside chrome if we were to use inside Firefox then some things might change inside the styling of the website so it does actually change how it looks like and I don't want to have that inside different browsers so we need to make sure we reset the default browser styling we have inside any kind of browser so the way I'm going to go and create a reset stylesheet is that I'm going to go and go up inside my tab here just create a new tab and I'm going to go to search for reset stylesheet then inside google here we can go down to at least a second link inside my search here I will leave a link in the description for this specific page here and as you guys can see inside this page to your called html5 doctor we have a person here called Ritter Clark and he did actually create a reset code so what I can do here is I can actually go to copy the code he has and scroll all the way down to the bottom here so I can actually say we want to copy till here copy it go inside my stylesheet go to the top of the stylesheet and paste it in here I'm going to go and save it and then as you guys can see now we have a bunch of styling inside our style C and don't worry you don't need to know what this means you just need to have them inside your stance each so don't worry too much about it if you don't understand some of the code which is pasted in okay so at the bottom here we do actually have our own code that we just created and then at the top here we have the reset styling now one thing that is really important to point out here is that we need to actually load up a website inside the browser it's going to load your files by looking at it from the top to bottom meaning that the reset styling inside the stylesheet has to be the first code inside your stance is because if we were to create my own code down here in the bottom and instead of having it at the top instead then it's going to load up my code and then afterwards of my receptor code by actually loading up the styling that we haven't set the reset starseed afterwards so we don't want to have that okay so the reset styling has to be the first thing inside your style sheet now if we were to go back inside the browser go inside our website refresh you guys can see that all the content jumps up together in the top left corner and even the font size has changed inside our text meaning that right now everything inside our code here doesn't have a default styling inside my Chrome browser okay and we want to have that in order to make sure that everything looks inside all browsers so this is basically what I want to show you guys today we're going to go and talk more about the difference ESS dialing so we're going to go and use inside our websites a bit later on in this course here so I hope you guys enjoyed I want to see you guys next time

Channel: Dani Krossing

Views: 346,046

Rating: 4.9349713 out of 5

Keywords: How do we include CSS, how do we include css in our html, include css, how to include css, html, html tutorial, css tutorial youtube, what is css, what is css?, css3 for beginners, how do we use css in our website, css, css tutorial, stylesheet, what is a stylesheet, what a stylesheet is, style html, style html code, add css in html, css3, css background image, css for beginners, basics of css, what are the basics of css, link to stylesheet, how to apply css, apply css

Id: YNSnugnQYiI

Length: 18min 3sec (1083 seconds)

Published: Fri Aug 11 2017