 My name is Kevin and I'm a friend and developer who primarily focuses on CSS and I'm going to be answering the most common CSS questions, at least according to Google autocomplete. So yeah, taking like the wired autocomplete interview and doing a budget version of it here for some CSS questions. I had my wife prepare some for me. We can reveal them and answer them, maybe dive into the code if we need to. And we're starting off, we have a few different categories to get through. First, can CSS. So what can CSS do? I'll try to make sure they're big enough for you guys to see. We'll zoom in or something on these. And let's take a look. Can CSS be edited in Photoshop? This is not the type of question I was assuming we'd be getting here, but no. At least as far as I know you can't. I know at one point they were doing a thing where you could, I think, get some CSS from Photoshop that was absolutely terrible. You can even do a save for web that would save a table-based thing, but then there was another thing, a little bit like Figma's CSS actually. Don't use any of that, please. It's not good. But yeah, I guess you could... No, you can't edit. You cannot edit CSS in Photoshop other than taking a screenshot of it and editing that, I guess. I don't know why you'd even want to, but yeah, no. Next up, can CSS be used without HTML? Be used. You could write CSS without any HTML if you wanted to. HTML is the content, and then CSS is what makes the content look the way it does. So it's a little bit like if you're in Word and you write a whole bunch of text, and then you're selecting it and changing what it... You know, change your font size, the color, position an image somewhere. You're doing different stuff within there. That's sort of the CSS side of things, whereas just putting the text in and putting the image in, that's more of the HTML side. So you could write a whole bunch of CSS without any HTML, but it just wouldn't really serve a purpose. It would be like being in Word and setting up a whole bunch of styles in the settings, but then never using any of them. So yeah. No, you probably wouldn't want to bother. Can CSS be written in Notepad? Definitely yes. It 100% can. You just do a file save as, make sure it's a .css at the end, and it will work, but don't do it. Way back when I started, I did, because I didn't know better, and I don't know what other options there were, to be honest, but there are better options. There's text editors out there that do syntax highlighting and stuff like that. So there's even something like Notepad++, which does the very basics that you might want to use, but even that, I wouldn't really recommend it today. There's much better options. VS Code is what I use. I'd recommend it. It's free. It's really good. So even if you're really early on, definitely, there's no reason to struggle using something like Notepad that doesn't offer anything. It just makes life a lot harder for no reason. Next up, can CSS do math? Oh, yeah, it sure can. So if we just quickly jump to my screen here, we can take a look where I have an image that's set up with the width 100%. And even here, that's, I mean, kind of mathy, right? You're using a percentage and it's 50% now. And that'll always be 50% of its parent, but we can take something and wrap it in a calc and actually do real math. So I could say calc, and then I could say 50% plus 200 pixels. And now it's going to be 50% of the parent plus 200 pixels. And this is something really cool because we can actually mix units, which until we had calc, we could never do. We do preprocessors and these other things that we could do math in that would just output like a set unit. And now we have this. And it's starting to come where we can actually do some trigonometry in CSS now as well, with things like sine and cos and all of that. So like, you could actually, you know, use a cost function and do some stuff in there. From what I've been told from people that are good at math, this is going to open up a lot of cool doors and make life a little bit easier. So looking forward to that and seeing what will be possible with it. But right now, you can do those, but I don't know what browsers are currently supporting them. It's, it's just, just coming, but looking at like a regular calc and the cost does not have to be in a calc. You can use that wherever but using like just a regular calc function and doing math that you need to do. But yeah, you can 100% do do math and just use calc functions where needed. That is that section done. Now we're going into what CSS don't know what we're going to get here. What, what CSS? Oh, that's a good one. What CSS units to use. My main recommendation is usually try and keep it as simple as possible and avoid having tons of different stuff that you don't really understand the implications for. So my main thing would be often I'll even teach pixels at the very beginning, but then I realized that's a hard habit to break for people. So my, my general rule of thumb these days is use REM for most things. If you're using pixels, try and use REM instead. There's times where pixels are perfectly fine to use. But if especially for font sizes, using REM padding and all of that padding margins, I tend to use REM as well. It's a little bit weird because you, you know, you're sort of doing a calculation to figure out how big it's going to be. But once you get used to using it, and it doesn't take long to start sort of getting into the flow of it, it makes life a lot easier. Once you understand how REMs work really well, you can add Ms into the mix in the right situations. And then you can get into other units. We have units like CH, we have X, we have percentages, obviously, there's pixels that again, for small things, I often use them, but it's a bit of a big topic really to know what to use where the one I would definitely caution against that people often learn about and then want to use everywhere is viewport units. There are times where you can get away with them and where maybe they serve the right function, but be very, very, very careful with them. And they're probably there's probably something else you could use instead. I'll leave it at that. It's one of those things where it's like, once you know the rules, then it's okay to break them a little bit. So understanding that sort of the implications of using viewport units, then maybe you can mix them in where needed, but you just want to be a little bit careful with them. But I've definitely talked a lot about viewport, or how to pick what unit to use in what situation in a lot more depth before. So I'll leave a link to a video in the description. Next up, what CSS framework to use. That's a bit of a spicy one in a way. I might take don't use one. I guess it depends on how early you are in your journey as well. Some I think I say don't use one. If it's personal projects, maybe not. It's definitely worth learning how to use frameworks because you're going to run into them in the real world. So if you're just using your own stuff all the time and then you get a job and it's the first time you're using one, it might seem kind of weird. I don't want to really recommend rich one to learn. The two big ones are when I say framework here, I'm also assuming like library and some stuff, right? Because we have like bootstrap and tailwind are the two big things right now. Bootstrap sort of the old big thing and tailwind the new big thing. They both have their own trade offs. They're both sort of good at some stuff and have downsides as well. But I guess my main thing would be to learn CSS first and then start adding in some frameworks. The other side of things is it's often people will be learning other languages and then sort of using a framework to just sort of, you know, I don't want to learn or put too much time into CSS right now because I'm busy learning JavaScript. And I just need to throw something quickly together. So I'm using my framework for that. That's fine because you're not actively trying to like deep dive into CSS. But if you're really trying to learn to get more into CSS and all of that, I would recommend learning just learn CSS work on CSS because then you can switch between frameworks. You have a job that's focused your team and you're using, I don't know, material UI or whatever it is. And you learn just that and everything you do is that and then you are bootstrap or whatever it is. And then you go to something else. You might have a lot of trouble transitioning. Whereas if you learn CSS really well, and then you start using a framework, you're just like, okay, these are sort of like ways I can hook into doing these things that I already understand. And I already know how to do just using their own class names. It's more about learning how to use that system. But you know what's sort of what's powering that system. And you're just finding out how like what levers to pull. And then when you switch to another framework, you're just learning, oh, the levers and the interface is a little different, but it's all accomplishing the same thing that other one did just in a bit of a different way. And so because you understand the underlying mechanics of it, it's a lot easier to make that switch. So yeah, I would recommend to start with just a good understanding of CSS itself if you can make that commitment to it. And then just experiment with different ones and see, you know, find, pick one out of a hat if you need to, and then see what you can do with it. Yeah, yeah, I don't think there's like a right or wrong answer there necessarily. If you are deciding to use a framework, if it's to get a job, maybe tailwind or bootstraps going down in popularity, but it's still by far more used. So whatever, I don't know, see what's on the job market and what people are looking for in job applications and choose one of the more pop, the ones that pops up all the time. What CSS defines a flex container? What CSS you, the parent, the one where you just, let's look at this thing here in the code, we have a header, and I have two things in the header. I guess I'm just, yeah, I guess the header makes the most sense here. It doesn't really make sense, but we'll stick with that. So if I say header, and I dropped my papers again, display flex, we get two columns. I got a column here and a column there because the header is my flex container. And then this and this are the two flex items that are inside the flex container right there. Same thing for grid. You do a display grid, that is your flex or your grid container. And then the children of that would be your grid items. And last but not least is CSS. Is, well, this is definitely the spiciest of all the questions. Is CSS a programming language? How angry do I want to make people? The one thing I've learned, without answering this question right away, the one thing I've learned is if you say CSS is a programming language, it's a good way to get a lot of people very mad. So just for the sake of engagement and getting a lot of people commenting on the post, maybe I should say it is. Honestly, I think saying it is is a great way just to get people riled up. Other than that, whether it is or isn't, it doesn't change anything to me. And I don't think it changes anything in the big picture of things. I understand like having definitions for things is important. But my experience is most people, and maybe it's not everyone, but most people who vehemently defend or say that it's not a programming language are sort of doing it in a gatekeep way where they say things like, no, the programming languages that I know are pro those are real programming languages and CSS is just some declarative language. And they make it seem like a lesser language because it's not a programming language or within their definition, it's not. And however you want to look at it, I don't care if it is or isn't. It's a language, whether it's a declarative language for sure, that I actually I'll link to a really good talk in the description about why it actually is a programming language. But 100% please go listen to it. It's fantastic. I forget who it's by now, but it's a really good one. But the whether it is or isn't, and you know, it doesn't change that we need it, we have to write it to make websites come up. And that it's probably more difficult than people think it is when they just look at it as a simple declarative language. But yeah, I mean, it's not worth losing time and thought process and getting like into it if you think it is and it's just like, it's not because it's a declarative language or know it is because x, y and z, that's fine. Cool. Good. I don't think it's something that's worth like a ton of mental energy one way or the other. Yeah, that's I think I'll leave it there. Is CSS Turing complete? That one I'm pretty sure I can give a definitive no to. I won't sit on the fence on that one. Is CSS hard to learn? I guess that sort of builds off what we were just saying with it being a programming language with it is hard to learn. And I think that what happens is people think it's not hard to learn because it's a declarative language where you say color blue or background red and it works font family, whatever font size this and look, everything's there and it's super basic and very, very simple. And whether you're a beginner, you just learning HTML and CSS or you're someone who's coming from a computer science background or something, everybody gets into this trap where it looks like this really simple language. And then you hit this point where it doesn't quite work the way you think it should and being this really simple language, because it's not working how you think it should, it's clearly not a it's stupid or it's counterintuitive or whatever it is. It's a bad language. And the problem there is that comes up because people think that it's simple and they don't properly learn it. And then they run it, they start running into problems and they blame it on the language rather than blaming it on their own lack of understanding of that language. And I do think it is a very hard language to be very good at to understand the basics of it. No, the syntax, super simple, how it actually works and to be able to author it really well. I definitely think that's actually pretty hard to get really, really good at it. Just because there's so much to go in the mental model is so different from everything else that we do, especially because like not only are you authoring your page to work exactly like you're looking at, but everybody's on a different device that has a different size that has a different screen resolution that has a different color gamut that might be on a device that doesn't even have a screen, it's a screen reader that's going through it or whatever it is, like the web is consumed in a million different ways. And we have to be able to make something work for all of those people. And we it's full of unknowns. And I think that's something that's really hard. And you're sort of doing, okay, this is like my best guess at making this work in a way, or you're giving it like the ideal, like in the this is what it should be doing. But there's a million ways users could break it, you zoom in on the site, they have a setting in their browser, that's making the font size is bigger, whatever it is. So like, you're not dealing with these absolutes, like you often are either. So there's so much. And like the mental model to be able to work around that is so different from everything else. And then understanding how the layout algorithms work with flexbox and grid and understanding just all, you know, collapsing margins and the different, the different types of contexts that things can be in it's not easy. And it takes quite a bit, I think, to get pretty good at it. But it also is something that people take for granted a little bit and then get frustrated with. And it's not because the language is dumb, it's because they don't understand the fundamentals of the language as a bit of an aside, as someone who teaches CSS primarily, obviously, I'm going to say it's hard because then, you know, go go and follow all my stuff so you can get good at it, right? But no, I do think people take it for granted for real. And that's one of the reasons they get stuck with it. Is CSS case sensitive? Sort of. Class are the selectors are so if you have a class or an ID, the selector there, if you're selecting it from your HTML and your CSS, that is case sensitive. But as far as like writing properties and values go, I'm pretty sure it's not case sensitive. Is CSS grid responsive? Is CSS grid responsive? Yes, 100%. I think what happens is people, when you learn early tutorials, it'd be like grid template rows 100 pixels 100, or not rows columns. You set up three columns that are 100 pixels and they're just set there. So when you first learn grid, the basic demo is often aren't responsive. But grid's fantastic. It's super, super adept at making really responsive layouts. You can even do like a really nice grid with, you know, fully responsive that adapts to the screen and the columns reduce and all of that to stacking your content without any media queries. It's really fantastic making responsive layouts and I'll link to a bit more down below because it doesn't have to be complex. That's one thing with grid, you know, with display flex things, or flex box things can seem really easy to make responsive. Whereas with grid, there's like, it can seem like there's extra complexity, but you can keep grid really simple and get really nice flowing layouts that just work. So yeah, I'll link to that down below a little bit more detail on that if you are curious. And what's this one? Is CSS and HTML the same? We're ending on a little bit of a lightweight question there. Is CSS and HTML the same? No, they're not. As we said, I guess like right off the beginning, they work together. They work hand in hand. One is content, one is style, and they're two very different things that we sort of need to make websites. So yeah, we need both of them, but they're definitely not the same thing. And so there's the autocomplete questions that we had come up. I hope you enjoyed that. And if you are relatively new to CSS and you're trying to learn more about it, as I said, I've linked to some videos down below. And I also have a video that covering a lot of the common mistakes that I see beginners making over and over again. And so that video is right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome, Jan, Johnny, Michael, Mr. Dave, Patrick, Simon, and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your part of the internet just a little bit more awesome.