 Hi there my friend and friends. If you know me, you know I love CSS, but one thing I often advocate or is actually writing less CSS. People are often over-engineering solutions and running into problems. So we're going to take a look at this absolutely beauty of a website that we have right here and see how we can write the least amount of CSS possible to actually make it look half decent. Let's go and jump right on over to VS Code. You can see HTML is there and here I have no CSS whatsoever and for me the first thing is and it's always the issue is we actually have a responsive site right now like if I make this smaller everything's going to work except for the dark images which always cause overflow issues and that's a you know always a bit of a pain in the butt but we can fix that nice and easily with a max width on the images of 100% and often we will also do a display block because it gets rid of that little annoying space they can show up under them and now I actually have a responsive website. We might run into a few other issues than image though so you might want to throw like SVG in here as well maybe a video and maybe you find something else along the way but often this sort of covers most of the bases that you might run into and this is a really important thing I talk about this in a course of mine and it's one of those things that like with this you basically made your website responsive and so like when it breaks and when it's no longer responsive everything's working it doesn't look nice but when things break and when they're not responsive it's actually because we wrote the CSS that's causing those problems so first thing we can do is that now we want to obviously make it look a little bit nicer so another thing that we can do for that is we can just change the font family right and so I'm just going to go over to system UI we won't put the font stack or all of that in there let's just throw a system UI in there looks a little better we can improve that again with a line height increase because the default line height is a little bit small and also before I hit save on that just increasing the base font size a little bit maybe that's a bit too big but something like that we're sort of get ballparking it a little bit but we're getting there already much better not perfect but much better it's a little bit bright I'm a big fan of dark modes so what we could do here is let system preferences decide so on the html I'm just going to do a color scheme on there and I'm going to write light and dark and that just means that the browser can figure it out based on system preferences and an ideal world will also have a user toggle to be able to choose between the two and this even sets like dark mode for your inputs and your buttons and everything as a base for the user agent styles which can be really useful and again if someone system preferences were light it would switch back over to the light theme so that's kind of cool right there for me because I just went like super basic we just have a main with all of our content I won't even add anything here though you might want to use a wrapper or container class instead of this but I'm just going to come right here we can do main and we can use a little bit of CSS modern magic even though we can do this with three lines of CSS if I didn't do that but we're going to use a min and let's say we want it to be like 65 ch which is characters wide or 100 minus like 4m 4m is kind of big there and then let's just throw a margin in line of auto here and it's centered on the screen maybe we could even pump this up a little bit like 70 and now I have a responsive site it doesn't look amazing but it doesn't look terrible and it actually probably looks better than a lot of websites that are out there already and you know we can open up the responsive mode here just if you're new to web development in your dev tools this little button here if you're in firefox it's on the other side safari has a bit more of a contrived way of getting to it but it's all there and then we have a perfectly responsive website that you know it works at all these different sizes there's no big issues everything's functional and in all we wrote maybe 25 lines of CSS and then from there we can improve upon this but all of this is to say you can get a really good starting point with very little CSS