Today I'll talk about CSS cascading style sheets. In a previous lecture, I talked about HTML hypertext transfer markup language that we used to create a document and structure it. Now it's time for us to make it pretty with cascading style sheets or CSS. So let's get started. I will, again, use the code that we built. It's in this repository on GitHub under SRC directory. So I have the code here with me. So there are two different ways you can go about developing this. The first one is you open your text editor. I'm using Visual Studio Code and you go to your file explorer. You want to open the HTML pages, right-click, open with a browser like Google Chrome. And that should open the page that we developed in your browser. So every time you change the code, you would go here and refresh to see the changes. That's one way. Now a better way that we've been using as much as possible is with a live preview of Visual Studio Code. So here I have Visual Studio Code open. So I click file open folder and open that directory for my project. And you can see there's the SRC directory here with the files that we wrote yesterday index and sign up. Now what I do is I install an extension. If you go to this building blocks icon and click that, look for Microsoft live preview and install this live preview extension here. This is the one I recommend. So after installing that, all you have to do is open the file you want to preview and you open the command palette in Visual Studio Code. It's view command palette or the hotkey control shift P. In my case, I am using Windows right now. So I press control shift P and you can see I can type live preview and I can choose the one for show preview with internal browser. And I should see on the right hand side this page being previewed. So I can click the link and it goes to the other form that we built for the sign up and I can go back home. Okay so let's work on the CSS today. So why CSS? Well we want to make things look pretty and we want to change add some spacing between things, change the position, do that kind of stuff whereas the HTML we just lay out the structure like this, we need the CSS. Now there are different ways to go about defining style with CSS. The easiest way we can do right now is with a style tag and typically we can put that if you go to the head. So this is the open tag for the head, this is the closing tag. So before the closing tag, I am going to make a new line and add an open tag for style and then I am going to close the tag for style and then in between I like to add a new line and write the CSS there. So I am going to start off like this and then later I will show you how we can move the CSS code to an external file which is usually what everybody does and that's done with the link tag. Anyway so CSS you got to first tell okay here is the document index.html. We need to know what you want to style and the first thing you got to specify is what is called a selector. Okay in this document if I go through the document what are the things I want to select for changing of the style. So for example if I want to change all the paragraphs for example this Lauren Ibsen here is a paragraph, it's a P tag. I could say P like this and that's the selector, that's the element name selector, that means all paragraph elements or P elements in this document will have the styles that I define between the open and closing curly grays. We usually like to break a line there but of course you type everything in a single line but that's not pretty at all for us humans to read so I usually like to have a line break there and you notice Visual Studio Code always adds what's called indentation that's space to the left hand side starting there. It's at least two for every single opening tag that you do or open braces. Anyway let's change the color of this paragraph, all the paragraphs to red so how would you say that in CSS? Well first you got to say okay what's the property you want to change, the style property. Now I want to change the tag's color, the name of that property is just color. Now I have to specify what's the color, red, green, blue and so on. To specify that we got to separate the property name and the value with a colon which is the two dots and then you can give it a color, look that Visual Studio Code is smart that gives us suggestions for all the colors we can write here so that's very nice so you can type for example red and then to finish off you have to say semicolon which is the dot of the comma. Okay so CSS selector for all the Ps, CSS property color with value red for syntax we separate the property name and value with a colon and then at the end always semicolon. Now you can see if you can see the colors that Lauren Ipsum and all the other paragraphs are now in red color and we can go further if you want to change for example the background color of all those paragraphs all you have to do is add more property, value pairs. You can do either before this or after. Okay let me do before so you can see so I can say the property name is background color you can see as I start typing that Visual Studio Code will suggest certain properties. Background color colon to separate the value and then let's say black and then finish off with semicolon. Now if you notice all the paragraphs the p elements have now a background color black as well as the color red. Like I said this line here line seven you can place also afterwards and it doesn't matter it's the same outcome. Now how do I move the line if you're curious I hold the alt key and press the keyboard arrow up and down to move the VS code okay. Okay now you might see people adding a space after the selector here name here like this and you might see people adding space after the colon and we usually do that because I think it's better on the eyes to visualize things it's just a matter of coding style but it doesn't affect the outcome. Just like I told you before it could even have one single line here it'll be the same thing by the way I'm using view word wrap option that's why you're seeing it wrapped but it's actually just one line there it doesn't matter the outcome is the same but it's really hard it's harder for us to see as we're reading the code so I think one property per line is the ideal for when we write CSS and I'm going to re-enable my view word wrap because I don't like scrolling horizontally so that's just going to wrap everything so I can see the whole line like that. Okay so that's pretty much how CSS goes you just got to figure out okay what do I want to target on the document to change the style I got to figure out my selector once I figure that out I can just specify all the properties that I need to change. Now the properties is the challenge right what's the combination of properties that I have to use to achieve my design right so you can draw something and then you're going to go and see a session figure out what's the properties that I have to use to achieve this drawing that I had okay so you might have noticed that all paragraphs are selected but usually when we have a selector for element name like this all the elements in the document will be changed but that's not really the best practice because in an actual document like a news website there's so many paragraphs everywhere and if you change all of them surely the style will be off and it'll be ugly so what you want to do is be very selective about the things you're targeting to avoid any change in things that you don't care about okay alright so let's keep going I will show you how you can target just this paragraph here on line 15 instead of all of them so the very straight forward way is to add an ID attribute to the element so we go to this P element and on the open tag at a space on the right hand side and then type ID equals double quotes double quotes and type the ID which is an identifier for this element now the ID attribute is something that's unique to this element and no other element can have this ID so let's call it let's say the unique paragraph about that so when you write an ID make sure there's no spaces if you're writing multiple words you can either put them together or have a dash underscore or use like some casing like Pascal case like this or camel case like this just to make sure there's no space okay if there's spacing things a computer usually thinks it's two separate things so that's why we don't want to have space okay this is the ID that I'm using to identify this element so I can use that for my selector and the way I use it is by typing hash first and then typing the name of the ID which is unique dash paragraph that way only this this and only that paragraph will be changed in the document if I scroll down only that one change you notice this other P here which is I think this one didn't change okay so that's a way to target only one element but the downside is it have to add the ID okay but what if you want to target maybe more than one thing but not all things maybe I have another paragraph here let me put a P and tab so it adds the open and close tag automatically and I'm going to generate some random tags with Lauren for tab and we have two paragraphs here that I would like to style the same way like this how would I do that well for that we use what's called a class so instead of having ID here I would make these two paragraphs have an attribute called class with the same class name so let's make it a class so what I would do here is instead of ID I'm going to add class I don't think it's unique so I'm just going to remove unique dash and for the second paragraph I also add the class attribute with the value of the same which is paragraph now the value could be whatever you want paragraph one two three or whatever okay I just named paragraph now what you got to do in the selector is you have to start with a dot dot means class name target by all the elements that have the following class name paragraph okay now don't confuse this paragraph could be whatever right I can write whatever here I just got to make sure it's dot whatever okay and you see both of them have color red and background color black let me revert so that's the way we can target multiple and be very selective about as many or as few as we want and if I tell class is usually the best practice for styling something okay so if you are unsure which one do I use the best way is just just add a class and be happy okay class is the way to go pretty much for everything somebody asked went to use ID versus class so I even though I show you we can use an ID I wouldn't do that usually I would always use class okay so try not to use ID because something very unique so if you really have something very unique a style that's unique to something and you absolutely cannot use class or any other selector then you can use the ID but I would just default to using classes everywhere even if you don't know about the selectors as we're going to see later we can make the selector actually more complicated than it is you can always default just use a class and be happy I don't have to worry about creating complicated selectors yeah so the ID is usable when you want to select something very specifically especially with JavaScript as we learn later on and when we call get element by ID but even doing that in the past people have targeted things using class name with a JS dash prefix to say it's only for JavaScript but that's another matter okay maybe I don't know the ID could be useful if you had a third-party package that for some reason added a unique ID there which is kind of bad if I must say but then you could target that anyway if you forget everything just use class okay if you aren't sure use class alright so nice now let's let me show you one other thing let's say we don't have to have just one selector and like this we can have multiple things for example let's say I want to highlight some words with the yellow background color like a marker how would I do that well one way is okay you can find what do you want to highlight let's say sit amid this word here let me find where it is after the audio player I think it's this word here line 20 so let's say I want to highlight this with the background yellow like a marker all I do is include that in an element and then I would add a class to that for example I can use what's called a span element that's usually used for inline text it's just a generic container for the inline text so I can put that in the span like this I notice visually there's no change right we are just doing that so we can let me close that with control B and then we can add a class here let's say let's call it highlight so whoever element has the class highlight will get a background color yellow then we go to our CSS here and we would add another selector it could be before this one or after this one doesn't matter so dot because we're talking about classes highlight and then curly braces and I like a space here usually and then background color separate about dash yellow and you can see now that it has background color yellow there and then I could go on and reuse this class what's great about class is I can use it anywhere I want after having only defined it once so let's say I want to make this second item from the list there highlighted so I would go to the order list here in line 25 second item I could either add a span to this or since I want to target the whole thing I can just add to the li here a class highlight and now you can see the whole thing is highlighted although now that I think about it looking at it if I don't want this whole line to be highlighted I would actually have to have the span so let's move that to a span so enclose that in a span and then you add the class there now only the text that's in line is highlighted instead of the whole row for the li which is list item and to make it a little easier for you to read I always like to break a line like this if you have something more complex inside so it's easier to read it can you go even further some people like doing like this so it's up to you to choose the style that's most readable to you okay so just keep going like that and you can build a lot of things just by writing in this convention now let me tell you how you can write this in a separate file because this can become really long and it's going to get out of hand the document of file is just too long so what we do is we can create a file here so we could create a general what we call style sheet that any other file could follow or we could create one that's very specific to this page okay so if you want the style to be very specific only to this page you would you could create a file here and I'd probably name it after the page like index.css which is just meant for the index and then I would take the code here let me split down so you can see both at the same time so I paste it like that okay now if I remove this here you're not going to see it anymore right now how do I make sure I kind of link this file to this index.html well we're going to use what's called a link tag so we're going to say link with the angle brackets now I have to tell okay rail attribute style sheet like this and then you got to tell it where is it okay so if you type link if you forget everything like you could type link and let me show you oh it is not doing it that's strange hold on if I type link and tab it should autocomplete for you like that okay it's a feature from VS code called a met but anyway the attribute href and then close it so that's a self-closing tag in a sense you don't have to close it like this you don't have to okay self-closing so in the href value here you type this CSS file path in this case because in the same directory as the angelx.html we can use a relative path and just say index.css and now you can see on the right on the right hand side that the style is now to apply okay now like I told you before I think this highlights class is actually something that could be global to every single page right it's not specifically this page made it maybe I want to have this highlight class available for me from every page that I make so whenever I need to highlight something yellow I could just apply the class highlight so what you could do is create a new file here called global.css because you want this to be if you need some global style just include this file and you can move that there so you have index that's just specifically style specific to index and global which is for any page that you want and then to use that you would just go here either before or after let's do before because I think it's better do it before because the global can be overridden by the specific one so global goes first so you would add a link tag rail style sheet and then the href would be a global.css so if you have something that applies to any page I would put in global and it can reuse the class like this that way you don't have to rewrite it every time because I've seen people in a previous bootcamp when I asked them as an exercise I want you to do the same styling in another page so what they would do is they would pretty much copy the same class definition like this so you can see there's the two places with the same thing so if you see yourself doing that you might want to extract that into some generic or global CSS so you don't have to write it again all you have to do is include with the link to the global and you can use highlight for example let me go to the other page sign up this is the other page that we have quick sign up let's say I want to highlight sign up here you see there let me put this down a little bit so you can see better that word is right after home it's this one sign up so I can add that span there in closing the words and add the class highlight if I want to make it background yellow but right now it doesn't work right because this file in the sign up.html doesn't have any link to the global one so what I would do is go to the end of the head before that and add the link remember link tab if you don't remember and then type global.css that way I can also enjoy the highlight here so it's basically it's very nice to reuse styles so you don't have to write the same thing twice or even thrice and so on. All right any questions let me know about the topic if you have some questions not necessarily related to the topic you ask in discord let me try to send you the link so I want to keep it focused but I'll gladly help you on discord let me show you give you the link here any group that's the link to discord again okay let's talk about colors a little bit because that's very important to CSS it might come across that why I will do colors I'll teach you a very powerful debugging tool that's the dev tools but anyway let's show you here let's see how I can go about this maybe I'll go through the dev tools first let me go to chrome so I'm going to the browser right now because it's easier to show you as an external browser and I have the page here open if you don't remember just right click open with a browser and refresh so this is the page we were working on and this is the sign up let me increase the zoom so it's easier on your eye so basically if I want to debug CSS I would use the developer tools there are two ways to open for example if you right click inspect an element it will bring it up like this I'm using chrome right now on firefox the tab is going to say inspector it's just a different name but it's the same functionality and then the other way is f12 on the keyboard the key is f12 if you're on a laptop you might have to hold f and when you press f12 anyway you're going to go to the elements or inspector tab in firefox and you can also use this pointer here and point to anything on the content and it will select it for you for example the first paragraph here point and it will select here you can obviously do it manually if I click here there it will highlight it as well if you notice on the right hand side here it will change depending on the element and that's actually the CSS or style tab and if your layout is not like this because probably the three dots here you have a different one like on the side like three dots or even separate or like this I'll keep it at the bottom okay all right so let me highlight the paragraph here you can analyze from the code itself the html live document uh that behind it has a class paragraph and you can even change it if you want and then on the right hand side I can also see okay this element has a class dot paragraph applied this is what we wrote remember and these are the styles and there's a checkbox here that's very nice that you can uncheck to see what it looks like without that property obviously the color became black so we cannot see it let us remove the background color what does it look like before and then after before and then remove the color and that's like what it looks like without all of that so in real time you can debug and see the things changing so it's very powerful let me bring you back now let me show you a different way to add or remove class obviously you can go here and delete it but there's a different way that can preserve so click the element click this dot cls and you can see these are all the classes this element has so you can uncheck that to remove the class and to apply so it's very nice and if you need to add more like highlight I can type highlight here enter and it will actually add the highlight but that's actually conflicting with the paragraph so that's why I don't see it yellow so I would have to probably remove the paragraph to see the actual yellow there you can see it the scratched out all right and the reason for that is the precedence I think if we move this down like I told you I think that would probably change let's see yeah it does change that's why I suggested you put the global first so that it can be overridden by index the specific style anyway let's go back to the p so let's talk about colors you can see there's this either color circle on firefox or the square on chrome and if you click that it brings you this very nice color picker let me increase the thing so you can see better click that it's very nice it allows you to pick any color you want and try it out in real time so you can maybe change it to like that oh it looks nice with the yellow and it gives you the code for the color so there are different ways to describe a color there's the hacks value which is hacks a decimal and there's other ones like rgb which is red green and blue looks like this and even other ones very obscure that we typically the at least me as a developer I don't use I usually use hacks or rgb anyway the hacks one is very simple it's basically the hash is saying this is a hex value or x a decimal if you look into map into math mathematics there's base stand which we usually use that has the digits 0 through 9 and then there's hacks a decimal which has 16 digits so after typing 9 it would go to a b c d e and f so it's like 16 digits and yeah so if you want to know more about that look up how to convert base stand to base 16 and you'll learn more about the math involved but basically we have six digits here and the first two is for the red value the middle two is for the green and the last two digits is for the blue so rgb red green and blue have you ever heard of that so that's what it's using here so you can create colors but specify what value for red what value for green what value for blue now the ff is like the maximum value it's like 255 in base 10 okay so if I change this format to rgb here you can see it changes to 255 which is ff in base 16 and then this one is easier for you because it's rgb our red green and blue and the values for each go from 0 to 255 so if I want a full red it's 255 full green is 255 and full blue is 255 and in this case uh when you have red green and blue maxed out that's the white color if you put them all 0 0 0 that's black and if you want just red you could put 255 for red and 0 for the others and that's maximum red and if you want green you can put 0 for red 255 for green and 0 for blue and that's green and likewise you can put 0 0 255 for blue and if you can play around you can change different colors and it will automatically change the codes there for you so you can pick that or the hex the hex is more convenient to copy I think see as I change it the values change there and I really I guess I like the oh this is nice one all right one thing it didn't talk about is if I go back to rgb there's an a here what is the a the a means alpha which is the transparency so if it's one it's like opaque and if it's zero it's totally transparent so you can't see if it puts 0.5 that's like 50 percent transparent and it can keep going like that so from zero to one opaque transparent something in between you can adjust if you want a very very very almost transparent 0.2 0.1 so you can adjust there I'm going to go back to one which is opaque okay now another thing that's nice about this if you click there it tells you about this contrast ratio which is basically okay how does this color for the text look look when we read it with the background that we have right now that is black what's the contrast ratio if I click to expand that it tells me it's 16.61 which is really good so it passes the standards called a a and triple a these are accessibility standards which mean the highest the contrast ratio the better it is for us to read and discern between the foreground and the background so if you have a really bad one like the color is almost black for the text you can see the contrast ratio is really low it's 139 so it's really hard for us to distinguish the text and the background if you look there and you can see it doesn't pass a a because you need at least 4.5 and it does not pass triple a because we need at least seven so how can we fix that well we want to increase the contrast with selecting a better color so if you make it more more white you can see the contrast increases okay passes double a passes triple a so I think like this is it's very good to discern between the colors for the text and the background so very nice feature that you're having a browser there okay I think I like this color so what I do is after selecting the color and choosing either hacks or rgb I can copy this here control c or command c in mac and go back to my code and replace it there let's see if we can find so here's my code here I'm going to go to index.css here I change this to red if I go back home from red to that and I paste it here now the reason I have to copy and paste this here is because when I change the developer tools that's not permanent so whenever I refresh I will show you I didn't save this by the way that's why I want to show you there if I go back here let's say I changed it but I didn't actually copy that back to my original code and I refresh now it's gone the color is back to red so be careful as you're doing things in the developer tools you want to make sure to copy the code back to the original otherwise you'll lose it the changes are never permanent so whatever you change here it's only for you it's not for other people somebody might ask hey can't we make it permanent somehow through the dev tools I think there is a feature if you go through it maybe sources I don't know where but there's a if you go look up the tutorial how to make the changes in the dev tool permanent that's likely a tool that you can use within all these functions here but for the most part you want to be careful doing that so always copy it back to your original code and yeah talking more about colors your visual studio code also has the function of the color here so you can also get that feedback if you click here and can also pick different colors so I think it's the same function as the dev tools but very nice okay so what else we do okay let's talk about how to find out about other CSS properties because that's you had to learn by yourself most of the stuff I cannot possibly show you every single property there is so how do I figure out what CSS property I should use to do something for example maybe I want to change the size of the font how would I go about that well there are different ways going back to the browser here the most straightforward and traditional way is doing a web search your favorite search engine okay how to change font size CSS and then you go through the results but the most popular one is probably w3 schools or mdn so you click there and you read about okay the font size property sets the size of the text so that's the one you're going to use and if you scroll down to give you examples how to use it and you can click this button try for yourself and here is the code on the left hand side and the actual document on the right hand side so you can play around change this value maybe I want to change 100 well h1 and all the h1s will have that 100 font size pixel and click run you see it's really big now so the unit for the sizing here is px which stands for pixels okay so it's very common unit we use so it's font size another way to find out about the properties you can ask a ai or artificial intelligence chatbot like chat dpt go github co-pilot microsoft co-pilot whatever it is that you use google's gemini and so on just ask the same question i did in the search engine and they'll tell you okay yet another way is the dev tools itself it can always go there like i'm going back to the page here and refresh so i can get that style it can always go there play around okay let's say i want to target this h1 here let's see what it looks like let's find out what properties i could change i would click you see this element.style i click there and i can start typing stuff let's try f oh there's so many properties that i suggest with f oh okay i've noticed there's font family size style oh size that's what i want so i'm going to choose that and tab and it even gives us suggestions for the value okay i could try all these values a nice feature that i i use when i want to try out all these values is i press the keyboard arrow down and it will browse through every one of them and they see changing in real time like that but out of these values it doesn't really show the pixels right so you got to type it yourself so if you want to start from a very small small i can you want px and then the keyboard will press up and then down to figure out to calibrate what font size i want maybe i'm going to increase until i find the perfect one for my use case okay let's do 32 maybe too big let's go down in the keyboard maybe 24 okay i like this so you would copy this and find a way to target the h1 maybe add a class or id or maybe target by all the element names but like i said element name is not good practice you could have another element the same name it would change that as well so you don't want to do that id is maybe not not too good but let's say you want to make this generic property so in the end it's all going to boil it down just add a class so you could add a class for that one let me demonstrate okay let's go here i would go back to the code and we target the h1 right in index.html the h1 here so add a class let's say site heading and then i would go to the if i think this class is specific to only this page i'm going to go to index.css and add it there by the way you can always separate them with an extra new line there that's better for to read site heading remember dot means target and element by class and then here i can go and paste that that way the site heading here we'll have that 24 and if i change it let's see if it's working 100 yeah it's working right all right nice now before i conclude this lecture i want to show you a very nice trick to understand the selectors in visual studio code is if you hover over this selector it will actually tell you what it means uh if you read that it says an element class site heading so that tells you okay this selector what it means is you have any element in the document that has the class site heading oh that makes sense what about the other one it's going to be any element that has the class paragraph it's very nice if i had the id let me show you here hash something and i hover over it look what it does element whose id is something nice so it tells me exactly what the selector is doing so if you have no idea what the css selector is doing hover over it uh with the mouse pointer in visual studio code and it will tell you what it means all right right now we don't have many complex selectors but later on we'll learn and we can find out and let me remove the hash what happens if i remove the hash well that's not really valid html but it's an element that's called something that's not valid let's put p there and you can see oh all the p elements it's a very powerful tool all right so let's time for us to take a break now see you in 10 minutes