HomeОбразованиеRelated VideosMore From: ColorCode

CSS Tutorial — Selectors, Element, Class and ID (3/13)

28 ratings | 1079 views
CSS Tutorial — Selectors, Element, Class and ID (3/13) So we just looked at a basic CSS statement and it starts with a selector. So what the hell are selectors, again? Say you are brangelina, and you have a bunch of kids, you wanna dress them for school except only one of them is old enough for school. So first you have to pick the right kid, then dress/style them. That’s what selectors are. Choose which kid you wanna prepare for school. Or since you’re not brangelina, Choose which element you wanna style. It all starts with the selector. There are different kinds of selectors. In our example, we used what’s called an element selector because it targets your styles based on the element type, That’s the most basic selector there is. By using the element type. Like a p tag. Cool? Cool. The problem with element selectors is that you might not want to turn ALL your paragraphs blue. What if you had 3 paragraphs and you only want one of them to be blue? The element type is an identifier but in this case it’s too general. I wanna show you an example. Look at this thing on atom’s website. See these two sections? One of them has a white background, the other one is beige. If you inspect it you’ll see they’re both divs, here they are, so clearly the dudes who made this couldn’t have said oh select all divs and change the background to white or beige. They needed to be more specific. You can select elements based on other kinds of identifiers. Classes and ID. Class is the most common and useful one, in fact that’s exactly what Atom is using. Take a look. They have wrapper class on one, and highlight on the other. If you click on highlight, you’ll see that class has a beige background on it. So let’s do one ourselves. Let’s say you have 4 paragraphs and you want to alternate between dark and light. So dark, light, dark, light. In other words you wanna reuse a style for multiple elements. In this case you can use a CLASS selector. The way you write these in CSS is you write the name of your class, this could be whatever you want, just can’t have spaces and some special characters, say DARK, and you put a DOT in front of it. Why a DOT? Well, I dunno what to tell you. There’s no good explanation why, that at least I know about. It’s just syntax that you have to remember. This tells the browser hey this is a CLASS selector. Then of course you have to add the class to your element in HTML. This means “hey select all the elements that have a class attribute and the value is dark. Let’s try it: DEMO 4 - I’m gonna cover ID selectors too just for the sake of it although we don’t use them much. ID attributes are specific to one element only. If you have a style that you want to apply to only one element, for some reason, you can add an ID to that element (for example: my-blue-paragraph), then use an ID selector in CSS to style it. ID selectors are just like CLASS selectors, except you put a # in front of the name instead of the DOT. That becomes the CSS selector for the element with that ID. So let’s try it. DEMO 3 - The problem with ID is that it’s limited to only 1 element. Remember IDs can’t be shared between elements. So you can’t reuse my-blue-paragraph ID for multiple elements. So those are the 3 basic selectors. Element, Class and ID. “Element” to style the elements of that type. ID to target only one specific element. And Class to reuse for multiple elements. We’ll be using all of them from now on. Selectors can get much much more complicated and they will, but now you know the basics. So next, we’re gonna look at some of our options when it comes to style properties, like color, so far that’s all we’ve used so I’m gonna talk about it in detail. Later, fonts, sizes, background, border, animations, display types, flexbox, where’d everyone go? I was talking.
Html code for embedding videos on your blog
Text Comments (9)
Florina Martinez (3 months ago)
I am a visual learner, so your channel is going to save my life this semester! Awesome video!
ColorCode (3 months ago)
I'm so glad to hear that :) That's awesome. Enjoy.
Joseph Bates (6 months ago)
Dude! Great presentation. Great graphics (not overbearing). Great subtle and humor and metaphors. Great pacing (not speaking to me like I'm a 4 yr old all slow and simple. Thank you for not taking me through a trip to file linking land, a review of such, or 5 minutes of self-promotion}. Now I just need to look at your channel to see if you got anything that uses combonations of selectors and psudos.
Sina Jazayeri (6 months ago)
Thanks Joseph for that awesome comment. I've added pseudo selectors to the list of videos for the next CSS Course. Make sure you subscribe so you'll get a notification when I release it. In the meantime the CSS Basics course should give you plenty to play with. Happy coding :) https://www.colorcode.io/course/css-basics/
michael burton (8 months ago)
Great tutorials, really appreciate you sharing web knowledge. Also, is it possible to let me know which software you are using to for CSS and HTML? Thanks I'm a newbie to it.
michael burton (8 months ago)
Thank you very much!
ColorCode (8 months ago)
Sure Michael. I'm using Visual Studio Code and Google Chrome but you can use any IDE or browser you prefer. I talk about IDEs a bit here: https://www.youtube.com/watch?v=Whps_IeaetM
ARKA. 13 The Official (10 months ago)
Nice video
ColorCode (10 months ago)
Thanks for checking it out :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.