Changing CSS

Quick reference

• 00:04 In this video I want to talk about changing CSS.
• 00:07 So if you are familiar with CSS,
• 00:09 you know that you can add a style tag to just about any HTML element.
• 00:13 And so if we come down here and look at this p tag that we've been playing with
• 00:17 throughout the course, we can give this a style equals and then add in any CSS we want.
• 00:22 So if we wanna change the color let's go color, I don't know blue, how about?
• 00:27 If we save here come back here and hit reload, boom, our text becomes blue.
• 00:31 So this is one of the ways that you can use CSS, this is called inline CSS and
• 00:35 it's very common.
• 00:36 So a couple of videos ago I mentioned the dot style dot property and
• 00:40 that let's us change elements, specifically, CSS elements.
• 00:44 And so, now I wanna go through and
• 00:45 give you some examples of that throughout the rest of this video.
• 00:48 So how do we do this?
• 00:49 Let's come down to our script and let's go document.getElementById,
• 00:53 like we've done so many times before.
• 00:57 And let's let's call First 'causwe we wanna deal with our first p tag here.
• 01:00 And now we just give it a .style S-T-Y-L-E .property.
• 01:06 And the property is the thing you can see there's
• 01:09 a huge list of different properties. These all CSS selectors and CSS properties.
• 01:13 So what ever you want to change,
• 01:15 what ever selector, whatever property you wanna do you put it in here.
• 01:18 So we can go color and you just set it equal to whatever color you want.
• 01:24 So lets go red, put our semicolon at the end, save this come back here,
• 01:27 and hit reload.
• 01:28 Boom, we get red text.
• 01:30 So very simple, it helps to know CSS like I said, that's very useful but
• 01:34 you don't necessarily have to.
• 01:35 So there are way too many CSS selectors and properties and
• 01:38 things like that to talk about in this video.
• 01:41 Like I said you can use most CSS selectors, but
• 01:43 there's something that's a little bit tricky.
• 01:45 So CSS selectors are very rarely one word like color, right?
• 01:50 They're usually like, say you wanted to change the font size.
• 01:54 If you were gonna write CSS you would do font-size and
• 01:59 then give it say 32 pixels.
• 02:02 And this is CSS, right?
• 02:04 This is the CSS format, you have this stuff on the left
• 02:06 hand side of the colon and then on the right hand side.
• 02:09 Well, JavaScript,
• 02:10 if you remember from way back, at the beginning of this course, we can't use
• 02:13 dashes in JavaScript 'cause JavaScript thinks we're trying to subtract.
• 02:16 So for instance here, if we wanted to do font size,
• 02:19 the convention is usually to just go font, and then use our camel case.
• 02:23 So lowercase font, uppercase size, and then, just inside of here, 32 pixels.
• 02:29 All right, so we can delete that, go ahead and save this, come back and
• 02:31 hit reload, boom we get some big blue text.
• 02:33 And it's blue because, of course, we've got it listed here as blue,
• 02:36 and over here we removed our little red thing here, so it goes back to blue.
• 02:40 That's the trickiest part of all this.
• 02:42 So as you can see, this is very powerful, because websites use CSS like crazy.
• 02:47 And to be able to change it on the fly with JavaScript, this easily,
• 02:50 really, really cool.
• 02:51 So the last thing I wanna say about this is sometimes CSS properties and
• 02:56 values have more than one item.
• 02:58 So for instance, if we wanted to do a textShadow,
• 03:02 with CSS you have to sort of list out the different values for the shadow.
• 03:07 The left shadow, the right shadow, the lower shadow, and the color, right?
• 03:10 So you do that like 1 pixel 1 pixel, 1 pixel, and then I don't know,
• 03:15 call it black, right?
• 03:17 You do the same thing here, it just all goes in the quotation marks.
• 03:20 So it's not always just one word or one bit of letters or whatever.
• 03:23 So if we save this, come back, hit reload, we get this cool little text shadow.
• 03:27 And we can play around with these, we can go 4, 3, I don't know, 10.
• 03:33 Then we get this blurry.
• 03:36 So whatever you wanna do you can do,
• 03:37 it's pretty simple with this little bit of JavaScript.
• 03:40 One last thing I want to talk about is, like I said,
• 03:42 you have to know the CSS in order to do this.
• 03:45 And if you don't know CSS, not a big deal as far as taking this course.
• 03:48 If you wanna be a front end web developer though,
• 03:50 you really just gotta to learn HTML, CSS, and JavaScript.
• 03:53 The tree go together all the time, I mean this is just one little example of how CSS
• 03:58 and JavaScript and even HTML 'cause we're adding this to an HTML tag.
• 04:02 How they all go together and sort of work together.
• 04:04 So if your goal is to become a front end web developer,
• 04:06 I would definitely recommend learning HTML and CSS.
• 04:08 Maybe you already know it,
• 04:09 if so that's great, but just wanted to give you a quick aside sort of say that.
• 04:13 So that's pretty much how to change CSS, very simple, very powerful.
• 04:17 In the next video we'll look at events.
• 04:19 And events are all kinds of fun.
• 04:20 And that's all for this video

Lesson notes are only available for subscribers.