Transcript from the "Styling Q&A" Lesson
[00:00:00]
>> Brian Holt: Questions about CSS?
>> Speaker 2: What's the difference between background and background-color?
>> Brian Holt: That's a good question. So background, if I do like this, it's a shorthand, you can put a bunch of stuff in the background.
>> Brian Holt: In general, let's see if it'll actually tell me, shorthand property for, you can put background layers,
[00:00:25]
>> Brian Holt: Anyway, there's some documentation there that I can read.
>> Speaker 2: So you can use that to change the color or do some other stuff?
>> Brian Holt: Right.
>> Speaker 2: But background-color is just for the color?
>> Brian Holt: Precisely, yeah. So the reason why I choose not to do background, generally. One, I don't remember all of the properties for it, and it's really easy, too.
[00:00:44]
So, if I did background like this and then I try to do background,
>> Brian Holt: Image, something like this.
>> Brian Holt: Or maybe like this. Yeah, like this. Then I put some sort of dot index, like that. So this is something totally valid that you may wanna do which is if you can load the image, then load the image.
[00:01:13]
And if not, then show the color. However, if you do it like this, because background also encompasses background-image, you would override it. And it's not obvious.
>> Speaker 2: Because it comes later in the CSS.
>> Brian Holt: Right. However, if you do background-color like this, then what we were talking about would work.
[00:01:32]
Or if I had it the other way, which was this one comes last would work as well. So that's why generally like not to do it, but that's just a personal preference. Does that answer your question?
>> Speaker 2: Yeah.
>> Brian Holt: Cool, yeah.
>> Speaker 3: There is a question in chat that's asking if the cursor: not-allowed, if it works on other things besides a button, like a field.
[00:01:55]
>> Brian Holt: Mm-hm, works on anything. It's a good question. So for example, if I wanted to, I don't know, you could do body, cursor: not-allowed. If you wanted to be a little saucy to your users, you can't click any of this, then you could on the other one, right?
[00:02:17]
And now nothing looks clickable on my particular page.
>> Brian Holt: Yeah, works on anything. Something to keep in mind though is we're in the sort of world now that a lot of people will be viewing your website from mobile, right? And there's no hover events on a phone, right?
[00:02:39]
You can't hover on your phone, you can either tap or not tap. So, when you do things like cursors and things like that, it should be the sprinkling on top, it shouldn't necessarily be the focus of your UI. So that's why it's good that we have, if we come back here, both that it's grayed out and there's not-allowed, right?
[00:02:56]
You need it to also work on mobile.