CSS Introduction Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

13:06:55 Hi! Everybody! Welcome back. We continue to learn about web browser-based visualizations by introducing Css.
13:07:03 So Css. Stands for cascading style. Sheets.
13:07:08 This is a language or software that allows us to style our web page elements, basically just meaning changing the way that they look.
13:07:14 So the current version that's being used is Css. 3 css.
13:07:18 Allows us to change things like the layout of our web page.
13:07:22 The size of different elements, like the width and the height, the color of different elements.
13:07:26 So, for instance, like the text color or the background color the font of different elements, and virtually any styling that you might wish to change is being done with cascading style sheets.
13:07:38 So there are 2 ways to set style. A Css that we're going to talk about in this video.
13:07:43 The first is within, the elements being styled, or setting.
13:07:46 The style elements within the head element. So within the element you set the desired attribute in the opening tag, so just like with add attributes, we're just gonna set it in the opening tag.
13:07:59 So for instance, we could set the font size of a P.
13:08:04 Element to be 40 by doing style equals. In quotes, font, size.
13:08:08 Colon, 40, semicolons. So this is the standard way to set styles as you'll within an elements, you set style, and then the name of the thing that you'd like to change so for font size, it's font size colon the value that you want so for this is 40 then a
13:08:29 semicolon, and if we wanted to change additional styles, we could then put a space, and then whatever we wanted to change, that you can then also, instead, set the style of every instance of, for instance, a certain element.
13:08:42 So we could make it so that the font size of every P.
13:08:45 Element by default is 14. So to do this within the head you'll put a style element, and then within that style element you'll put.
13:08:54 If you want to do certain elements, you would put the name of the element.
13:08:58 So P. Followed by brackets, and then within the brackets.
13:09:03 You'll list off the attribute that you want changed, Colon.
13:09:07 How you want it changed semicolon! And then, if I wanted to do another one, I would put on a different line.
13:09:14 Whatever the next attribute is similarly, you can do the same thing with every instance of a class you could do dot link.
13:09:21 And then again, whatever the attribute name is followed by whatever you want, the value to be, or you could do id with hashtag id name.
13:09:30 And again the syntax there is the same, so I didn't put it in this Powerpoint, but you can combine these.
13:09:37 So if you had a P, that's class was Link, you could do P.
13:09:41 Dot link if you wanted the like. Maybe you do this because you have both a P.
13:09:47 And some other like an image that both have the link class, and you want the P to appear differently than the image.
13:09:54 So sometimes you'll do that. So with that being said, let's look at our first Css.
13:10:01 Example as code. So here we can see some examples of setting styles within the head.
13:10:12 So you have your element, followed by brackets, followed by how I, what I want to be set, followed by the value.
13:10:22 And then here we can see an example where I set the style within the opening bracket.
13:10:30 By increasing the font size of the original P. Alright. So let's look at this.
13:10:39 And then let's see why that's not working.
13:10:41 I think I need a Px.
13:10:45 There we go, and then this probably needs to be changed as well to Px.
13:10:53 Px. So Px. Stands for pixels. So the size of this font is 40 pixels, the size of these fonts are 20 pixels.
13:11:04 So that's just the font size. You can also see that we've changed some of the colors.
13:11:09 So the background colors are both set to be for the python.
13:11:15 Let's see hashtag is id the python id.
13:11:18 It's background. Color is dark blue, and the rid, it's background.
13:11:22 Color is dark gray, and then the link color, which is a clause.
13:11:27 The link class has set to have the color yellow, which is why these are yellow.
13:11:30 Okay, so this is an example of using Cs to change some style of your HTML elements.
13:11:41 We're gonna see even more examples of this as we continue throughout the rest of these videos in particular, in the next couple videos, we'll only be talking about Css, so in the next video, we're going to talk about some very common style updates that you'll do and then in the we'll continue on
13:11:57 from there, so I hope you enjoyed this video. I enjoyed having you here, and I can't wait to see you next time.