Okay, so today we'll talk about CSS Cascading Style Sheets. We'll leverage jsfiddle.net to practice the examples. So in a previous session, we talked about HTML, hypertext, markup language, that's used to create documents on the web, but they deal with the structure of a document or a website or a page. Now, the visuals, the styles, that has to do with CSS. If you want to make something pretty, that's what CSS is for. Today we have many social media websites that are highly interactive, and that's because they also use the JavaScript programming language to manipulate the document, but that's a topic for another lesson. Today we focus only on style with cascading style sheets. Here in this environment for jsfiddle.net, you can click settings in the top right, and you can change the layout to something different if you don't like the classic one. I will keep the classic one, and I changed some settings for me. I don't want to auto close tags nor brackets. You can click the top left to run, and in the bottom right you will see the result from your code. Here we have the HTML part where we write some HTML. We have the CSS panel where we write CSS, and then we have the JavaScript one that we won't touch today. So let's focus on HTML and CSS. So let's get started. I will create three paragraph elements with some random text. Now I'm going to click run in the top left. Make sure every time you make a change to your code, that you click run in the top left, otherwise you won't see the result here in the bottom right. Now let me first start off by teaching you how you can change the color of the text. So when you want to change the style of a document, HTML document, you first need to say what you're trying to change, which elements. So you need to specify a selector. Now let's suppose for the sake of simplicity, we want to change the color of all paragraph elements. That is, we have three right now, so all of them will change. So I can just say the name of the element, that is P. That's the selector here. Now I can specify some style rules with the curly brace, like this. And everything between the open and closing curly brace will be applied to all paragraph elements. Now some people like adding space after the element name or selector name, just for style, like to better visualize it, but you don't need to. I like to have it. Also, you will see a lot of what's called indentation. Every time you open a curly brace, we typically add a couple of spaces to the left here when we start the new line. That's called indentation. It's very common in programming languages. And you must have at least two spaces. I like doing two spaces. Other people like more or even using the tab character. So to specify rules for this selector here, we're going to say first the name of the property. In this case, to change the color of the text is just say color. Now to specify a value for this, we must use the syntax colon and then give it a value. For example, red. And then you have to finish it off of semicolon. If you click run at the top left, if you can see colors, you will see that every paragraph element now has the text color red. Now you'll see often that people like adding a space after the colon, just because it's easier to visualize, but you don't need to. Okay, so in CSS, it's always like this. You add a selector to say, okay, what do I want to style? If I just say element name here, that means every single element B in this document will have the following styles or rules applied. In this case, we have the rule for color, property, and then syntax is colon and then the value and finish off a semicolon. If I want to add more, I would just either before or after add a new pair of property and value. For example, if I want to change the background of every single paragraph, the background color, I can say background dash color, that's the name of the property. Now the value must follow after a colon, right? If I want to change to black, semicolon to finish it off, then click run in the top left, I can now see that every single paragraph has a background color of black. Again, some people like adding space after the colon just for style, and that's what I always do. So if you notice CSS properties are all over case in name, and if you have multiple words, you're going to see a dash separating the words. Okay. Now this is nice, but let's say I don't want to change the style for every single paragraph. Can I just change the style for one element, a very specific element? So in that case, we would have to change the selector here to be very specific about being some specific element here. One way you can do that is if you assign the attribute ID to the element in question, let's say the first paragraph here in the HTML panel, I want this one to have the color red and background color black, but I don't want that to apply to all the other P's. Well, I can add an ID attribute to the very first P, and it can be any arbitrary name you want. Let's say colored paragraph separated with a dash. Now I must use this name, the very same name here, instead of the P selector, but I must proceed that with a hash. The hash says, I want to target an element whose ID attribute is what follows the hash. In this case, color dash paragraph. So when I do that and click run in the top left, only the very first paragraph will have the following styles specified in lines two and three of the CSS panel. Okay, so if you want to target a specific thing, I just add an ID attribute and change the selector with a hash and then the value of that ID. Make sure to match this with what you have in the HTML code. Any questions so far? Okay. So now, how about I want to change the style for the second and the third paragraphs. Maybe I'll make them color green. And how would I go about doing that? Well, if I try doing P here, color green. Well, that works that if I didn't have the color in line two, but I press the control slash to comment this out. Basically, I'm removing this. That's what's doing. You're going to see that this selector is applying to all P. So therefore, the first one will also have green, even though I had specified that there. But if I didn't have this here, that'll be a problem. So I want to be able to only target select number of elements, not just one, but for example, two or three and so on. So one way of doing that is by using a class attribute. So what I'm going to do is, okay, the elements that I want the color to be green, I will go here and say add a class attribute. And let's say, I don't know, let's call it other dash color. It could be any name you want. So I also want the third one to be the same style, so I'll use the same class name, other color. Now we can go here in line six in the CSS panel, we're going to start with a dot, meaning we want to target element whose class name is other dash color. So if you see a dot preceding some name here in the selector, that means an element whose class that has the class other color applied. So if I do that, let me comment out that color red so you can see it's still have the color or remove all together so you can see. So now if only the elements have the class other color, have the color green. So that way you can choose and pick specific number of multiple elements that you want to style. Whereas the ID only allows you to pick one because ID is unique to every element. You cannot have two elements with the same ID. We use classes to pretty much style whatever we want as many as we want. Let me bring back the other styles. Oops. So today, pretty much class is the way to go. If you're doing CSS, you're going to see it everywhere. If you're using CSS code that somebody else wrote, you're going to use their class names. So it's very convenient. Somebody can already write all the CSS rules and you can just adopt it by applying the class names to your elements. Okay, enough of that. Now let's talk about other properties. Let's talk about fonts. So let's say the paragraphs of other color class. I want to increase the font size. In order to do that, it's very simple. You can either add before or after the existing rules that we have here. You're going to say font dash size. That's the name of the property colon. And then you can specify a value here, like a number, for example, 20. But the unit has to be px pixels and then semicolon to finish it off. By quick run, you can see the size of the font has increased for the last two elements. Now, if you don't like this font size, let me teach you how to debug in DevTools so you can see on the fly as you change the styles. So one very convenient thing that we have in the browser is called the developer tools. In short DevTools, if you want to open that in your keyboard, press the key F12 and it'll bring it to bring it up. If you cannot press F12, another way is click anywhere in the screen of the browser, content, right click, and you're going to see inspect, click that, and it also opens that up. I'm using Firefox browser right now. If you're using Chromium, it's the same thing, Chromium based, like Chrome. And the tab that I'm in right now is called inspector and Firefox, but in Chromium based browsers, it's called elements. Okay, so don't be alarmed if it's not the same for you. Now, what's interesting here is I can hover over the DOM here, the document object model, that is every element that I have, and to see their properties, and I can click one of them, and you can see the right hand side panel changes accordingly. And what's changing there is actually the styles. So if I click the second paragraph on the right hand side under styles in Chromium based browsers, for me, it's rules. I can see the class dot other color here with the properties that we added, we had written that in the CSS panel here. So I can use this, leverage that. If you would like to see what it looks like with this specific property removed, you can uncheck the box, and you will see that the text in real time becomes its standard color, the default that's black. And if I want to bring it back, just click the checkbox to see what it looks like with color green. You can do the same for font size. So you can see what it looks before and after. So it's very convenient to debug your styles. If you want to debug, for example, I don't like the font size. What's the perfect font size for this? Well, what you can do is click here on the font size value. And you can actually type whatever you want and see a change in real time. But one thing I like to do is use the keyboard arrow key up and down. As I press down, it decreases. And I can see what it looks like as it continually decrease it. And then I can do the same going up, press the up arrow in your keyboard, and you can see it going up. So do this up and down and find the perfect value for your font size. Let's say I like 16. No, 18. Okay, once you find out what you like, make sure that you copy that back into your original source code. For example, here I had 20, I'm going to copy that back to 18. You can either highlight this here and Ctrl C or Command C on Mac and paste it here or you can just do it manually like I did. Make sure to always copy it back because the DevTools is always temporary. If you refresh the page, you will lose everything that you did in the DevTools. So be very careful with that. Okay, another nice thing about the DevTools is about colors. See this color green? I can actually click this color circle and I can see what color might be better for that. I can change the color. Maybe I want to change some kind of red like that. And what's even nicer is it tells you the contrast ratio here. For example, this color red of text against the white background. See the white color behind the square? It's not very good contrast ratio. So you want to find something that's better contrast. You can see as the number increases, it gets better and better for people to see it. And I think the best one would be black here if you want a really, really good contrast ratio of 21. And that's even marked as triple A check, meaning there's a certain level of accessibility that's testing this against. So this one is meeting the triple A, which is like the highest. Okay, so you can pick whatever there can play around. In any case, if you click run again, you're going to see the DevTools loses all information. We're going to see we lost that color. That's why I tell you always copy back the values into your original code. The DevTools is always temporary. Okay, so let's learn a couple more properties. And while we're wearing the DevTools, let's say you're just playing around. I don't know specifically what property I want to change. You can always go here. And for example, under element, you can click here, between the code of races, and it will let you type a property and value. For example, I want to play around about with the font properties, I can start typing font dash. And it will let me know what kind of properties I can use regarding to font. Maybe I want to change the font. Let me see. Wait. And then I press the tab key to go to the value. And I can see it suggests me what kind of values I can use for this. So I can go press the arrow key down, and play around and see, okay, this is bold. Bolder, I don't see a difference visually. Inherit, okay, no longer bold, initial, lighter, normal, and so on. Okay, let's try bold, press enter. And then that's what it looks like when the font weight is bold. So font weight is the property we can choose to make the text bold. So let's say you like that. Okay, this is nice. You can see the before and after here, if you click the checkbox. Now I'm going to copy this by highlighting. And I'll go under control C, my keyboard, or command C if you're a Mac. And I'm going to go to other color here. And I'm going to paste that there. Now I click run. So all of them will be applied, right? Now if I during the dev tools here, you can always go to the left hand side. At the edge, there's an icon of a pointer, click that. It will highlight so you can go and highlight anything you want on the page. Let's say the second paragraph, I'm going to click and it marks that for me here in the elements tab or inspector in Firefox. So I can go to the right hand side and see all of its styles. You can see now we have font weight boat under the class other color. Okay, so that's the dev tools. I'm going to click X to close. So following the same logic, you can find out about other CSS properties just by leveraging the dev tools. Another way of finding out what kind of other properties there are is my making a search, go to your favorite search engine, it just type, how do I make certain thing like how do I change the text color in CSS. And it will tell you what kind of properties you can use. So that's another way you can find out what names. Okay, so let's learn a lot of font property. So you might have noticed that all properties related to font are prefixed with font dash. So let's try another one. What is let's say I want to change the font family. Font family is pretty much what kind of font I'm using. For example, aerial times new Roman, and so on. So I'm going to change the font family here. I want to do that comic sans MS. If you have heard that font like Childish font, it's called comic sans MS. But there's a catch here. If you have a font name with spaces, like a space between the words, make sure to add some quotes, for example, double quotes before and after, because usually in programming, if you have a white space, that's kind of the limit to say that one thing is separate from the other. So if you didn't have the quotes, so it probably think we'll have comic, and then I have sense to separate things. But we actually, it's one single thing. So make sure there's some quotes there. So if you're unsure if you should add or not add quotes, always add the quotes for the font name here. In any case, finish it off with semicolon, don't forget. Now click run, you can see the font family changed. You can try others like aerial or whatever favorite font you like, aerial times new Roman. And so on. That's even other kinds of properties that make it really, it look really cool. For example, text shadow. You can try that property. And let's see what it does. Let me open the DevTools here. And I'll show you what it means. So basically, so far, we played around with CSS rules that only have one value. But this one is kind of special that you can accept variable number of values separated by space. So a text shadow, if you give four values separated by space, each one being one thing. And to understand that, I'm going to go into DevTools and play around with numbers here. So the first number, let me make the third one zero. So the first number here, if you play around pressing down arrow, and up, you can see the position of the text shadow is moving along the horizontal, right? So if I increase it goes to the right, if I decrease it goes to the left. So this is the X offset of the text shadow. Let's try to make just let's say three. Now let's move on to the next one. I'm going to press the right arrow key. And the second number, if you play around going down and going up, you can see going down translates the text upward. And going up translates the text downward. So this is the Y offset. Let me just make it maybe I want to move the X to negative three actually, like that. Okay, now let's look at the third value here. The third value is the blur. So if I increase that, you can see the text is no longer distinguishable. I don't understand what that's really text. I cannot read it. So it's the blur. It kind of looks cool if you add a little blur. It's even better for us to read what the actual text over the shadow is. Let's try six. And finally the fourth value is just the color of the text shadow. You can actually click outside and then click the circle to pick a color that you like. Maybe it looks cool like this, maybe looks cool like that. So you be creative and choose whatever you think looks nice for your use case. Okay, now once you're done with this, remember, copy the code back to your original because depth tools you lose after refresh. It's not permanent in the depth tools. Only you can see it and when you refresh, you get back what it was originally was. So how is everyone doing so far? Any questions? Okay, so let's keep going. Let's talk about the box model. It's very important that you know that I am going to the depth tools here, click the pointer and point to the first paragraph and click so that I have it highlighted here under the elements tab in chromium based browsers. And the right hand side gives me the styles. Now I want to go and explain the box model. I'm going to increase the height of this so you can better see what's going on. Now typically if you browse the tabs for the right hand side under styles, you might see a box somewhere and that's what I want to find for you. It might be a different tab name if you're in chrome or any other chromium based browsers. I'm in Firefox, so it's the layout tab, but I want you to find the box in any of these tabs. If you cannot find a box, let me know. Anyway, this box model is very important to understand spacing within and without elements. So let's say I have the first paragraph. I'm interested in adding spacing to the inside that is between the text and the border. That is, I want to expand the black area. To do that, we're going to talk about padding. So that's what padding is, the space between the inside content and the border. And then the thing that separates the outside from the inside is the border, but in this case, there's no border. It's zero. And then finally, the space outside is the margin. Now let's play around with that. Click rules or styles. I want to go to under elements and click here. First, I want to add some padding, the property name is padding. And then press stab. Let's start with zero px and I'm going to increase. Okay, I'm going to press the up arrow in the keyboard. And notice what happens to the element there. You can see the space within is increasing on all sides. So this is what padding is. We add some spacing to the top, to the right, to the bottom, and to the left of the content. That's decreased. Maybe I like just six. Once I'm done, I can copy this. Go back to my styles here for other color and place that there. Okay, so that's padding. Now let's add some border. So I'm going to go into dev tools. I'm going to say border. That's the property tab. Now this property is also special in that there's not only one value, there's multiple. So the first is the border with let's start with one pixel, one px and then space to separate to another one. Now the second one, I want to specify what kind of border. Let's try solid. And then third with the space is the color. Let's try yellow. Maybe that's hard for you to see. Maybe green. I don't know how people know what's a good one. Blue. Let's try that. Now I'm going to click outside. Now we're going to play around. You can see it added a subtle border. Now let's increase the first border with. You can see it's increasing the border. Now you can clearly see it, right? Let's make it six. Now solid here, other values would be like dashed, ridge, and so on. Let me keep it just dashed so you can see you can change that. And then finally the color, like we said, you can just change it to whatever. Now this property, border, it's kind of a combination of different properties actually. In CSS, we can actually change a very specific thing. For example, I don't like this border style. Therefore, I can actually go here and add a property called border style. And I can see what kind of styles we have. Remember, we use dashed. Maybe I can press the down arrow and play around. Okay, that's dashed that we had. This is dotted. Oh, that's double. Now that's a groove hidden. Okay, no border, and so on. Okay, let's leave it at dotted. So you can see when I added border style more specific here, it overwrote the previous one, right? So this dashed from this original one is no longer applied. So you can even see it has more, even more specific ones, border top style just for the top, border right style just for the right, border bottom and border left. So if you really want to be specific to where exactly you want to change the border, you can use these infixes for top, right, bottom and left. If you're unsure, just go here, start typing the name border and you can see all the kinds of properties you can do with the prefix border. And you're going to see there's border left, there's border left color, there's border left style, there's border left width. So this is a very, very specific. So typically people will use the combined properties like border instead of the very specific ones. Because it's more convenient, the specific ones you have to write a lot more. It's very, you know, tedious to write. So we usually use the shorthand properties like border. Okay, now finally, let me just copy this one by one before I lose. And let me close the DevTools just for a moment. You might have noticed, okay, why did you add border style here? If you're ready, specify there. Yeah, so that's actually a good point. I just demonstrated the specific ones, you don't need to really need this here if you already have it here. So you just get this dotted out of there and put it here and delete that one. I just refactored the code to make it better, right? I don't need that extra property because I already using the shorthand here. So might as well just put dotted here. In any case, I open the DevTools again. Now let's talk about margin, margin the space outside the element. So if I click the pointer and point to the first paragraph, and I should click run, so I lose that stuff there. You can see every single thing is now with a border. Actually meant to be the first one. So I made a mistake here. Let me close the DevTools. I actually meant for the border and the padding to be for color paragraph, not for the other one. So be careful with that. You make sure you're writing the properties under the specific selector. I meant for it to be for the first paragraph, which has the ID, right? So it shouldn't be here. Cut that there, it should be there. So that's probably a common mistake to make as a beginner. You don't know exactly where you put the code. So make sure to read the selector before you place the code inside. Is this really what I want to style? Okay, now I fixed it. The first one is what I want to style. The element whose ID is color dash paragraph. Now going back to DevTools, click the pointer, click the first paragraph. Now I want to play around with margin. Okay, so I'm going to go here and say margin. You can see there are many different properties for margin, and they get very specific. But the short end is just margin. And this one applies to the top, to the right, to the bottom, and to the left. And it's the same kind of pattern with the padding, right? Top, padding, top, padding, right, padding, bottom, padding, left. You see, I'm insisting on telling you all these subfixes because they're very standard CSS. And they repeat across different properties. Now I want to show you also that margin, even though we can give one value here, for example, 20 pixels. So that means the space surrounding the element outside is 20 pixels. You can see now it's kind of pushed inward. But actually, this property can also take multiple values if you want. If you just give one value, it will take that to be the top, right, bottom, and left. Now if you give two values, maybe you want to be different. I don't want the same space all around. Maybe I just want for the top and the bottom to be 20. But the right and left, I want that to be maybe just five pixels. That's where the second value comes in. If you put two, the first means top, bottom, and the second value means right, left. So if I increase right, left, it's like squeezing it horizontally. And if I change the first ones, it's increasing top, bottom, okay? So all these CSS shorthand properties, if you give a different number of values, it will change the behavior. In this case, I'm changing top, top, bottom for the first, and then right, left for the second. If I only had one value, it would take interpret that as you want to change all the sides, meaning top, right, bottom, and left. So be careful that. Now if you want to know how to find out how many values I can give, well, you can look at a documentation. So open your favorite search engine. Let's say margin, space CSS, and one good source of documentation is the Mozilla developer network. This second result MDN, you see MDN, click that. This is a very great resource. So you can find out what the properties mean in all the different values. You can see the examples here. If you give one value, if you give two, if you give three and four, scroll down, you can even click and they give you real time feedback. In any case, scrolling down, you're going to see the syntax, and this is what I want you to focus. If you give one value, apply all four sides. If you give two values, the first is top and bottom, and the second is left and right. If you get three, the first is top, the second is left and right, and the third is bottom. So make sure to read these as you're reading the documentation. And finally, if you give four separate values for margin, the first one is top, the second one is right, the third one is bottom, and the fourth one is left. Okay. Like I said before, if you scroll up, read this, margin, this property is a short hand for the following CSS properties. So if you wanted, you could specify the property margin top, margin right, margin bottom, and margin left all separately. But that's kind of tedious to write four separate things. It might as well just write in one single place. That's why people prefer using the short hand when possible. We only use the very specific ones when we really need to change that specific thing. Okay. So MDN, I'm going to paste it in a Zoom chat if you're interested. I'm going to close that. So I'm going to copy, let me put a margin here of maybe top, bottom, eight, then left, right, 16. And I copy that and make sure it's under color paragraph. And I paste it there, click run at the top left. And there it is. Now, if you remember that box model, I'm in a layout tab here for Firefox. I don't know if Chrome is the same tab, but there's a place there next to the styles. You have to scroll down to the box. So I want to highlight if I point the first one. This is useful if you want to understand how much spacing is contained within this element and surrounding it. So I always reference this box bottle here to make your calculations about you know, the width and the height. So you can see it will tell you margin on the top is eight, right 16, bottom is eight, and left to 16. So if you highlight that in the DevTools here in the elements tab or Respector in Firefox, you will see there's some colors and the colors actually mean something if you can see the color. You can see the kind of yellowish color, that's the margin. And then we have the inside, it's kind of the border, I don't know if you can see, and then in purple. And then the padding, yeah, the padding is purple, right, and then we have the content. So you can see border here, six all around, and then the padding of six, two, and then the content width, this is the width, okay, from left to right, in pixels, 329.25. And then the right hand side here is the height of the content, 18.75 pixels. And then if you want to find out the total width, you got to obviously add all these numbers on the left and then the right of the middle. But there's a convenient way to knowing that, just simply hover over it here in no time, okay, 353.25, if you can read that in the content, that's the total width, if you combine everything, all the properties together. And then the height is the second one, 32.75 pixels. So if you ever need to, you know, see numbers specifically, exactly, reference this box, and you can reference the hover over here, and see that label that two tip appear with the width and height. Not to ask any differences between margin and wide space. I don't know what you mean, but margin is a way of adding wide space surrounding an element. Adding as a way of adding wide space within an element, if that's what you mean. Yeah, like I said, margin is just the surrounding, the space surrounding an element. You could call it wide space or whatever. It's not a steady white. If you're asking if the color is white, not necessarily white. It can be any color, right? Like the background color of the body here could be background color yellow, right? They're still margin. There you go. Now you're saying negative space. Yeah, one of them can be negative. If you go to paragraph, the margin here, for example, the second one, I can do negative margin and the thing would go row out of bounds. So margin can be negative. Okay, that's fine. Now padding is not a matter, right? If I go here, try to do padding. There's no meaning. Negative padding, it says it's a problem here, invalid property value. So you can only apply negative margin. No negative padding. Okay, let me bring it back. Quick run. All right. So that's CSS. It's always the same way we have selectors. We have properties and values like this, the same syntax, colon between the property name and the value and a semicolon to finish it off. And if you want more, just follow up with more within the curly braces. And you keep making these blocks with different selectors to select the things in your document that you want to style. And we use leverage the dev tools to conveniently conveniently see in real time what style looks like before after with a different color, different numbers. We look at the box model to see the spacing and all this stuff. We learned that the spacing outside is margin. And then there's borders separates the content from the outside. And then the space within the element is the padding. And we learned about negative margin that makes the element go out of bounds. And I think we're out of time for this introduction, but that's a lot more properties in CSS. And a lot more concepts. So just play around and see where you get. All right.