1 00:00:00,200 --> 00:00:00,650 All right. 2 00:00:00,650 --> 00:00:04,610 And up next, let's set up the global styles for our application. 3 00:00:04,820 --> 00:00:05,600 So. 4 00:00:06,280 --> 00:00:11,410 In order to build this project, we're going to use styled components because that's my preference when 5 00:00:11,410 --> 00:00:13,100 setting up the CSS. 6 00:00:13,140 --> 00:00:14,140 However. 7 00:00:14,890 --> 00:00:22,090 I also prefer setting up global styles and essentially that is a CSS that I take from project to project. 8 00:00:22,120 --> 00:00:26,740 Now, in order to set everything up, we want to navigate to the assets. 9 00:00:26,770 --> 00:00:32,049 Again, hopefully you have all of the folders, so the CSS images and wrappers. 10 00:00:32,049 --> 00:00:37,080 If you don't, please rewatch the previous video and follow along with the steps. 11 00:00:37,090 --> 00:00:41,950 And here we're looking for the index CSS, which is sitting in the CSS. 12 00:00:41,980 --> 00:00:43,660 Now, this is totally up to you. 13 00:00:43,660 --> 00:00:49,330 If you want to move the index CSS to the source one, that's totally an option. 14 00:00:49,420 --> 00:00:54,670 Or you can simply copy and paste, which I think is going to be my approach. 15 00:00:54,670 --> 00:00:58,750 So I'll navigate to the index CSS in the assets. 16 00:00:59,140 --> 00:01:06,820 I'll pretty much select everything, I'll copy and then I'll navigate back to the index CSS in the source 17 00:01:06,820 --> 00:01:10,300 and I'll paste all of the code over here. 18 00:01:10,600 --> 00:01:19,430 And as you can see over here, we have route and inside of the route selector, I have all the CSS variables 19 00:01:19,430 --> 00:01:26,930 that I use and also there's a bunch of styles that I just applied to the entire application and take 20 00:01:26,930 --> 00:01:31,040 from project to project and effectively this type of setup. 21 00:01:31,650 --> 00:01:36,050 Just saves me time on the CSS. 22 00:01:36,060 --> 00:01:41,960 I need to type because I don't need to start everything from scratch each and every time. 23 00:01:41,970 --> 00:01:46,920 And I also noticed that it allows me to type less lines of CSS. 24 00:01:46,920 --> 00:01:55,170 So basically because of these global styles that I have, whenever I do need to apply the CSS since. 25 00:01:55,810 --> 00:01:58,780 Most of the CSS is already taken care of. 26 00:01:59,430 --> 00:02:01,890 I need to type way less lines of code. 27 00:02:01,890 --> 00:02:07,530 And as a result, since I don't have to set up everything from scratch and I can type less lines of 28 00:02:07,530 --> 00:02:10,830 CSS whenever I do need to style something. 29 00:02:10,949 --> 00:02:14,400 Of course it tremendously speeds up the development. 30 00:02:14,430 --> 00:02:23,430 Now, if you have any questions about these specific styles, please reference this video where essentially 31 00:02:23,430 --> 00:02:29,520 I cover how I set up such global CSS from the very scratch. 32 00:02:30,030 --> 00:02:34,380 And this basically leads back to my YouTube channel coding addict. 33 00:02:34,380 --> 00:02:36,850 And again, you're looking for this video. 34 00:02:36,870 --> 00:02:39,090 Now there's also a repo. 35 00:02:39,620 --> 00:02:41,000 Where you can find. 36 00:02:41,560 --> 00:02:45,340 The global styles that I use from project to project. 37 00:02:45,460 --> 00:02:48,580 And at the very end I'm going to move read me. 38 00:02:48,760 --> 00:02:56,410 So read me markdown file to the source again if you want to leave it in assets, that's totally up to 39 00:02:56,410 --> 00:02:56,890 you. 40 00:02:57,490 --> 00:03:03,970 In my case, I'm just going to move it and set it up over here in the root of the client. 41 00:03:04,240 --> 00:03:09,790 And once we have the global styles in place, notice we'll have a different look. 42 00:03:09,970 --> 00:03:12,010 Basically, we have some background color. 43 00:03:12,010 --> 00:03:14,830 And also our heading right now is smaller. 44 00:03:15,130 --> 00:03:18,340 And now we're ready to move on to the next step.