Up and Running With CSS Placing CSS

Author:

Coding Addict

Keywords:

css,html and css tutorial for beginners,html,css tutorial for beginners,html tutorial for beginners,coding addict,html tutorial,html5 and css3,codingaddict,html css tutorial,html5 css3 tutorial for beginners,html and css tutorial,css tutorial,brackets html and css tutorial for beginners,brackets html,brackets html tutorial,brackets css tutorial,brackets css,html in brackets,html tutorial in brackets,html and css in brackets

Subtitles:
and now that we are in our text errors the first order of business is to understand how can we start working with CSS so here you can see that I'm gonna be using the brackets text error and this is gonna be my life preview so we're here we're gonna start by creating the first HTML skeleton all right the most simplest one and we're gonna go ahead and we're just gonna say this is gonna be a full HTML skeleton now that we have this one over here we're just gonna say that the English is gonna be our language and over here for the title we're gonna say that this is gonna be CSS tutorial over here and then over here you can see that we have a script and we have a link right and let's just delete this link because we're going to create a new one anyway just in a second right so here as you know from HTML we would need to be working in our body right so let's just have an example where I have a heading one over here like this I'm going to create a heading 1 and I'm gonna say that this is gonna be this this is paragraph 1 number number 1 over here and let's just add some paragraph with the text so I'm gonna have a paragraph and I'm just gonna put some dummy text right over here and maybe let's put some more right and over here what I'm gonna do is I'm gonna create another one another heading and I'm gonna say this is gonna be heading 2 or here like this heading 2 and this is also going to be this is paragraph paragraph number 2 like this and then we're gonna write another paragraph right but we can just copy and paste this guy so if we grab this paragraph over here like this and I'm gonna copy this guy and paste it over here good we're done with CSS let's check it out what kind of options we have to work with CSS and over here I'm gonna create a comment over here so you have it all the time in front of you and the first one would be inline then we have internal we're here and then we have extra I don't let's just start one by one so in order to work with CSS there I think that I would need to do if I would want to work it in line I could go to the actual element that I want to work with right so in this case let's say I'm gonna have work with heading two and I'm gonna write over here style and over here then I would need to write my property and my value and I'm gonna explain what is property in value in a second but for now let's just work with me right because we haven't learned it yet and let's just do whatever I'm doing right now so I'm gonna say background color over here and I'm gonna set it equal to let's say red oh yeah right so now I can see that right away my paragraph turned red I did this magic I wrote over here this style background color red and it appeared red over here now this is the our first option now this option though this is not very popular because what happens is then you need to actually go to every element in your page and add some kind of rules and you will just see in a bit how actually it is much more useful to do one of the other two ways so the other way the second way would be internal in order to work internally with our CSS in the head element over here we will need to create a tags and they would be called style tags over here like this and let's say over here what I'm gonna do is I'm gonna write a CSS rule and again I'm gonna go over the actual syntax of the rule but for now just follow what I'm doing and then later on you'll understand in a second right so here I'm gonna say heading one so would be targeting right now heading one and what I'm gonna say this I'm gonna say the same thing however I'm gonna write it over here and I'm gonna say background color and I'm gonna say blue this time oh yeah like this now I can see that it actually turned blue now this option is much more better because what I can do right now I don't need to target the actual elements right so if I would want to say let's say target all the paragraphs right I would write the background color over here and I would write yellow and again don't worry about right now about these background colors the properties the values right again we're gonna go over them just in a second just see how we can use actually CSS right now this would be our second option now our third option and actually the option that everyone uses because it's the most convenient one is actually called external and for the external let's go over here and what I would need to do is that a link but it still would need to be in a head element over here right so don't put it in the body actually put in a link on it and over here you can see that I actually skipped a little bit right what we would need to do over here we'll need to write a link over here like this and then we would need to have a relationship over here and we would need to write stylesheet and then over here this would be an H ref right so basically what is the source so it's the same as like if you would be dealing with links right and over here you can see that I don't have the stylesheet yet right so I'm just gonna say this is gonna be main CSS over here right and obviously over here now I'll need to create a CSS stylesheet right and what I would need to do is create a new file so I'm gonna say new file and I'm gonna name it main CSS now my hands are kind of tied because I already named it main CSS right but just remember for all the CSS files you need to have the CSS extension otherwise your editor or browser is not gonna know what are you talking about right so don't write like your own names like I don't know it's like text or something right if you were gonna write over here main text over here or in here right it's not gonna make any sense right so it needs to be main CSS and what we can do is we can actually write the same rules over here right so let's say for this case I'm gonna say that this is gonna be body right so now I'm gonna be targeting the whole body and over here I'm gonna say background color and let's say something like pink right now I can see that my whole body turned pink now the difference over here with this one is that I don't need to attach it to every file that I'm working on right the difference is that I can have what code in one place over here in my stylesheet and I can just attach the stylesheet to all the documents that I want right I don't need to be going around and copying pasting this code to every style sheet that I'm the only thing that I need is a link over here and I can link this to as many pages that I would want there for this over here this third option the main CSS or the external over here external stylesheet is the most preferred one and actually that's where we're gonna be working all our tutorial because we just need to set our priorities straight and we need to start working like we would be working in a real world

Loading