HTML & CSS Crash Course Tutorial #5 - CSS Classes & Selectors

alright then ganks so hopefully now you have some idea of what CSS is I hope so anyway and now we're going to take it one step further and we're going to talk about selectors a little bit more in classes and that kind of thing so we kind of know what selectors already are if we want to style something in CSS we'd create a selector to target a certain thing for example if we want to target the P tanks then we would just simply write P and that would be our selector then we'd write the declarations inside here now what if we wanted to target one individual P tag well this is not going to work because if we did this then it's going to target every single P tag on the page and I can demo that I'm going to call all of these read and save it then we'll preview in the browser and we can see that every paragraph tag now is read okay so what if we wanted to target just one paragraph tag in this div and by the way I already pre-made this HTML template I hope you don't mind it's just a div with several PS and also a couple of anchor tags at the bottom that's simple but anyway what if we wanted to star for example just this P tag how would we do that well we can use what's known as a class attribute in HTML and that provides us with a hook for CSS to hook into that and use it as a selector so that we can style just that element with that class so to do that I could say class is equal to error like so and if I save this then go over to the Styles if I want to target a class then what I would do is instead of just saying P which targets all the paragraph styles and say dots and then the class name which is error so if we're targeting a class in a selector then it starts with a dots we always start with a dot when we're looking for a class or a period however let's call our thing and then the class name which is error in this case right here so what this is going to do is say ok I'm going to select anything with this class and call it that red now since this is the only thing with that class it's just gonna style this one paragraph a red so save that and save your CSS and over here and we can see now just this one paragraph is now all read awesome so that's why we gives classes to kind of provide these hooks that we can reach into from our selectors and just grab certain things to style now if we wanted to we could add this same class over here to different things for example if I copy that and then below this div I just create another div and I'm going to give this a class attribute as well I'll paste this in and that is also gonna have a class of error let me just write something terribly original in here I am an error and save it now what do you think will happen well over here we're looking for the error class now we have two of those on the page we have this one and this one so this selector is gonna hook into both of those or select both of those elements and style both of them so if I save this and preview over here we now see I am an error is also read as the paragraph is also read so that's how we use classes we can add the same class to many different elements on a page and this would be good because you might have a class something like CTA button which stands for call to action button and with that class you could add certain styles like the background color of the button and the font size the text color all that kind of stuff and then you can apply that plus to every button which was a call to action on your page and they're all going to be style the same then so that is a fantastic time safer it's really good to be able to do something like that so we've seen classes now but what if we now want to only get the peas with a class of error so say we're not concerned about this down here we want to star the error but we only want to style any P tags which have that class mmm well what we do in this case is first of all we save the element selector which is P then dot error and there's no space in between those and we're saying okay well look for any P tags which have a class of error like this so now if I save this only one P tag has the class of error and this is not a P tag so it doesn't style up so let me preview and now we can see this thing over here just that this is no longer red alright there's so let's do another little example I'm going to give this one now a class of success so a different class now and what I'm gonna do is come over here and say P dot success so any P tags for the class of success I'm gonna color those green but what I'm actually gonna do is just hover over this and get a better shade of green so I'll get the hex code and then come up here that looks like a better green I'm gonna save this and we should see this one paragraph is now green awesome now what if also we want to give this a class of success well that should be green as well right cool and now what if I also give this a class of feedback so this now has two classes the first class then a space then the second class we don't do another set of quotes the are going the same set of quotes we're just giving this now multiple classes so what if I now want to style all of the P tags which have both of these classes well I can do that as well we just chain them together much like we have done here I could say P dot success dots feedback so now we're saying look for any P tag with a class of success with a class of feedback as well it has to have both of these classes so we're joining all of these things together that's absolutely fine and this time what we'll do is give this a border and the border is going to be one pixel dashed and it's also going to be this green color right here so let me paste that dude and save it crush your fingers and over here we can see that that has not worked because we've not saved the index so let's save that and now we can see this border or right here okay so hopefully that gives you kind of alright understanding of classes and how we can use these classes to reach in and select elements from our HTML to style those now we've also seen in a past tutorial IDs we looked at those when we looked at forms now IDs I said at the time can also be used in CSS and they can be used in CSS as hooks just like class this can be but they're more commonly used in JavaScript and that's what I tend to use them for but you can still use IDs as CSS hooks as well so what I'm going to do is use that here just to show you and then going forward I'm rarely going to be using IDs for CSS so I'm going to say ID is equal to content we'll call this I'm going to save that and then if I wanted to target an ID from a stylesheet all I need to do is say hash which stands for the ID then the ID name which I said was content that's what we called it right here and then we just open up our curly braces and do our different declarations so I'm going to say background color is going to be EB EB EB I know that hex code it's just a light gray and then I'm gonna say padding is going to be 20 pixels all the way around so if I save this now then we're going to see is targeted that div with the ID of content and it's applied those Styles now same again if I wanted to make this more specific and say okay well just get the div with an ID of content then I can just put the div in front of it much like we put the P in front of the class okay so the one constraint that IDs have is that you can only use one ID of this name on each page and not just this name what I mean to say is all IDs must be unique so I couldn't use content anywhere again as an ID on any other element and if I call this something else like something else that I couldn't use this ID something else anywhere on any other element they all have to be unique so like I said before I don't really use IDs for CSS hooks I tend to stick with classes like this because they do the job for me and I only really use IDs for JavaScript but if you want to use IDs there's nothing stopping you you can certainly do that it's just a style that I adopt so then another way to be more specific with what elements we want a style is by using what's known as descendant selectors and this means that we can basically target children inside a parent so these are children right here inside a parent they're nested inside of them so if I wanted to target P tags but only P tags nested inside a div like this then I could do that with a descendant selector now I know that these P tags are the only ones on the page so there's no putting doing this but for example if I did another P tag down here and by the way to get some dummy content quite quickly you can just type out lorem and tab and that creates that lorem ipsum for some dummy content but anyway if I create these P tag now if I want to target P tags but only ones inside a div I can use a descendant selector to grab those and not this one down here so the way this works is first of all we say the parents and in fact I'm going to comment all of this control /out so it doesn't have an effect so we say the parent first of all in our selector which is the div that is the parent right here yeah then the child we have a space first of all then the child and then open up our curly braces then we do our declarations so I might say in here something like color is going to be purple okay save that and notice now all of these are purple but this one is not because it's not inside a div so that is a descendant selector we say div the parent goes on the left and the child on the right and we could do this several layers deep if there is something else in the P tag like an a we could target that as well and then this would only target anchor tags inside a P tag inside a div tag okay now we could get more specific we could say we only want to target errors inside a div tag remember we have this thing right here and we have this thing down here as well now we're saying we only want to target the error class if it's inside a div so if I save this and refresh notice this is the only purple one right here you can't really tell the difference that well so I'm gonna turn this to red instead save it and preview okay now notice the space right here between the div and the class of error if we were to remove that space we're now saying okay well get the div with a class of error attached to it and that in fact gets this thing down here a deer for the class of error but by adding a space we're saying this is a descendant selector look for the parent div then gets any class of error inside that div any element with that class of error and style that okay I hope that makes sense so the next way I'm going to show you how to select elements is by using what's known as attribute selectors now we've already seen what attributes are in HTML things like these are an attribute the class that's an attribute this is an attribute H ref and any other kind of attribute that goes in here we can use those as selectors so say for example I wanted to select an anchor tag or every anchor tag on the page which had this attribute H ref right doesn't matter what the value of the href was it just had to have this href attribute then I could do that so I could say okay let me comment this out first of all I could say find every anchor tag then I use square brackets this is to use an attribute selector then we put the attribute name inside these square brackets which is just H ref so that is going to look for every anchor tag with an H ref attribute now most will do so probably going to target 99% if not more of the anchor tags on your page but I just wanted to demonstrate this so I'm gonna now say background color is going to be this hex code that I found before it's a green equal so if I save this then we should see that every anchor tag now that has an H ref attribute is colored this color in the background okay so what if I wanted this particular attribute to equal something for example I wanted to style every single anchor tag on the page where the href is equal to this value right here the net ninja code at UK well I could do that I'm going to copy this dude or right here then go to the Styles and then all we do is say equals then quotes and then paste it in right there so now we're saying select every anchor tag with an H ref equal to this right here so now we're going to give those a background color of this green not any other tag just those with an H ref equal to this so let me save it and the preview and now we can see only the first anchor tag is styled of that way now if I was to just copy this and paste it down here as well then it should star both of those because they both have this attribute save it and we can see that right here awesome now I'm just going to give these some extra Styles just to make it look a bit better so I'll say color is going to be white that's the text color and then we'll say text decoration is going to be none that takes away the underline and then I'm going to say the font weight is going to be bold and then finally I'm going to say text transform we've not seen this one yet but what we can do is set it to uppercase like so so if we save that and preview now we can see anything with that href attribute with that value is gonna be styled like this awesome okay then so what if I wanted to shorten this because this is quite long well I could use the asterisk in front of this equal sign so I could say instead if I wanted to put an Asterix there and then equals and then we'll just say the net ninja like this and then what this says is okay any a with an H ref that includes the net Ninja so this is somewhere in the value of the href that's what this Asterix means that this is included in the value then style this way so hopefully this should still work let me save that and preview and that works now I could do something similar I could say a and then href is gonna be Asterix equal which means it includes something and I'm gonna say Google and if it includes Google I'm gonna color this white give it a background of red and also a border to pixels solid and blue okay so anything that includes Google in the href now which is an anchor tag I want you to style this way so save it and now we can see this thing right here okay now I could also instead of using an Asterix use a dollar and what that dolla means okay neh ref which ends with this now nothing ends with this so if I save it nothing's going to get styled this way but this thing right here Anton dot-com so I could say ends in com I want you to star like this so basically any anchor tag which ends in comm or the href ends in comm so if I save that and preview then we can see it styles it again so these attribute selectors are a good way to tag elements with specific attributes that also have specific values remember we can use equals to get an exact match we can use Asterix equals to say it includes this somewhere in the value or we can use this dollar sign equals to say that this comes at the end of the value so these are really useful for situations where you want to start on different things with different attributes differently an example of this could be any anchor tag that ends in dot PDF because that would be a PDF download and if you have a PDF download you might want to show a little PDF icon next to it so you could style it that way you could say find any anchor tag where the href ends in dots PDF and you could give that a background image to the right of a little icon of a PDF and that would be a nice user experience to see that this is a PDF that they're downloading so these kind of things can be really useful for all kinds of those situations so they're my friends you've heard me by now talk all about different types of selectors rules and all that jazz and I'm sure you're getting quite bored so I'm gonna take a little side step for now and talk about selector specificity and also the Cascade which is the C in CSS now I don't want to delve too deeply into this because this is a beginners crash course and we could end up going down a rabbit hole from getting deeper and deeper which I don't want to do but we will talk about the basics so that you understand this at surface level at least so first of all this cascade cascade as a word in itself means to pour down words like a waterfall cascades from top to bottom right now the CSS cascade kind of takes this definition on when it comes to rules cascading from top to bottom it's all about CSS properties flowing down from parents to children and it encompasses really two different concepts inheritance and specificity so the first thing we need to understand to make this clear is that HTML elements can inherit CSS rules that are applied to their parent elements so if we had a code which looks something like this for example we have a div as the parent and then a paragraph nested inside it if we had a CSS rule that looked like this where it targeted the deal with the parent and colored it red then this P tag would also inherit this property right there so we'd see red inside this text the text itself would be red rather and this applies several layers deep so if we had another tag inside their span for example then also that would inherit the great grandparent or whatever is you know the parent parent style of this right here and that would be colored red as well so that is inheritance were basically inheriting what we styled the parents us and is being passed down to the children so child elements in Harry CSS properties from parent elements and that's called inheritance but not all properties are inherited things like margin padding and background styles and borders they are not inherited it's mainly fonts and textiles or colors that are inherited so let's have a quick look now as some examples okay so now I want to take a look at this whole inheritance in action so what I've done is commented out all of the rest of the CSS so we've got pretty much a blank slate the HTML is still the same over here but it looks like this in a browser because we have no Styles applied to it at the minute so there my friends let us now try out this inheritance business so I'm gonna say div to target the divs on the page now look we have this div right here and this div right here so this one is a parent of all these paragraphs now if I was to say color and then I'm going to say light coral it's always nice to have unusual color save that now because this is the parents and we have inheritance going on all of the children right here they are going to inherit this property and you can already see over here on the right we have all of these peas our paragraph tags they are all colored this coral color so it's inheriting that property now now I did say that not all properties are inherited it's mainly things to do with text you know what font weight or you know font family font size but if I now come in here and say border and set this to 1 pixel and solid and I'll say you know gray I'm gonna save that now notice that is not inherited yeah the div has this border because we're starting that explicitly right here the div what the P tags inside it they are not getting a border each no it's just the one single parent if that has the border now then if we also do another property which is margin and set that to be something pretty big so we can notice it 40 pixels then again the div gets the margin around it but these paragraph tags they do not they do not inherit the margin however if we now do something like font - weight and then set this to be bold let me try this out save it now this is inherited so again another style to do with the text really that is being inherited by these children so then imagine we want to as a child of a parent inherit something that isn't automatically inherited - well how would we do that pretty simply actually we could come down here and say okay we have this P tag and now I want to inherit the values for the border and the margin I might not necessarily know what they are don't want to write them out explicitly again and I can just say border inherit like so and margin inherit okay so what this is gonna do my friends is look at the parents of whatever P tag we're currently styling now in these cases this is the parent and if we have a style for the border and the margin added to the parents then it's going to inherit the values from those because we said inherit them right here so that's going to apply in the case of these ptex right here because this is styled with a margin and border but this pizza the parent of this is the body tag I suppose so that is not going to inherit any of those styles because the body is not styled with the margin or the border so only these things are going to inherit it so if we save that now and preview we can see now we have a border around each paragraph tag and also that margin so that's nice we can inherit things if we want to even though they're not directly inherited for us okay so we have this idea of inheritance and you know the pita can inherit whatever is specified right here and in the case of the color and the font weight it's doing that automatically now what if I wanted to override the color so maybe I don't want these P tags to be like coral I want it to be something else well I can simply just say color and set that to crimson and save it and now we're gonna see crimson text and that's because this is a more specific selector we're styling the parent and if we had any kind of text directly in the parent not in a P tag then that would still be like coral as we can see right there but because now we have a more specific selector for these paragraph Styles it's overriding the color value this one is essentially more specific than this one you know we're just telling the parent here well actually styling the element itself right here so this brings into the equation the idea of specificity as well and we can override inheritance so then now what if I later on down the CSS file somewhere else I add another style for the paragraph tag so I use the same selector probably shouldn't do this but this time I say color is orange well what's gonna take precedence then well it works from top to bottom so whatever is declared last or further down in the style sheet that takes precedence so even though these two are the same selectors when there's a conflict like this the one that is further down takes precedence so now it should be our in and we can see that right here okay but if we're talking about specificity I could make a more specific selector for example I could say div and then space them P this is a descendant selector remember and this is more specific than this I know that might seem weird because we're targeting exactly the same thing but because we're saying okay well get all the peas inside a div this now is a more specific selector it carries more weight than this and even though this comes further down in the stylesheet this is now still going to take precedence because the specificity is higher if you like it's more waiting so if I save it now we should see crimson instead okay so now we can see crimson so I know this idea of inheritance and specificity is probably going to be quite a lot to get your head around and you might find yourself playing around with this a little bit and by the way I would implore you to do so because the only way to learn something properly is to test and test and test things yourself but also what I'm going to do is I'm going to leave you a link to a really good article or guide rather on the Motsinger website all about selector specificity so I would advise you to read that if you want to understand more about this because there are many times as a developer you might be creating CSS rules and you've got some inheritance going on and because your style sheets are so big and so many lines long then it can get a bit messy I need not sure what elements are inheriting from what and what selectors are more specific than another and it can get a little bit confusing so definitely check out the article the link is going to be down below but hopefully now you have kind of this rough idea of specificity and inheritance and together they kind of make up this cascade in CSS and that's what it's all about

Channel: The Net Ninja

Views: 83,822

Keywords: html, css, html tutorial, css tutorial, html and css, html crash course, css crash course, crash course, tutorial, html for beginners, css for beginners, web development for beginners, web dev for beginners, web dev tutorial, html & css crash course, css classes, classes, css selectors, css properties, stylesheets, cascading style sheets, cascade, styles, selectors

Id: FHZn6706e3Q

Length: 26min 26sec (1586 seconds)

Published: Wed Jul 17 2019