Learn SASS from scratch | (Syntactically Awesome Style Sheets) (scss) | Nevil Blemuss | Skillshare

Learn SASS from scratch | (Syntactically Awesome Style Sheets) (scss)

Nevil Blemuss, Front-end web developer

Learn SASS from scratch | (Syntactically Awesome Style Sheets) (scss)

Nevil Blemuss, Front-end web developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (49m)
    • 1. Promo course overview

    • 2. Course overview

    • 3. Sass Introduction

    • 4. Sass getting started

    • 5. Getting started with Sass - Sass Syntax

    • 6. Using variables in SASS

    • 7. Sass Nested Rules and Properties

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Sass (which stands for Syntactically Awesome Style Sheets) is an extension to CSS. It doesn't really change what CSS can do, you won't suddenly be able to use Adobe Photoshop blend modes or anything but it makes writing CSS a whole lot quicker and easier. These tutorials will help you learn the essentials of Sass starting from the basics to an intermediate level. These tutorials are broken down into chapters, where each chapter contains a number of related topics that are packed with easy to understand explanations and real-world examples.

Meet Your Teacher

Teacher Profile Image

Nevil Blemuss

Front-end web developer


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Promo course overview: 2. Course overview: Greetings to you all My name is novel. Paul Allen, senior fronted developer and a self employed Web developer and assisting engineer from Kenya. Welcome to my SAS Cose. Andi. I'll be your future to all the schools. So you org's idle for preaching yourself. You want to write C klinsi asses cold. You want to make ceases called most simpler and efficient than you are in the right place. Sources. One of the top fronted Styler used by almost all developer that design where you are and also other applications like mobile application. As you can see in my chat here, Web applications that use says are 70% and one that doesn't choose Acer's are 28% independents with what the developer just lights and way. If you're watching this video, I presume that you love you are, youse says. So. As you can see, cells is more favorite. So in the schools, we are going to discuss variables that types, operators functions, mixing nesting, inheritance and import. So, guys, before okay, if you wanna. If you take this class what you'll be able to do in transpire. Cisco to see uses you to write your coat dry import cold from once is to other and use verbal rages formations and makes things through ultra cool. So before you take this course, guys you should be familiar with, CS is and seizes three, which is we're rating also shows on being transpired to see this narcissist three. And you showed also before Miller with HTML and HTML five, which the's where Will was stalling our hasty male page using source, which is to aspire to our seizes. Three. So I hope you will join me to this journey or flooding search and hope to see the next video. 3. Sass Introduction: greetings, everyone, my enemies never Paul, and I'll be a tutor through all these Siskel's. So you might be wondering, Why should we use says, rather than using CSS so sis makes will work much easier and the difference between substance, CSS says. You can use functions. You can use variables. You can. You make sense. But she says, Darling, Allah will it. So in this video, I'm just going to discuss what sissies and the water notes houses works And finally, l assure you example, over Syntex. Well or South syntax and a CSS sinkers after transpire. Also says is a series of superpower, and it's a mature and several great ceases extension language in the whole world and substance for synthetically awesome style sheets. It does not really change what CSS these are you and you won't suddenly use, like for a show out of for show Oh, Adobe illustrator All Art of Premium or after effects to blend in some old Zberg or anything, but it makes waiting ceases whole lot quicker and easier. So in this coast you're going to learn the essentials off source code starting from the beginner level two on intermediate level and the course is broken down and two into chapters where it's chapters contain number off related topics that are packed with easy to understand explanations on We Will example so or it's Yushin No guys. Usual hovering year on world Ceases is on DA what? Html. East, so that you can police to proceed to proceed with these courts. So I'm just going to explain how search works. So using a says you need to use SAS Spree were pre processor to translate this source code into stern. It ceases persons is no stress filing and after transpiring, the code to see says This is when you can link each with your hasty Mel pitch. Using link element in Haiti melt so it can be sensed. It can notes be sent directly to the grocer because the Brazil won't understand wash languages thes. So it needs for us to be transpired to see assist, then links to a hasty mall, Then this when it will know what's way trying to do so. Transportation is very much like, well, compile Asian. But instead of transferring from human, readable source called to machine readable object called, it translates from one human readable language to another in this case, from Siyassah US to CSS code. So gays, I'll show you an example Off south, Syntex switches decent that's propping up the screen. So what, if then have displayed a variable here and giving it to color code and declared another variable, which entering to make it lighter so it lightens 20%. Then I create a class we should give it to color off these verbal secondary, and I read that class reaches development. Disable I mean again and give a car off. No active when it is drawn, spiraled using any that you want, you can use a the notes us woke up. So it's cartels are to be mania bottom color. But these and the several bottom qualities so water that we declare variables and passing toward, says cold. And it has been transported to a season school and these words reports that can reach so Internet video. I'll be showing you how to separate, set up on environment, Chou says, and start quoting, Thank against full watching and sealed out of you 4. Sass getting started: Hello, everyone. So this video, just be about water to think that you're supposed to have like and get started with Suss cell for their three things and boosting things include a text editor and terminal and them three year no MP in pocket treated the notes of so on your show games. How are you going to get these in yellow? OPC and so that you can guess that you access. So I'll be using visual Student called Al by text editor because our before the six become because we heard the terminal integrating means so you can just run a command and see everything eating these visuals to clubs. So the second thing is okay before I go to that. So if you're using windows, you just take $1 for Windows wannabe along these officials to come because as you can see our earlier habits in my OPC self, you just quit Kandahar from just using those abusing any other virgin system, just like on this hour. And then Julie reach purchases amusing and don't at this table Russian. So that's and after stopping these, you can just watch the video and the soldiers and after after starting priest DeVos. You Most powerful. We were telling the Jets were using these details. A terminal algae. How you can use it, the more we shows to their code. So you can see here. I'm using my regions recalled building projects. So just like on this download and, well, there are geeks while downloading it's you just come you in these screen appears like adjusting your pup environment. Just click on these job titles shown which cities is jeet on optional UNIX tools from the command prompt. These allows us to use these genes as trading commands. And acting is a term, you know, that's all. So after that, their arrest remain people so justly commits next makes and finishing stalling that. So tell thing. Okay, After installing bees, which won't rankles, there's on one thing that you supposed including are setting the jump, Jason. So what we do? We just go to appearance and we go to professes and setting just like that and such in capital. Okay, Okay. Let me just such an terminal. After searching in capital, just scroll down to where you see the Jason beat setting fire settings, Jason. Okay. And after that, I just pissed design in these videos. Description. All these posts, um, exclusion There. You can get it after you copy from the coal description. Just come to your setting, Jason. And pastries after these of integration, integration, shell windows really insistent that, you see, indeed, extol. Well, it'll be a surprise, the default on so that we can use thes. And after that, just close your bishops cold like that, and open it again so that you can find it. So, um, integrated in your terminal. So after that, we go to the final step will be installing Michelle's, though the notes is what we do. We just create anything, folder for projects and say, like, sells tickets. They gonna beat, watching want. And after that, we came to a terminal here, and okay, we come to which you'll see according opening your projects, which will see open folder, and, uh, we just choose on where we going to open our folder to so he's gonna see we choose on. Just be a big stuff and substitute them. So for me, just like that was going to see to Dan that's over. Have anything there on shoe gaze is how you get these notes is installed in your, um no Kourtney. So that you're going to do so we just open our coming up new terminal, and then after that, we just see and he down needs some Read a file, Okay? We just make it bigger Folke and okay. And B m in needs over that. Reaching a market that is intact. You can have these, um there npm package installed. So the pocket name we just made Region said stoops over gets press in tow. Which queen is a restriction and to point in the past? Richard Viguerie Keyword says dudes like that over Nevil. I didn't like anything And lights and sell using my G. Okay, Okay, scraps. Check that and see person. Okay, so I didn't see your bucket, do some of Crete's and stole. These Texans create any solve am PM, the nonsense back in. So we just stating empty. I just threw these empty out install node. It's like that. It could take a while, so I'll just have to pause this video. Get back when these MPs when these notes is being included in our package Adjacent. So So, Guys, it took me like, let's say too many to install the Nazis. So after doing there, who you just come here and you'll see a no modu and well looking need in the mobile. All these are big dependencies. So you just look for no note since you'll find it here in the notes. And so what we're going to do, we just like to read a scene. False, critical, You know, NPM power in our pocket The Jasons that help us trance file The cold notice called. So what we do right now, we just create two fouls. First two files from Folder first just with this yourselves older and just leave like the OK, I just read all the Seasons folder and greater file Name it like Maine or else uses it. Just trying to make sure that it's walking so others rating cohere like let me say it. Simple college. Always it's going. So you say margin and writing Margene. I just zero pick So and when we say that right now, it will transpire, and I wouldn't be using them when we use it in our most like, every using a next door. So he or the hitching rail and just print on file here in its HTML. I just do that. So when we go to Brooks, I'll images visit term just opens. Okay, What we do let me let me just know show you right now are sharing a video. So one drink You say that we can deduce thes s here Says, you know, history will file so I'll just show you how to transpire. This will just write every code here we just stuff like service. And now who Come here and typing Know that? So what we want to do we want to watch, though we first that with very chary soldiers taping S C s s We want it watch. So we see what's And we wanted to uproot okay in a CSS folder, which is she isn't just like that, so I'll just save. It's working based on and clothing. And right now I'll just create another cold here juicing party. So if he doesn't walk by the secret my code so saving. Hey, Mousing. Oh, Okay. So I didn't run npm Ron a c. ASUs. Hey, Chicky Bronze us and B m rock. Okay, the court itself code. So we do we just write down on sense, user? No. Such further, truly see open six. Um Okay. Oh, I had a little pocket of Jason. Okay. Every start, my pocket. Decent. So I just again Granby Common. Just just the operator. So just at least and that So let's see if you will watch before doing what we wanted to do . So I just come to my s. This is and just released and savings. But as you can see, it has created our assess SC ASUs file automatically folder dramatically in the file on Berkeley One real country we see Aussie ASUs has transpired so we'll use diseases Will think of this uses to a file here. So there's will we be using somebody? Is this how you get out of it? Says so if you really have these, if you really have these and these here and pocket the geese on the corn region here like these don't says the follow folder It's the source Farley store on each Watching transparent is to our seizes Fuller. Then you can have everything working out 5. Getting started with Sass - Sass Syntax: have a very welcome back to the surface schools. So in this video, I'm just going to talk about are so Syntex. And before we write any Cisco re supercell on the basics off So Syntex And this is what I'm going to talk in this class of such transparent supports Two different file types and these are dancers and dote a ceases each We just all extension and sinkers. So this well, I'm just going to about Don't s CSS into is s thesis eso the basic structure off this sort of SS index is identical to see seizes everything you already know about that a boat or how to write CS is rule still applies in these CS is so effort. If you can persist straight seasons to so stress, father and I'm assuring you it'll work because, yeah, the colds are somehow leave he free person. CS is called two sisters Bella Drew walk 100%. But if you're pushing a CS is, um to seize is just really I'm sure it's not going to work, obviously because, um, these are a little bit different about rating. So Syntex and these where I'm going to show you. So therefore, things that we're going to discuss And these are Inland Commons Power Power and Toki Anesta rule and parent selectors. And finally there Nestor Properties. So the first thing I'm just going to show you how it right in line. Um, in comments and Pisa This these are writing in comment is the same afraid in CS is home. And so it's not a difference. Just something simpler to show you. So I'm just going to I'm here and show you how you can write the so First of all, make sure that before you write your CSS ceases Centex, you're supposed to run these here that this creep that you were here, they notice script. So by Rainey's you just write typing N p m. Ran says. And if you open this tunnel, you just come to your terminal and say new terminal, then your country terminal and taping NPM Francis and wait for these here to appear. So it shows that the script written here too will be ready. Here's the left entrance failure. Quote to eye sees us fully so I'm just starting way shooting outrageous comments. And the first thing is you don't say months raging seas is coming. Just come here and see reasons my my comment just like that and you're gonna be coming. It's not nothing difficult. So these coming out responds to your series is called So if we come here and see overseas is put you see that of the season of the Comet of Interest file. But there is these Allah. Commenters cannot be transferred because Jesus, us or it ceases coming toe. You figure these savings he's Earth Danger. Horman's Okay, wondrous able file and come here. We wouldn't see because these are STS has come. So there two types is this comment and there's this comment So that's all that we're going to discuss. Herbal coming. So I just use this comments to committee or what we went through. And again, the maxim that we're going to learn is nested rules on Esther Rolle Just being there. Mr. Rule helps, you know, just to repeat yourself or it overrating court like running double. Let me just show you an example. Let's say I'm using CS is then we just call that amusing ceases. There's a waitress writing R s uses to seize this file so I'm just saying that limit Just use name and here I it's child is just called a close child on By reaching like that, I have. So when we were in front, doesn't say Can you speak so I think it was interest proud to resistance Could sold is the same. So we won't use something different. We do want to be repeating these over and over. You want, say over over. So Allah just carries out here and telling that and come increased its in here. So we're we cross bow was to get the same cold here because okay, haven't safety. So let me just say the code the entrance village We still get the same quality because it's the same thing when you come to a cease is the same thing. And when it comes to see a so you can transfer oil is to be so this kind of buried by html page. So that's all about Nestor rule. So also you can just use if you're branch of living, it's you can see and we do that in C street. I always say for people and you see the worry. Come here. You see, just terms, probably grandchild. So instead of ours coming through and see, like name this Children's name and jobs seem g dis using and see from side just over, these here increased it. Here we say they work together something. Here we go here. So instead of writing these and repeating yourself, you can just use necessary rule and it makes you walk easier. So the next thing that revenged talk about which is going to use it here because it's the A parent selector so current. Let's say that you want to use over and active, and whatever you wish use on, you don't want to use it. You don't know how we want you going to apply it here because you know I don't repeat yourself. It may really to assess another class incident of the class. Oh, or against you haven't using Amberson in, um, percent is what u Z as an under. So when it comes to issues is its scaly with different because we're just going to use it as a parent name. So just the meaning. When we transfer lit, we see that we get name child grandchild, as they say takes these also umpiring teaches these and the whole worried. So when we come here t um used here makes a that team we see Carla. Sorry. You, When the Civil War can come here, you get the same thing. He takes these texts. This is a firing. So this is how you can use burnish Victor, which is the number said so, whatever you want to use at TV and hold over and other selections here, you can use these 1% 2 point your party to field. This is how you use the in dying commons. The part the nest of role choosing here under parent role choosing the soldiers commended and say Arun's rule, which is the just read and read with. So the last thing that we're being strict about is the nest. Okay. The nested property on the necessary property is know what you think on? It's almost similar with Mr Rule by what we do here. We don't want to repeat yourself like, for example, say from treat formed one say's fund off the phones transform these a simple way that you can do these. Let's say that we want to use it here, so I'll just commentaries and say, guess used a CS is calming to just say, Let's say once a phoned using, um nested. Yeah. So what we're gonna do You just going to see forms? I've been closed, my common. So I'm just going to be back right now, so Hey, sorry. So I'm going to do right now. I'm just going just take form since Why use phones on direct? Just like red. So wherever we put it in here or table watching here, I just want to get you. So they say I want my phone says do you can't freak. So under one, my, uh, friends from three keys monthly. You weren't too. Let's see rates to be young being hungry. Work never Come here, Gates. My father's not saved, so I come here. It should be here. So as you can see form stressful phone tweet on bond. Let's get phone trees front transform and formed side. So also musings with tastes are being immigration. You see underline and the Surrey Gerry's extra insulin. Just think Jews And here. Sorry for Hillary confusion. So your Sears transform other line. And, uh hey, sorry. Overflow. Things do very read. So when we come from? You know, what I see is this court. We get everything region here they text the commission to stir for ticks off the runway. 10 phone size. And also we can have a friendly fallen farming. Sold his duties. Yeah, And we say Come in just like that And do Sounds sorry. Just like bad. And we're we can pickle from all parties would give everything region. Is Geisel worked till landing thes basics off us. So Syntex and reaches a We were lying about seizes notice us So it s season singles. We the basics are in line Comment A parent selector and, uh, Lester Rule and Mr Property. So hot guys have enjoyed And you've learned something. You just keep practicing and I'm sure you have everything. 6. Using variables in SASS : Hello, guys. Welcome back to these sorts Coast. So, the today's video, we're going to talk about variables in S E ASUs two quick, much talking. I'm just going to show you example how you're going to declare variables in SS is then use them are in your, uh, ceases called so that you can I'm Rachel cold, dry. So how do you get your learning source that you're gonna write your cold without repeating yourself? And also make sure that you understand what you're doing so possible I'm going to define admirable here. So we're just going to straight the point. I'm going to define admirable here. No, Nas, let's say BG these air background. So in short of a burger, and instead of writing, um, colors like these here repeating yourself by writing this color, you just declare verbal here BBg then you use it So eso I want to play with the transparency of these. So whatever the will just say our which is there are be rgb of the background. So I'll come here and say rgb a just like that and are my variable here be BG then Colmar and there's your 0.85 years say I want to play to translate, to be dropping 85 soldiers like that. So what? I'm already come You here. I'm just going to affect the body. So I'll just say booty because to, um, background color. But by one color it was to arm RB Just looked back. Then whenever we save, make sure if you want to transpire I'll you, um, source code to see assists. You're supposed to write these npm run, and these is reading. The script is reading here, which is so snowed search sauce writes output assets with Cisco. I'm just going to save my work just like these. So you watch here, you'll see rendering complete saving dot CSS file. So when we come to our senses while here, which is in our our sits, we're going to find that leaders rented out decode and reason here. So when we come here and refresh, your page will see that it has affected our page so you can see these house. So what I'm going to do, I'm just going to show you guys how you're going to have a clever But in another page, let's say you want off a page off. Um, that's a variables just like that. SCS is. So whenever? Well, I'll just take these horrible that have defined here. Cut and paste it here. Just like these on. I'll do with these here. So the next thing you just supposed to save this file so that you can get any change that you make and ah, next day if you come here and see, um, imports important. So So snows housing for the sole issue, Not worry. So you say import assets, then we pass in the variable. So just like that, So everything is important. So when whenever we saved this year Okay, impose and polled not found. Okay, I think I first in the wrong part. So just passing that asset CSS and no, no, um, support to person ink, not assets. So I'll just crossing Inc. Then we get a very well, just like that. Sorry for that. And we'll never received. We should get these. And whenever we come to a page here and refresh it again, um, she'll get everything working of the same. So everything is working the same. So there's another way you can declare verbal in a different Let's say you want to declare operable. We want to change these here. We want to send to these here. So what we do, right Here we come here, you see? Um, se center. We see. See? Center. Okay, so we're gonna save that. Here we come here and see inside here. I just come to my html page to see how we were rented. So inside my body, I'm just going to person hatred and we say that text and say a line. Then we passing the horrible CD should work just like that and see, for once, I want to guys to see how I'm going to play with a verbal here. So we say the fold side which DF side you say 24. Just like that pick. So? So just like that on bond again. Here we say phoned. Sorry for these. Supposed to come here and see? I don't know. For me to say font size we say what we did cloudy here. So reaching default. Just like there there will be four sides formed family then, um, Sam, we say like, um Okay, Well, yes. Used calibrate so fame. So we're gonna see either using variables here, so I want to make sure. So we're getting are found on readable exhibitor gain, huh? It's no founded a firm. So let me save my walk first, then me and save it. So yeah. So everything is working all right? Sometimes when never see a ceases when does the, um um whatever notes so surrenders our size, He throws some errors. Bunch. Whenever we use every sensitive again, you'll get good value. So what shoes was do? Whenever you encounter these error is almost 77 So if you see that these air persists, then you check your coat. So I just go to my page and see if we've got to change is done. Mm. So let me go to my C s. A strange Ah. Oh, bottom guys. Okay, I was doing the right thing here. So So when we come here, we say we see text line. So this is what I wanted. And as you can see, it's all done. So when I come here, refresh my page, everything walks. All right. So that's how you can use variables in another page by importing it like these. Or you can use these variables that you've defined here, you can use its your page without including anything in D tools still work. So that's all guys for this video and hope to see that it's a video. 7. Sass Nested Rules and Properties: Hello guys, it's never ball here and welcome back to this end, this video we're going to talk about SAS Nestor rule says, lets you CSS selectors in the same way as HTML. And when we talk about these, as you can see on the screen here, we have HTML call retain is just our simple HTML origin is a property of, let's say elements our div with an ID of main-content class child and B, that's a paragraph tag. So as you can see here, we've written all these in Nest. Answered each other in writing anything instead each other, that means that you're writing in S. So in this case we're talking about search. So SAS allows you to write something similar to these. So let me just jump directly to main.css. So first of all, what you should note all the most important thing is you run these here by typing npm run search. And as you can see here, these where we have our pocket Julia bucket into JSON. So what you're running is the script here. So, yeah, So in this case I'm just going to write a simple coordinate of margin, margin 0 pixel. I want you guys to see what's happening and padding 0 pixels. So not a difference on our births are what we're going to do is we're going to give a body bug round-off, orange red button color. Orange, red. Just like that. So we have that there. So all we're going to do, you're going to do, we're going to check on our code. So as you can see, this is what we have. We have a background color of orange red, and this is our page here. So the next thing we're going to do, we're going to try using the nested. Are we talking the ness that we're talking about? So we have id, main-content inside our body, so we get nested inside our body. So all we're gonna do, I'm just going to write hashtag and say background, color, white. I want you to see the difference. And our next thing I'm going to do, I'm just going to give it a height of 100 vh and we, oh, let's see, 80 beak. So okay, and position. I'm going to give it like absolute, relative. Sorry, relative. And margin, so that it can be at the center. Margin. Auto. And what else do we have to define? Okay, we have that so, well, which ago, HTML. You get the so I wanted to write must set. Pixels. So we have that and you see we have the div id main-content. So the next thing I'm going to style ease our child class. So we're going to copy that and come here, then, place it there. Then we say like hide of pre anaerobic. So, okay, we all also through our pixel, we want it to be a square. And also we say like background. We're gonna give it a bug rid of orange, red. So they can be like it's cropped off from there. And also we're going to, we're going to watch else are we going to do? We're going to give it a position of absolute. You'll see the reason why I'm doing this. We already should be at the center of the page, so and also left we gave it like 50 percent a top. We have it like 50 percent ethanol. We're going to use transform and translate these to negative 50, negative 50, so drawn farm. Now we are translated. France translate. I know, I see there. So I'm just going to fix that when I'm down is negative 50 percent and negative 50 percent. So the error here, I forgot to close this. I forgot to close this. K So translated to these and we've OK, OK, OK, So we're going to save it till it renders because no, I'll call these. Okay, so I'm just going to click on that as you can see, we have the centered here. So the next thing we're going to do, we're going to style our hello world is that it can be a B, pleasing and in the center of the page. So what we could do, we just write b and we say like position, absolutely You'd, because that's the first thing again to do absolute. So I'll do, I'll just copy these one here. Since it's similar, I'm just going to paste it here. And our next thing I'm going to do is just to click the tub Parson and color shall be y. And what else do you need here? If colleagues white? Oh, hey the nest, the other properties, we're just going to do it after we see. What is that, what I'm trying to talk about here? So as you can see, we have our helloworld at the center, as we wrote in our SCSS core, we have these child at the center and also you have these center and we have our background chains are orange, red. And all these is done by NES. Third rule in SCSS. So when we check oriented document in CSS. Css documentary see like it's rendering out or CSS looks like. And this is pure C says being rented from main.css. Okay, so that's all about nested row, Circe Nestor role. So the next thing we're going to talk about E says nested properties. And these a bit different. We're going to say a little different with nested row. So when we talk about Circe nested properties, let me just say this. Many CSS properties have the same prefix like let me just give you guys a given example of font-family, font-size for weight, et cetera, and also text align, text transform tricks of a flow, et cetera, et cetera. So as you can see, these are the things that is repeating them self-injury are, we want to write out as C as our SAS code dry. We don't want to repeat yourself over and over again so we can use those unmeasured properties in surge UCSC in these div again of CSS properties. So what I'll do, I'll just show you with this example here. So I left dissolved in our previous example that we did. So I'm going to do it here. So we want to change the font color, font size, font-weight, and font font family. So all we do, we just, just do this. And we say font-family. Family. To be. What form do we do? We usually use. Okay, now let's try the font size. Okay, let's right size. I don't have to repeat myself. That's the reason why we're using size. Phone size. We have like 20 pixels, font-weight, bold. So we have that. So when we save it and check our CSS, you'll see we have font family, font size and font weight. But in this case, I don't know if it reflected here. As you can see, we have a 45, we have font size of 20, and we have a font-weight bolder so that these 0s size nested properties. Soldiers show you another example here about texts. So I'll just write text. And I really like the way says made things simple. So the next thing we're going to do, we're just going to say texts align and we're just giving it like justify. Just like that justify. And text decoration. Collaboration. Declaration to none. This is just an example. I'll ask why using or we come here, we see text-align and text decoration. So this is what we did is what SES, nicer properties is all about. So thank you guys for watching and hope to see you in the next class where we'll be talking about. So import.