Up and Running With CSS Type Selectors


Coding Addict


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

and now let's talk about the most basic selector which is gonna be over here type selector so as you can see over here I still have my headings right heading 1 heading 2 and 2 paragraphs and if I go to my main CSS over here if I would want to target the actual element right over here whether it's gonna be a paragraph or heading 2 or heading 1 the only thing that I need to write is actually type right so here I write over here h1 and again I'm gonna write the property that we should be already from the other one all right this is gonna be background color and as you can see the nice thing about brackets is as you're typing over here your properties actually gave you right away values right so here if I type F right this is gonna be all the properties that are actually associated with F and if I type B all right so the similar thing will be had in HTML where it was giving us a tag tag names the bracket is actually giving us all the properties and the same is gonna be for the values so if I go over here and say background and I'm gonna say let's say background color you can see right away brackets mortem gives us right and gives us all the possible names now these are not all the colors right these are name colors and further on will then learn about hex colors and RGB hair colors but just for a sake of it right we don't need to remember right we don't need to remember any red blue or whatever we can actually go over here and just search for them right so let's say we're gonna use this aqua over here right so what happens what we have over here is we're targeting heading 1 right what we could do is obviously right heading to right or we can make a separate rule for it right so again let's do this and let's just copy this guy over here and let's create it for heading 2 and I'm gonna be for now using this background color property for two reasons first of all because it's actually lets us to see much better right if I would be using the other property sometimes like font size it's maybe it's harder for you to see but over here you can see that it's actually right away I'm targeting this element right and also for another reason let's not skip ahead all right let's work first with the selectors and then let's go to the properties and values let's kind of do everything one by right so here I'm gonna again I'm gonna go back over here and if you remember with the brackets if we just press ctrl spacebar right if we delete and if we lose these quick hints right you can get them back right just press ctrl + spacebar so here let's say that we're gonna go with the Crimson right so this is gonna be our red color right and again you can see the basic syntax how it works right whatever element I want to target right all I do is right to type over here and it's the same as HTML element right so if I go back over here and if I would say paragraph right and again I'm gonna do the background color right and I'm gonna say yellow you can see that it's targeting the paragraph yellow now what you can also see right away that if I have two of these elements that are the same right so paragraphs are exactly the same in this case right it is targeting both of them right so if I'm gonna go over here any fanger I'm gonna grab the third one all right so let's say over here I'm just gonna grab the third you can see it's right away gonna get the same thing because what I'm saying is that I'm targeting all of them all the paragraphs right now later on we're gonna look at how to specifically target let's say paragraph number one in this case or paragraph number two but from now on you can see that in general right if I'm targeting one element right by the time I'm pretty much targeting all of them now what we can also do is actually combine them right let's say that we all of them wanted to be aqua this first one right now there's few ways how we can do it but one of the ways is we can just group them together so if I go right over here and the syntax would be I need to place a comma all right and then I need to write a second selector right so if I say heading to right again if I don't want a paragraph again I'm gonna place a comma and place a paragraph so you starting to get an idea right I can group them together as many as I want right if I want to group all the elements this way I could have done it it wouldn't make much sense but it is possible for me and while we're still on the basic selectors I just want to show you two selectors that you'll be targeting pretty much in every style sheet right and the first one is gonna be selecting all over here like this so this selects all the elements all the elements that you have like none of the elements pretty much cannot hide from this right and this is you used mostly and again we're gonna skip a little bit ahead but there's called something called padding and margin right and what we usually do for the document and again I'm gonna go over these properties don't worry right just for now just just follow me right so here if I write padding and I'm gonna say margin zero all right you can see what happens the texts move and again I'm gonna go over what these properties means but this is gonna be very very useful for you because you're gonna be using it a lot right because then you're gonna be in charge of everything you don't have anything preset from the document and another thing is the body this is another select all right and what we're doing is let's say over here again color will say yellow and where I'm getting the body from you go back over here see this tag so now we're targeting the body it's as simple as that right because it's the same tag as heading one there's no different and you can see over here that this is gonna be my background right so for the whole body doesn't matter how many paragraphs I had over here right so I can just start copying pasting like crazy over here right still everything is gonna be yellow because I'm sitting over here in this body right so I'm just gonna get rid of them I don't need them that many all right I just went a little bit overboard but you understand that idea these would be basic right type selectors where we're actually targeting the element by just writing its tag name