Placeholder Image

Subtitles section Play video

  • Hello.

  • My name is Bo Cards, and I'm with Freak.

  • Oh, camped out work.

  • This is a complete CSS course or cascading style sheets.

  • CSS is something you used to style websites or style HTML.

  • So before you watch this course, you should have some familiarity with HTML.

  • You can learn a CML through the free HTML curriculum at free Coke camped out.

  • Or or you could check out the video course that a link to in the description this whole CSS course follows along with the CSS curriculum.

  • That freak oh, capped out.

  • Or so when you hear me talk about challenges or completing challenges, I'm talking about the challenges.

  • As far that curriculum, however, it's a standalone video, so you don't have to go through the curriculum to get value out of this course.

  • But if you want to, you can go through that curriculum as well.

  • I have the link to the freak.

  • Oh, camp, not orcs CSS curriculum.

  • In the description, uh, after you finish this course, you may want to try out some CSS projects, so I have a link to a playlist with a bunch of CSS projects.

  • You can do a ride in the description and then after you master CSS and HTML, it may be good to try out JavaScript.

  • So I have a link to a job script course.

  • Also in the description.

  • So let's get started in this challenge, we're gonna talk about in line styles.

  • Inline styles are where you style something right on the element that you want to effect.

  • So if I put my mouth on this p tag here, I can add a style to the P pack by just using style, and then we're gonna put what the style is gonna be you and we're gonna put color.

  • So that would just make the color of that text blue.

  • But for this talent, we're not going to style.

  • The peat ey were gonna style the h two.

  • So I'm going to undo that.

  • And now I'm going to add the style to this ace to tag, and I'm going to make the style where the color is going to be a threat just like that.

  • And let's open up the browser and see what that looks like.

  • Okay, you can see that the text The title here is red.

  • In the last challenge, we talked about in line styles.

  • That's what this is here.

  • Now we're gonna talk about a different way to add styles using a style block and you can see we use color red.

  • There are actually hundreds of CSS properties like color.

  • We're going to eventually get to those, but not quite yet.

  • I'm gonna show you the style block.

  • So to make a style block just at the beginning, I can add the tag style and then we just need a closing style block.

  • Now, I can add all my styles between these two style tags.

  • So let me give you an example.

  • If I wantto style all the paragraph tags, I can put a p and I'm gonna put curly Brace.

  • And inside these two curly braces, I'm gonna put color bread.

  • Now, this is going to style all the paragraphs every time you see a P tag like here, here and all the P tags were gonna now be read.

  • If we look in the browser weaken, see what that's gonna look like.

  • So you can see.

  • Look, this paragraph is read.

  • This paragraph is read all the P tags have now changed the text to read so for this challenge.

  • We're going to take out the inline style here, and I'm going to add some style to this block up here instead of styling.

  • P tag's running a style that h two tags and I'm going to make them all blue So I'm gonna put Color blue Now Let me open up the browser and we'll see what that looks like if I refresh and you can see the age to is now blue.

  • In the last challenge we learned about styling tags like this.

  • All 82 tags are blue.

  • In this challenge, we're talking about styling classes.

  • Classes are reusable styles that could be added to HTML elements.

  • So to show that you're styling a class, you would put a dot in front of it.

  • So I'm the changes eight h 22 dot blue text.

  • And if you add the stock blue text, this is only going to style elements that have a class of blue text.

  • So, for instance, for this paragraph I'm going to add a class and I'm going to put in blue text now.

  • You can see I put a period up here, but you don't put a period down here.

  • The period just means that the class when you're looking at your CSS your style's.

  • So if I open this in my browser and refresh it, we can see that this is now blue right here.

  • We're gonna change this up instead of making us a blue text.

  • It's now going to say read text and this color is going to become red.

  • Um, I'm not gonna need this anymore because instead of playing the class on the pictograph, I'm gonna put the class on this age to tag.

  • It's going to be class read text.

  • And then if I show that in the browser and refresh, you can see the title is red.

  • What's great about classes is that they allow you to use the same CSS styles on multiple HTML elements.

  • So friends and see how this has class read text.

  • I can had read texts, a class read text to any element to make it red.

  • And that's what we're gonna do in this challenge.

  • So on the first p element right here, right up here, I'm gonna add class equals read text.

  • And when I open up the little browser here, you'll see that the title is red and the first paragraph is red.

  • Just by adding the class to both elements, there are hundreds of different CSS properties.

  • We've only talked about color so far, but another one is font size that's pretty self explanatory.

  • It's going to change the font size of an element.

  • So, for instance, I can put font size 30 pixels, and now everything that has the red text class will also be font size 30.

  • So if I look in here, you can see that this paragraph is a lot bigger.

  • Now we're going to change the font size of paragraphs, so I'll just remove what I had here.

  • And I'm going to add another style.

  • So it right down here, it's gonna be key, and the font size is going to be 16 pixels.

  • Put 16 p x and now if I show the browser here, we'll see that all the paragraphs are 16 pixels that we've just increased everything to 16 pixels for the paragraphs you can set, which font in element should use by using the font family property.

  • Now you can use a type or style of thought like Sarah If San Sierra for mono space or you can put in the exact fund.

  • So in this challenge, we're gonna make all the P elements mano space.

  • So right here, I'm going to put font family and then mano space.

  • And if we just showed this in the browser and refresh, you can see now we have these this mono space font here just like that, you can import fonts from different websites.

  • A free library of Web funds that you can use is ghoul fonts.

  • They have a lot of great fonts, and that's what we're gonna do.

  • In this challenge, we're gonna see how to import ghoul fonts.

  • So if I just paste in some coat up here, this code comes directly from the ghoul Fonz website, and you can see it's the font family lobster.

  • So I'm just about to show you how to use that right in our code here.

  • So what I'm going to do is for the age to element.

  • I'm gonna at each to here, and I'm at a font family of lobster.

  • Now, that's all I really had to do for this challenge.

  • If I wanted to, I could add a backup font that would be used just in case the cool font didn't load like this.

  • I do a comma, and then I can put a generic font that's gonna be used if the specific font doesn't load.

  • But we're not gonna do that for this.

  • I'm just gonna open the browser and see if it works.

  • And you can see we have the lobster font right here.

  • There's some default fonts available in all browsers like Mono Space, Serif and San Serif.

  • You can see we're using the mono space font right here.

  • So when one fun isn't available, you can tell the browser to degrade or default toe another font like one of these default Fonz like the model Space Font, for example.

  • Let's say we had the Farr family in the font family.

  • We had held that Helvetica.

  • So if I add Helvetica right here, and I can actually just make a list of fonts right here, So in font family, when you have a list here first it tries the first font, but that one's unavailable.

  • It will go to the next font.

  • So when you're making a list of font family funds, you always want the last one to be a generic font.

  • So you know that if the browser can't get the first font or the second fine, it can always get the default fine at the end here.

  • So for this example for this challenge, we're gonna do that for the H two tag.

  • So in this age to Ted, we have lobster.

  • Let me delete Helvetica here, and I'm gonna make the default font mano space out right now.

  • If I open up the browser, you're not gonna see anything different.

  • You're gonna see lobster here.

  • But if I comment out the link to the ghoul fonts and now I'm going to refresh this and you can see it's defaulted to the mono space just like that, See?

  • So it couldn't find lobster, so it defaulted to the mono space font.

  • CSS has a property called with that controls and elements whip.

  • This can apply to almost any type of element, like an image or a div or paragraph, and we're going to create a style that can make a larger image.

  • So I'm gonna create this a larger image.

  • Now that's on Lee going to apply to an element with the class larger image, and I'll put with could be 500 pixels.

  • So if we have anything with the class larger image, it will make it larger.

  • So I'm going to actually add that to this image here.

  • I'm gonna put class equals larger image.

  • So if we look in the browser here, we should see that the image is very big right now for this town's we're going to make a smaller image.

  • So I'm just going to exit, just change this to Smaller.

  • And instead of 500 pixels, we're gonna make this 100 pixels, and I have to apply the smaller image class down here.

  • So if I opened the little browser and refresh now, it's just a tiny little count.

  • A cute little cat right there on our page.

  • CSS borders have properties like style, color and whipped.

  • Let me show you an example.

  • I'm going to actually make a change to the H to style.

  • Here.

  • I'm gonna paste in some code.

  • You'll see border color, red border with five pixels, border style solid.

  • So when I refresh the page here, you'll see this red border around the age to tag.

  • I'm gonna delete this for right now because for this challenge.

  • We're actually going to make a thick green border, so I'll just put it right up at the top for now here.

  • And I am going to make a new class called Thick Green Border, and I'm just gonna actually pace in that same code from before.

  • But the border color is now going to be green, and the border with can be 10 pixels and the border style will still be solid here.

  • So now I'm going to have to apply it to the image.

  • So right now there's the class smaller image, But you can have two classes here.

  • I just put a space and then I'm gonna put thick.

  • I mean order.

  • So is long.

  • You just have a space.

  • In between classes, you can have two classes.

  • So if I refresh here, you'll see the thick green border right around there.

  • You can see so far, we have very sharp corners around this image.

  • There's a border radius property that we can use to make that a little round more rounded.

  • I'm going to add a new thing called Border Radius, and I'm gonna set the value to 10 pixels.

  • So if I refresh Now you can see we have rounded corners here, In addition to pixels, thatyou can also specify the border radius using a percentage.

  • So instead of border radius 10 pixels, I'm gonna change this too.

  • 50%.

  • And if I refresh my page here, you can see it makes a circle.

  • You can set an element's background color with a property called background color.

  • So here's an example.

  • Let's set the background color of the H two elements background color, and I'm going to change this to blue.

  • So if I open up, my browser will see that the background is blue.

  • I'm gonna make a new class, and the new class is going to be called silver background silver background and you guessed it.

  • It's going to have a silver background.

  • So I'm gonna put background color silver.

  • Now, remember, I also have to apply it somewhere.

  • I have to make something used that class.

  • So for this develop a class equals silver background.

  • Now, if I refresh here, you can see we have a silver background here.

  • We don't need this background color blue, so I'll take that off here and refresh it one more time, and that's how it's supposed to look.

  • We've talked about styling specific elements like this.

  • And then we've also talked about styling classes.

  • You can also style based on I d and ideas similar to a class.

  • Except each element is only gonna have one I d classes.

  • You can put on a lot of different elements.

  • So let me show you how to apply an I d to an element.

  • If I just go down to this form here and I'm just gonna put i b equals cat photo form.

  • And just like that, it's not gonna change the appearance at all because we haven't style it yet, But now we can use the I d to add CSS styles or weaken reference it in Java script.

  • In the last section we learned about I d s.

  • Now we're gonna learn about styling I d.

  • S.

  • I'll use this ace to as an example and an i d.

  • Of heading beater styling I d.

  • S.

  • It's similar to in your styling classes, but we are going to use in a hash mark instead of a period.

  • So I'm gonna put heading here.

  • Um, let me form at this little better, so you can see normally for the clans that started the period for an I D.

  • It's gonna start with a hash mark.

  • So I am going to put Color Green.

  • Now I want to show you something so you can see that this h two has a class of red techs and a heading and idea of heading.

  • So we have the red text and the heading.

  • So is it gonna be red or is it gonna be green?

  • Well, let's open the browser and find out here.

  • You can see it is green because CSS puts a higher priority to a I.

  • D s than classes.

  • And as a reminder, you should only have one I d per element.

  • We already have the i d down here on the form idea of camp photo form.

  • And so now I'm gonna change this instead of heading, is gonna say cat photo form.

  • And then for color, we're gonna instead of color, Green is going to be background color green.

  • And now I'm just gonna Reese refresh that.

  • And if I go down here to the form, you can see it's green in the background.

  • You may have already noticed this But all HTML elements are essentially little rectangles.

  • They're three properties that control the space around each element, which is patting margin and border.

  • We already talked about border, which you can see on here.

  • The padding is the space around the text.

  • You can see that the panning around this red text is a little more than the padding around the blue text.

  • The margin is the space outside of the border that surrounds the padding.

  • So in this task, we're going to change the padding.

  • We're gonna change the petting on the blue box and master of the red box.

  • So if we look down here, the panning on the blue boxes 10 the paying on the red boxes 20.

  • So we're just gonna change this, too 20.

  • And then if I refresh my page here, you can see that these boxes are the same size and elements margin controls the amount of space between an element's border and the surrounding elements.

  • You can see that there's greater margin on this red box than the blue box.

  • So in this task, we're going to make sure that they're both the same.

  • So I'm going to change the margin the blue box to Massa of the red box.

  • So you can see the margin is 20 on the red box.

  • So I'm just gonna set the blue box, also be 20 and then if I refresh my page, you can see that they're the same.

  • The reason why this red box is so big right here is because it has negative margin.

  • We're gonna make sure the blue box is Justus Bigas the red box by giving the blue box negative margin as well.

  • So I'm gonna set this to negative 15.

  • So now the red box and the blue boxer, both at negative 15.

  • And if I refresh the page now, they're both the same as you can see in this red box.

  • Each side can have different amounts of padding.

  • That's this code here patting top, paying right, patting bottom, panning left.

  • We're going to use different patting cz for the different sides of the blue box.

  • So I'm just gonna copy this code right here and then paste it down here and now what we have to do for the challenge is set the cop and left to 40.

  • So let's do for 40 here and top left are already 40 and then the bottom and right to 20.

  • Ah, that's just the same as already is.

  • So let me refresh and we're done.

  • We already learned that you can set each side of padding separately.

  • You can also do the same thing for margin.

  • You can see for this red box.

  • It has different margin on each side.

  • We have margin.

  • Top right bottom left.

  • We're gonna do the same thing for the blue box.

  • And I'm just gonna copy this margin from the red box and pace in for the blue box.

  • And now I'm just going to refresh my page because we're done.

  • Previously, we learned about patting top, heading right, patting bottom and patting left.

  • There is an easier way to do the same thing.

  • And it's called clockwise notation.

  • If I if we look at this browser here and see the red box, um, there's actually a different patting on each side.

  • So if you look at this padding here, see how these four numbers while the first number is the top than the right than the bottom, then the left.

  • So we're gonna do the same thing in the blue box.

  • I'ma start off by copping this padding from the red box.

  • I'll takes it into the blue box and this time, the petting top and left Ft.

  • 40.

  • So this one s p 40 and then the last one that's the left and the bottom and right have to be 20.

  • Those were the two middle numbers.

  • So if I change those and refresh, we'll see that that they're both kind of the same.

  • They're a little different because this one has the 21st and 40 and then this one has the for even 20.

  • And that's it.

  • We already learned about clockwise rotation for patting.

  • Now we're gonna learn about it for margin.

  • It's basically the same.

  • You can see this red box has a different margin on each side.

  • So here's the code.

  • Here it's clockwise notation.

  • There's four numbers.

  • The first is the top right bottom and then left so you could do all in one line instead of having four different lines.

  • We're gonna do the same thing for the blue box.

  • So I'm just going to start by copping this line and to solve this challenge.

  • We're just going to flip these two numbers around cause the 40 has to be that is Hezb e top and the 20 is gonna be on the right.

  • So if I refresh my page here, you can see that it has changed.

  • We now know how to style classes.

  • So this is an example of silent classes with a dot before the class here.

  • And then you can put the styles for the class and then used I i d s with hash mark instead of a dot hero.

  • Be a hash mark.

  • Now we're gonna learn how to use attributes, electors to style elements.

  • Now, this is a selector that matches and styles elements with a specific attributes value.

  • I'm gonna show you an example how to style something with a type radio.

  • So weaken style, everything with type radio.

  • So let me add that red up top here.

  • So you brackets around, we don't do that.

  • So we're gonna put the attributes which is type, and then we're gonna put the value, which is radio.

  • So hype equals radio and we're gonna that's how how we're gonna select were styling.

  • So here I'm just going to set the margin two 20 pixels.

  • So if we open up the browser here.

  • Now, let me scroll down and we can see that there is a margin around these radio buttons of 20 pixels.

  • So now we're going to use the type attributes selector to try to give the check boxes a top margin of Tim pixels and a bottom margin of 15 pixels.

  • So all I'm gonna do is so let's go and look at the check box in the code says type checkbox.

  • So we'll use the same thing.

  • Appearance of type of radio is gonna be type check box, and then for the margin, Um, the top is going be 10 and the bottom don't be 15.

  • So what I'm gonna do is due, huh?

  • Huh?

  • If we do the clock one so the first number is top.

  • The second number is right.

  • I'm just gonna put zero pixels and then the third numbers bottom.

  • I'm gonna put 15 pixels and then the fourth number is the left, which is zero pixels.

  • So if I just refresh my page here and the check boxes are styled So far, we've been setting margins and padding is using pixels p x e of this example Nega 25 PX or pixels These are absolute types of length, so absolute types of length include like i m for answer mm millimeters, these air all tied to physical units of length.

  • But there's also relative units of length, such as E.

  • M and R E M and these air relative to another length value.

  • For example, E M is based on the size of an element's font.

  • And if you use it to set the font size property itself, it's relative to the parents font size.

  • Now we'll talk about this a little more on the response of Web design principle section.

  • But for now we're gonna try setting some panning using an E m r m value.

  • So that's what I'm gonna show you.

  • Now we're gonna set the class of the red box here.

  • We're gonna set the petting to an e m values when it put padding, and it's just like how you would put pixels.

  • But instead of going PS, you just put the m so this is gonna be a relative, depending on other things on the page.

  • If I showed the browser here now you'll see this extra padding here around the red box.

  • Every HTML page has a body element.

  • Now usually will be a more explicit.

  • You'll see the body tag round the page.

  • But even if you don't see the body attack on the page like in these examples, it's still there.

  • It's just hidden so we can prove this by actually just styling the body element.

  • So that's what we're gonna do here.

  • I'm gonna add a body here, a body style, and we're just gonna set the background color to back.

  • And now if I refresh my page, you can see it turns black.

  • This the whole page turns black here.

  • So we've seen the all pages have a body element.

  • Now C.

  • S S s stands for cascading style sheets.

  • Cascading means anything that you apply to an upper element goes down to any lower elements or any elements that air inside other elements.

  • So anything that you apply to the body element will cascade or get be inherited to all the other elements on the page.

  • So let's see how that first I'm gonna create each one element and inside the H one element, I'm going to say hello world.

  • And now I'm going to style the body element.

  • So we already have blackout color black.

  • I'm also gonna put color brain, and I'm for the font family.

  • Put it as mono space.

  • Now let's open up the browser and see what that looks like.

  • Okay, look, we have green mano space font.

  • I didn't apply to the H one tag.

  • I applied to the body, and then everything else got that same style.

  • Sometimes your HTML elements will receive multiple styles that conflict with one another.

  • If you see on here, this H one here, this body will apply is will cascade down to H one to make the color green.

  • But what if there was something else to make this a different color?

  • What would happen?

  • So what I'm gonna do is make a new class.

  • It's gonna be called pink text, and I am going to make the color, I think.

  • And now I will apply the class to the H one.

  • Paige.

  • So I think text.

  • So what do you think's gonna happen?

  • It has the color green from here, but also has the color pink from here.

  • Well, let's open up the browser and find out and it's pink.

  • The way it works is it uses whichever one is more specific.

  • Since this has the class Pink Tex, and it doesn't start with body or anything.

  • The pink text is more specific than the body because body is further up.

  • So whatever one is closest to the actual text is which style it will use.

  • So we saw that this color pink override the color green because pink taxes more specific than body.

  • What can we do to overwrite this peak Techs here?

  • What if I made another class like this?

  • I'm gonna just copy that and then paste it here.

  • But instead of being pink text, it's going to be blue.

  • And the color's gonna be blue.

  • Now, I'm at another class here, remember, Add two classes.

  • You just put a space in between class that I'm gonna put blue text here.

  • So now what's gonna happen is gonna be pink or blue.

  • I'm just gonna give you one to appear that the order of the classes here doesn't matter.

  • Doesn't matter whether pink texture blue text comes first.

  • So let's see what color the text is gonna be and you can see it's gonna be blue.

  • So the order that does matter is the order that the styles declared in.

  • So if I just take this blue text here, I'm gonna cut this.

  • And now I'm gonna just paste it right up here.

  • And now if I refresh the page, you'll see that it's pink because it just depends on what order this comes in here.

  • So we saw they could override styles by making things more specific.

  • Pink text.

  • The class overrides just styling the body.

  • And then we saw you could override styles by putting things lowering in the styling section.

  • So this blue text overrides pink text because it's lower.

  • Now there's another way to override styles, and that's what I d s.

  • So I'm gonna add an i d to this h one here, it's gonna be I d equals and we're gonna have an I.

  • D name called orange text.

  • And now I'm gonna put the I d.

  • Style right above the pink text because when you're styling I d.

  • S, it doesn't matter.

  • The order doesn't matter if it's above or below the other styles.

  • Because I D.

  • S are even more specific.

  • Let me show you what I mean.

  • So remember starting with the dollar store with 1/2 shine or pound sign and I'm gonna put orange text and here we're gonna put color orange And now I'm gonna show the browser Here were fresh and you can see it's orange text because I d their specific You are only supposed to have one I D per page.

  • So orange tech should on Lee be on this element, whereas classes you would put on monthly elements.

  • I did.

  • You only applied a one element, so I desire more specific than classes.

  • And here's another way to override class declarations within line styles in line styles are gonna be more specific than all these other ways of styling text.

  • I'm to go right into this element here and put style equals.

  • And then I'm just gonna change the color to White.

  • You can write this just as you would write your CSS above, but right in line.

  • I'm gonna open up the browser here, and then you should be able to see the text is white, so that's even more specific.

  • You've learned many ways to override CSS and even more more specific starting at the body than pink text and Blue Tex and orange text.

  • We've learned many ways, but now I'm about to tell you about the most powerful method of all.

  • How you can show something is super important.

  • Let me show you that.

  • Now, if you remember, this pink text has been overridden many times.

  • But now we're gonna show that this is very important.

  • I'm gonna use an exclamation point and then the word important.

  • So using this exclamation point important after a style means is the most important style.

  • You should definitely apply this style.

  • So let's see what that looks like.

  • And now it is pink.

  • Hello.

  • World is now pink.

  • So far, we've been coloring things, using the actual color names like, for instance, black or orange or green or blue.

  • But there's a way to get even more specific using hex codes.

  • Hex codes are six hexi decimal digits that represent colors.

  • So you can represent any color on the spectrum using a hex code.

  • So I'm going to change this instead of black.

  • I'm gonna put the hex of decimal for black, which is just 000000 So the 1st 2 zeros are the red 2nd 2 zeros are the green, and the 3rd 2 zeros are blue.

  • But since it's black, it's zero for every single one.

  • So let's see what that looks like in the browser, and it's still black.

  • Hex code can be used to create over 16 million different colors.

  • And that's what we're gonna do here.

  • We're gonna put in the right hex codes for these colors.

  • So the hex for red is gonna be there always gonna start with the hash marker pound key.

  • I'm just gonna put ff 0000 and then for a green under the hash mark.

  • And it's gonna be 00 ff 00 and then for Dodger blue text.

  • Now, I don't have these Memorize.

  • I'm actually just reading them off.

  • Uh, Mose, you're not.

  • It's gonna be hard to memorize 16 million different combinations for colors, so usually you're gonna look these up somewhere.

  • There's a lot of Web sites.

  • A lot of other resource is to find the appropriate hex codes for different colors.

  • So for the orange text, it's gonna be f f a 500 and let's open up the browser and see what this looks like.

  • If I refresh this, and now we see all the different colors.

  • Some hex coast could be shortened.

  • Remember, they're usually six digits long, but sometimes the hex codes have three sets of two of the same digits.

  • For instance, red taxi hex code is normally F F 0000 You can see that the first pages are F.

  • The 2nd 2 digits are zero and the 3rd 2 digits or zero.

  • So whenever there's three sets of to weaken short in this by just doing one number one digit free so F 00 so this F will be expanded to FF.

  • This would be expanded to 00 and this would be expanded to 00 for future.

  • For future attacks, we can do F zero F for the Scion text.

  • We can do zero FF, and then then for the green text, we can d'oh zero f zero.

  • So let's open the browser and see if we got those colors.

  • And it worked.

  • Besides using hex values to represent colors, you can also represent colors using RGB values, so that would be like this instead of this hex value.

  • U R G b.

  • And then there's gonna be three numbers.

  • Each number's gonna be between zero and 255.

  • I'll just use 255 3 times here and then if we show this in the browser, um 2 55 to 55 to 55 is white.

  • But for this challenge, we're gonna change it, change it to black.

  • So black is just gonna be 0000000 for black.

  • And if I refresh, we'll see that has changed too black.

  • You could make just as many colors using RGB as you can make with Hex.

  • So I'm gonna make all these colors with RGB instead of hex.

  • So for the red text, it's just gonna be rgb and then the first number is always red and then we have the green and then we have the blue.

  • So for red, it's all red.

  • No green, no blue.

  • You can kind of mix to decide how much you want of each color color with RGB, and you can really do the same thing with hex as well.

  • So for orchid text was to rgb and this is going to be to 18 1 12 and then 214 I don't actually believe memorized.

  • I'm just reading them off here.

  • And to make this even easier, I'm gonna do some copying and pasting.

  • So we're gonna have the CN attacked and the blue text.

  • Sienna is going to be 1 60 and then 11 No.

  • 82 And then we're gonna do 45 and then for Blue, this is gonna be easy One, we just have 00 2 55 And now let's look at the browser to see what that's gonna look like.

  • There are colors.

  • Look at the sweet Penguin created on Lee with CSS and HTML.

  • We're not gonna go into exactly how to create this.

  • You can look at the code to find it yourself, but this is all about showing CSS variables.

  • So here, Right here are CSS variables.

  • So the penguin skin black belly gray, beat yellow.

  • You can see they're used here like here, background.

  • We have the var, and then you're the parentheses.

  • Two dashes penguin, death skin and great.

  • So this would be the backup color right here.

  • But this would be we would try to use this variable if we can't use this variable.

  • We go to the back up, but right now I'm gonna show you how just changing these variable colors will change everything every time those variables are used.

  • So I'm going to change this black to Gray.

  • I'm gonna change this Great too, right?

  • And I'm gonna change the yellow to orange.

  • And then if I just refresh here, you see, our pin one is a completely different color now, it was super easy.

  • We only had to change in one spot and it changed everywhere in the coat.

  • In the last challenge, we were introduced to variables.

  • Now we'll go over him some mooring and learn about them in more detail.

  • So to create variable, we're gonna do it right here.

  • So we're gonna create a penguin skin variable so they always start with two dashes, and then we just do we put the name here, which is gonna be penguin in now.

  • We're going to be able to use this variable anywhere throughout the code.

  • This is just gonna be gray.

  • So now, anywhere we use this penguin's skin variable, it's gonna be replaced with gray in the code.

  • So in the last challenge, we create this variable penguin skin gray.

  • Now we're gonna use it.

  • So to use a variable, you just put a bar and then parentheses.

  • You put the variable name.

  • Let me show you here for this background.

  • I'm gonna put bar and then parentheses.

  • And then I'm just gonna put dashed.

  • Asked for Penguin then and then that's the variable.

  • We're gonna use the same variable in multiple places.

  • So I'm just gonna copy this and, well, pace it here and then I'll paste it here and then if I refresh, it's great.

  • Oh, there's a wing.

  • Let's see, we have to replace one more spot.

  • Okay, let's replace their and refresh.

  • And now everything that's supposed to gray is now grey.

  • So now we had to replace all the sponsor this time.

  • But from now on, whenever we want to change the color of the penguin skin, we only have to change in one spot.

  • That's the great thing about variable variables can have fallback values attached these air used if, for some reason the variable won't work, it could be because someone's using older browser that doesn't use CSS variables.

  • Or maybe just a variable name is spelled wrong.

  • So that's what's happening here, says Penguin.

  • That's spelled wrong, but, ah, show that that's just to show these fallback values.

  • So what I'm gonna do is just add the word black here.

  • And then here I can have the word black, and now it's just refresh this.

  • You can see it's using the fallback value because it cannot find the penguin skin because it's spelled wrong here.

  • Variables are available inside the element in which you create it.

  • So we have these variables here.

  • The reason why they work in the other parts of the penguin is because everything is within the penguin element, like the right cheek left cheek belly, these air all within the penguin element.

  • Sometimes in order to make variables available anywhere in a document, you can declare the variables inside a route element.

  • You can think of the Rue Element as a container for your entire HTML document in the same way that an HTML element is a container for the body element.

  • So anytime you create a variable within the route element, they're gonna be available throughout the whole page.

  • So that's what we're gonna do here.

  • So I'm gonna make a variable named penguin belly, and then this is going to be pink, so we can already see that it's used in these spots here to you.

  • And when that belly is used here, penguin bellies, you is here.

  • So it's using these two different places, and but just making it here within the route, we're gonna use it everywhere else and let me refresh the page.

  • And you can see that that it's pink in both places.

  • So variables declared within route apply to the whole page, but you could overwrite those within a specific element.

  • So down here I'm gonna overwrite penguin belly.

  • So penguin.

  • No, he and this is now going to be white.

  • So if I refresh the page, it's right now.

  • Media queries can be used to change variables.

  • Media queries make different CSS applied depending on the size of the screen.

  • So here's the medias query for Max with 300 pixels so we can make variables that Onley apply when the match with us 350 pixels.

  • So let's try changing the size So now the pinguin size will be 200 pixels, and we're also gonna try changing the skin so penguin skin with this media query will be black.

  • So now when you change the size of the browser, well, let me refresh again.

  • It will change the variables Time to create our first CSS grid.

  • You can turn any HTML element into a grid container by setting its display property to grid.

  • So we have this a she male element container and then here is the CSS.

  • For that, we're going to set the display property property to grid, and this will give us the ability to use the other properties associated with CSS cred.

  • So I'm just gonna put display rig and we're done, so it doesn't do anything quite yet because we haven't updated any of the other properties yet.

  • But we'll do that in later challenges.

  • Now we need to start defining the structure of the grid.

  • We'll start with adding some columns using grid template columns.

  • So I'm gonna do that now and show you how to solve this challenge.

  • I'm the type Ingrid template problems.

  • And after grid template columns, we're gonna put the width of each column.

  • So the number the number of numbers we put here are the number of combs we're gonna have three columns, so we're gonna have three numbers and all of them are gonna be 100 pixels wide.

  • So I just have to put 100 pixels three times.

  • And now if I refresh the page here, you'll see that we have three columns.

  • So here we have grid template columns, which we already learned about, which sets the number of columns.

  • Now we want to set the exact number of rose.

  • Right now, the roads are just determined automatically.

  • But if we know exactly how many rows we want, we can use grid template rose.

  • So to solve this challenge, we just have to egg grid template rose.

  • And then, just like grid pinprick Collins, the number of numbers are the number of rows, and each number is how tall each one will be.

  • So I'm gonna put, um, 50 pixels, 50 pixels, so we'll have to rose or each 50 pixels high.

  • So if I refresh that, it looks pretty similar because that was very close to what the default was.

  • But we just solved it.

  • You can use CSS grid units to change the size of columns and rows.

  • You can use pixels and ems, but you could also use things like F R.

  • Which sets the column or roto a fraction of the available space.

  • See this?

  • How we have five different columns and they're all different sizes.

  • Well, we have this code here so you can see the first column is Otto.

  • That's the one here and that sets the column to the size of the face.

  • So it just is just big enough for that one to fit in there.

  • And then the second column is 50.

  • So this come with a two is 50 pixels wide with the three, we have 10%.

  • So this three is 10% of the available section from the whole container.

  • This is 3% of the whole container, and now we have the two fr on one f R.

  • That's Columns four and five.

  • So the last two columns the remains space is divided into three sections because two plus one is three.

  • Two of the sections are allocated to the fourth column and one to the Fifth Column.

  • We're gonna make a grid with three columns instead of all five of these.

  • We're going to specify three of them.

  • So the 1st 1 is gonna be one fr and then we're gonna have 100 pixels and then too f ar So let's see what that looks like when I refresh the page here so we can see we have three columns.

  • The middle column is always staying at 100 pixels, no matter how wide.

  • But the first and third column will change because of the F R units here.

  • You can see here in these Collins there's no gap between the columns.

  • There's a spot up right against each other.

  • Sometimes you want a gap between the Collins.

  • So you use grid column Gap.

  • I'm gonna show you how to do that right now and show you how to solve this challenge.

  • So it's gonna be a grid column.

  • Yeah, And then we said, How many pixels we want in between each column?

  • In this case, we're gonna put 20 pixels.

  • So if I refresh here, we should see space in between each column.

  • In the last challenge, we learned about Grid column gap, you probably won't be surprised to learn that there's also a grid row gap, so it works just the same grid row gap, and I'll make a gap between the Rose.

  • This case will put five pixels by refresh.

  • Here you can see that there is a space in between the rows here.

  • The grid Gap property is a short hand property for using the grid row gap and grid column Gap properties all at once.

  • If you just put one number, it will put the same gap on the rows and columns.

  • If you use two numbers, the first number will be rose.

  • The second number will be columns, so I'm going to just do the two numbers here.

  • So I'm gonna do a grid gap, and then the first number is going to be 10 pixels for the rose and the second numbers and me 20 pixels for the columns.

  • I refreshed this here.

  • We can see that there's the 10 pixels in between.

  • And then there's the 20 pixels for the columns here.

  • The Grid column Property is used to set how many columns a grid item will take up.

  • Now here's a three by three grid, and there's the's hypothetical lines that you don't see.

  • But they exist in between the grids and they're numbered.

  • One you can see in this example for a three by three grids.

  • There's four lines.

  • 1234 So for the grid column, property to set How many columns and item is going to take up?

  • You're going to specify the beginning line and the ending line.

  • So if you wanted to take up two columns the 1st 2 columns, you would specify line one and then line three because it would start at line one and would And that line three let me show you what that would look like.

  • So, friend, since if we were gonna set this item five to set to take up the 1st 2 columns, it would be like this rid column and then we would put one slash three because it would start the first line and end at the third line for this challenge.

  • Oh, we're going to make the grid, take up the final two columns.

  • So it's going to start it, too.

  • And in that four.

  • So if we refresh that, we should see that this fifth element starts at two, and then it ends at four.

  • Just like that, we learned how to make grid items consume multiple columns.

  • We can also do the same thing with rose.

  • It's basically the same thing.

  • So in sort of Greg column is gonna be Grid Row.

  • And then for this challenge, we have to make it take up the last two rows, so it's the same as before.

  • I'm gonna put to slash for, because if you look on the diagram, the last two rows are these two roads, and it's going to start the to line and end at the four line.

  • So let's refresh the page here, and you'll see that's taking up the last two rows of this section here in CSS cred.

  • Each box is considered a cell, so each of these colored boxes on screen are considered different cells.

  • If we use justify self, we can justify and align the content within the cells by default.

  • The property is a value of stretch, which will make the content fill the whole width of the cell.

  • But for this challenge, we're going to try a different, different property.

  • So I'll do justify self.

  • And instead of setting it to stretch, which is the default, I'm going to set it to center.

  • We could also do start or end, but if we said the center, you'll see that this has been centered within the cell just like that.

  • In the last challenge we used justify self, which aligns horizontally.

  • Now we're gonna align an item vertically using a line self.

  • It works pretty much the same way.

  • So I'm gonna put a line self and then I'm gonna set this to end.

  • So now if we refresh, you'll see that this aligns vertically too the bottom of the cell.

  • If you want all your items in your grid to share the same alignment, you can use justify items on the parent container.

  • It uses all the same values that we saw before.

  • So we'll put justify items and then I'll just set this to be center.

  • If we refresh, we'll see everything has been centered.

  • We saw that justify items aligns all items horizontally Ah, line items aligned all items vertically again.

  • You put on the parent container, so put a line items and I'll set this to end to set.

  • So all of them a line at the end of each cell.

  • So we see they all go to the bottom, which is the end here.

  • We've created an area template.

  • The cells have been grouped together using a custom name you'll see when you look at the rows and columns.

  • There's three columns and three rows or nine cells total.

  • And that's how many words you'll see here.

  • So each set of three words and quotation marks is a row.

  • So that's the first row, second row, third row, and you can see each work corresponds to a cell in this layout here, so you can see the 1st 3 are now designated headers, and then we have an advert and then to contents.

  • And then the last three are the footer cells.

  • You can use a period to designate an empty Selma grid, and that's what we'll do for this challenge.

  • So instead of the word advert here, I'm just gonna put a period.

  • And that designates as an empty cell.

  • We saw how to define our temple areas here in the last challenge.

  • Now we'll learn howto place items in a specific spot in the grid area, So if we want to set item five to be in a specific spot, will use the grid area property, so grid area and then we just put one of our customs name that we define below.

  • For instance, if we set this two header on, I refresh here, you'll see the number five has popped out of its normal location and fills up the entire header.

  • It fills up the entire header because there are three items in the header and there's on Lee.

  • Only Item five is set the header.

  • So it fills up the whole header for this challenge.

  • However, we're gonna put it in the footer.

  • So I'll just change this name.

  • Two footer.

  • And if we refresh again, you'll see that the item five takes up the entire f

Hello.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it