 Some people think that we'd be better off without CSS and to have a different solution or that it was just done wrong. You know, let's just start over cause it sucks. But clearly they don't remember how bad things used to be. So today we're going to be looking at how we used to do things in the old days versus how we do them today. Hello my front end friends. Thank you so much for coming back for yet another video. And if you're new here, my name is Kevin. And here at my channel I help you fall madly, deeply in love with CSS. And I think one of the ways that we can appreciate CSS a little bit more is to realize how far it's actually come along and how amazing the modern solutions we have today actually are. So first let's jump right in here and just look at how we had to style text. And we're going to be using the font tag for this because that is sort of how it was done. The font tag was introduced in HTML 3.2 and interestingly enough, three was never actually a thing and part of the actual spec. You'll notice actually VS Code is going to put a lot of these in this really dark brown color just because they're deprecated, but they will work. And so we get the font tag here. Let's just style this up a little bit. We want a bigger font size. So you'd use your font tag and then you could just come in here and say size is equal to and you'd put in how big you want. Let's say we want 32 pixels. There we go, we got a 32 pixels. And let's say we want it to be a different font family. For the font family, they're font faces. So you'd actually put face here. So you're really getting like font size, font face. So let's just put in cursive for the fun of it. There we go. We get comic size coming through. And obviously this worked. The problem with it is now if I want to style this one, I'd have to come and put my fonts on this P tag too and the next one and the next one. And depending on what you're doing, it could be annoying. It's a little bit like using span tags with inline CSS whereas we could just come in and do paragraph, font size is 32 pixels or even better, just a two rem on there. And then also just give the font family a cursive and we're good to go. And really interestingly actually, even though I put a font size of 32 here, it seems that on my body, when I did a font size of 1.5 or M, that's actually changed what this is coming up to. So it's actually coming up to 48. So let's just come down here and say 48. So they end up being the same which would just be, we can put that at three rem so they come out the same way. But yeah, so using the font thing like that was kind of annoying. We could do more font styling than just that. Let's turn word wrap on here. So we have our font tag that's right there and let's say inside here, I wanted some text to be a little bit bigger. We could take the font tag and then use it like a span on a styling text but I could actually come in here and use a big tag and then we could close and you probably know the small tag actually still exists but you can see that the big tag actually works there. Let's do it over two lines and we could do that versus using a span with a class today. We won't go through the whole thing on that. And yeah, what I was going to say is the interesting thing with the font tag is it came out with HTML 3.2 which came out a month after the first spec of CSS came out. So we actually did get the style tag at the same time and we could do some styling up there and stuff like that. And it's when divs came out as well and stuff. So kind of interesting that the font tag came out along with the style tag, really interesting. I remember using this quite a bit. I don't know if I ever used the big tag though. It pretty much goes from like one font size larger because anyway, I won't get into it too much. It's terrible, but you can see they got rid of it because it's deprecated. So you know, VS code is like, don't use this. All right, so next up, we're going to look at centering in the old days versus the new days. So down here I have some text and maybe we'll comment this out. And you know what? We're going to boost up the font size to make everything easier for you all to see. Let's make it three rams. We have nice big font size to work with. So now that we have the nice font size on there, what we can do is in the old days of centering, there's a couple of things we're going to look at. The first one was just using the center tag which again is deprecated. So it's saying not to use it, but there we go. We can center horizontally that way. Whereas obviously these days we could just use a nice simple center new because that's the class name I used and just do a text align center. And we can center things horizontally that way. One reason that the center tag we don't really want to use is worst case, you're just using something like a text center utility class. You can use it wherever you want without having to add a new tag every time you want centered text or you just have other styling. I use this up in my header as well, a text align center to center everything. Now you could wrap more stuff. So let's just take this off for a second so that one's not centered. I think we could actually do this and like say like this whole block over here is centered. Oh no, that doesn't work. So you couldn't even do that. So that's kind of, oh no, work. Let's close that there, there we go. So yeah, you could like wrap a big block in center if you needed a lot of things centered. I think, I don't even know if that is like appropriate or not but obviously it works. And interestingly, one of the reasons that these are deprecated but they're still working is because browsers still need to be able to render pages that were built in like 1999 or whatever when the early, early days when all of this old stuff was all we had, the browser needs to be able to render it. So we still, a lot of deprecated tags still function. We'll get to another deprecated tag when we get to the animations because it actually does not work anymore. But if we look at here, the centering, we're only looking at horizontal centering. Of course there's vertical centering as well. So let's give my center old and my center new both a height just so we can, so we'll have that. Let's just say here, center old and my center new. We'll give them a border so we can see them. Border, two pixels, solid black. All right, let's yeah, we'll stick with black, that's fine. And let's give them a height of, I don't know, 400 pixels, just so we, maybe 300. Let's try and keep them both on the screen. So when we wanted to center in the old days, what we would use is a table rather than using other ways because tables were how we did all our layouts anyway. You can see that really mucks up and breaks stuff. So in here, let's do a TR with ATD, so a table row with tabular data inside of it. And then we can grab this and drop it right in there. And like that, it magically, it is aligned that way. Of course my table width is off so we can say width is equal to 100%. And then there we go, that actually works. Now the markup that we had to have to do this is kind of annoying, but hey, it was vertically centered and it wasn't that hard to do, to be honest. Luckily, it's still not that hard to do today. We ran into a world where it was difficult when we moved away from table-based layouts, which was a good thing, even if vertical centering was easy back then. But now all we have to do, we can do a display flex or a display grid and then just, it has to have a height obviously on there. And then we just do an align items of center and it is centered. Of course, if this was flex, that would also work. And yeah, oh yeah, it is centered, but it's off to the left now because flex and grid are a little bit different, but there we go. We can see that that is working perfectly fine. So yeah, centering in the old days versus now, I find it a lot easier doing it now. If you want a whole bunch of other methods where you can center stuff, I'll link to a video down below where I look at modern ways of centering things on the page. Now let's jump into animations because animations in the old days versus animations today, they were very limited in the old days, what we could do, but there's of course the most famous possible animation, I think, or there's two. Let's start with the deprecated one that does not work anymore. And it was removed from like, it's one of the only things I can think of that the browsers don't actually support. Maybe there's other ones, if you know any, leave comments in the description, but it's our blink tag here. And so using blink, can I make this so like BLINK, I do apologize that it's so hard to read these, but the blink tag would make things blink. And of course that's really terrible and we generally don't want to have blinking stuff on the page. So even if I do that, it no longer works. I remember using this back in the day along with like my page counter. It was a visit, we had GeoCities, their visitor counters and stuff, it was great. But what we also had, which still works even though it is also deprecated, is the marquee. And look at that, marquee's maybe not deprecated, I'm pretty sure it is though. But look at that, nice little animation going. And interestingly with the marquee, we actually got a fair bit of control with it. And we'll get into some other attributes that even with the font tag I didn't look at. We have like RBG color, I think we write it like that. Let's try purple and hit save. There we go, we got a background on there. Now interestingly, if I remember right, we can't put a color on here like that. But so that means we actually had to come in here and then add the font tag. So it's not letting me even, Emmett doesn't know what the font tag is. So font color is equal to white inside my marquee. But having the font tag in the marquee would of course work. And there we go, we get the white in there. There was other stuff you could do with marquee as well. So if you wanted the other direction, it was a nice easy attribute, just direction is equal to. So if I do left, is it already going left? I guess so. I wasn't sure if it was where it starts from or where it's going, direction right, then we get it moving toward the right. So there we go, we could do other stuff with it. You can control the speed of it. The speed thing, the scroll amount is equal to, I'm just gonna put a number here, that's really fast. So let's tame that off. There we go. There was also scroll delay. And these sort of work together. It's not like a delay in how long it takes to scroll. It's something else weird. And there's also like this true speed or something. I don't really understand them. I never use marquee. So I didn't really feel like wasting time trying to dive into it. But yeah, just to say we could do it that way. Of course nowadays we can do the same thing. So I have my animations new. So we could just come in. Let's just save that. And I could just say animations new. Let's give that the background of purple, a color of white like that. And then this one's a little bit actually harder to do. So one thing to do would be to do an overflow of hidden so we don't see the text as it's going, right? And actually I'm gonna turn these two off for now so we can understand the animation I'm gonna do on here. Because if we want it working like a marquee, it's surprisingly hard to do. Of course nobody really wants marquee type stuff or very rarely, but let's try and replicate this. So I do an add key frames to use and we can do my new marquee for a nice long name. So 0% we don't need to do transforms anymore. We can just do a translate. The browser support's not perfect for this. So maybe be careful with it and let's just do translate. I'm gonna do negative 50% now. It's not gonna be enough, but it's just so we can actually see what's gonna be happening. And then 100% would be a translate of we'll say 50%. So my animations new, we can just put that on the paragraph. So animations new P gets an animation of my new marquee and this is where it's nice because you actually get control on what you wanna do. So how long is it gonna take? If you wanna delay, you could put a delay on it. If you want easing functions, let's make this like 5000 because that was crazy fast. And then of course, if we want this one to loop, we can just do an infinite here like that. No e at the end, which doesn't, is it with any at the end? There we go, it is an e at the end. So then the animation will keep on running. So now we can see what I'm actually trying to do and let's also do it linear. So it matches what we had before and maybe we slow it down a little bit more. So there we go, it's going like that. And then if we turn our overflow of hidden back on and we can put our color white back on, you can get sort of the same thing. Oh, we have collapsing margin stuff happening. Let's not worry too much about that. And then here we could do this as like a negative 150 going up to a 150 or something. So it goes all the way across. Let's probably shouldn't have used milliseconds for this. But anyway, you get the idea of what's happening here. We can sort of replicate that same thing. Depends on the size of the text and everything. But there we go. I think there's actually something for like a modern day marquee, like accessible and everything that you can find a library out there somewhere. Now, next up, we're going to look at how we used to do buttons then and now. I'm going to fail miserably at the old one because I haven't done this and so long. But there's the fun thing here is I'm going to open up Photoshop to do this because to make rounded corners on a button we had to slice things apart and get different pieces of an image to be able to actually do this and use a table of all things to actually make it work. So here I have a button that I want. I put the pink background here just to be like what if there was a background? Because usually you'd have like a full layout you might have stuff in the background. But the important thing is first you need to slice things up. And the important thing is to get these corners here. And this is assuming you wanted round corners. If you didn't want round corners, it was much easier. But what we would do is grab our slice tool which who knows where that is? Here we go. It's right there under the crop tool. We have a slice tool which I think isn't used for anything anymore. And I'll probably do a terrible job of slicing this up. But basically you'd want to grab like the corners and get exactly what you needed for the corner. And then you could slice like all the way to here. You'd need to get this into like that. And basically what I want is all the images that this would generate. There we go. Do that. And so I'm getting like all of these regions like this and then I'd want to export it. Now I need the transparency behind here. Maybe there's a better way to do it. But if I remember correctly, you needed to make sure that the background on everything when you were exporting it was transparent. We do a save for web because that was a thing. And then you would choose the slices that you actually needed. So because I don't remember how to do any of this I'm going to select all of them. And it'll give me images we can fix that after. So you choose all of them. But what's important is we need this to be a GIF. We couldn't do PNGs because I don't think I supported PNG or transparency in PNG or something. So you'd use a GIF which supported transparency. And then you can hit save on that. And it's going to give me all those pieces. But because I don't know at all what I'm doing I'm also going to switch this format to HTML and images. So I'm going to get a little bit of everything on here and hit save. And then we're going to open that up. So give me one second. So here is the table that got exported from that. You can even see on here we have a body with a BG color of a whole bunch of stuff. So I'm going to go and just grab this whole table that it has, we have the images and everything coming through on this. And I'm going to paste that in here. And I think it's going to work because I did copy the images over and it's completely broken which I'm a little bit disappointed with. I thought it would just work perfectly. Though it doesn't surprise me. I think that it's not working. I'm terrible with buttons. I don't remember how they work. Some of it, why does this have a height of 408 on it? I don't know. The problem is I also don't know which image that is. So I don't know where that's actually coming in on this table that's been generated. But the idea is you'd keep your corners. So let's do this with our dev tools a little bit. It'd be a bit easier to work. I think if you were using like Dreamweaver actually with everything, it wasn't so bad. For some reason the heights on these are terrible but whatever. I think it's because of the bigger table that actually got generated based on what I'm looking at now. But see here I have the corner. I don't want to keep that. And then all these other ones, I don't really, you could have spacer gifts actually that were like these blank images that would also help and stuff. But then like these ones, you don't actually need the image that would be in there. You just need the right height that's on here. And then you could do the BG color is purple. We probably need to have that in quotations. The color of it will be different. I think BG color could be purple but then we want to have the height on that. So it's the right height and et cetera, et cetera. Height would be equal to, was it 32 on the image? I don't know how big the image was. That's not even working. Whatever, you'd get it all matching. So you could actually delete the one that had the text in it and set the background color on it. And then you could change the text in because you're actually putting in real text instead of having an image. And of course, this would have to be clickable. I don't even want to get into how we did it. I just know this is giving me like flashbacks that I don't want to remember. So let's just come and get rid of this. And I brought in too big of a table and everything. So a bit of a disaster but I don't want to work with tables because I don't have to anymore. So of course now we can just say button and then like click me and style it up in seconds with CSS, right? We have our button and you'd have a class and other stuff with, you know, whatever you can make this a link to but then you just do your font size, 48 pixels, whatever you need, put in a background, purple, color. Let's do an RGB of 255, 255 over .677. There we go. Get that color, border zero, border radius, of course, is the whole point of all of this was the border radius and then you can just come in with whatever border radius you need and some padding on there. And the nice thing with this, of course, is it's super easy to change. The text can be changed without any issues. If the text is longer, it doesn't cause any problems. They could potentially happen with the other method. 1M, 2M, just something really generic but you get the idea, right? You can quickly come and make a button really easily. Then if you also wanted a hover effect, we just do a hover on our button and it's super easy. In the old days, it was just, yeah, you know, we're doing like rollovers to change the images. So JavaScript would have to come in to change the images that were being used to have a rollover effect. Let's be thankful of how easy things are with like border radius and all of that. And if you remember actually when border radius became a thing, that was also the era of prefixes where a nightmare for a long time that luckily we've moved past, I'm super happy. That was like CSS3 became a thing and everything just had to be like seven prefixes on it. Those were not the fun. That's just because everyone sort of didn't do the proper implementation. They just wanted to get it working in their own browser. Things might be a little different. So the idea was you can use it but you need to prefix it so it works in our browser and eventually we'll drop the prefix which thankfully for most things has happened. Yeah, I don't wanna get too much into that. But the last thing I do wanna look at is navigations. I mean, you could do a table-based layout for your navigation. I don't like tables clearly. So we're not gonna get into them. Oh, and we have two closing. Is that gonna work? Oh man, one second. Let's just delete the button one. Because yeah, so we're not gonna be doing a table-based layout for a navigation. So when you wanted to have your nav, of course we didn't even have really a nav tag. So you had your class of nav or navigation and then in there you might have your ul.nav list and then in there your li of whatever, li times five with each one had a link. We'll just do a lorem one so we can just get something quick together here. Right, so you'd have something like that with your list and then you would have to come up and style that and we'd have to do that today too. So let's just come and say first we'll start with my nav list and do just make it a bit smaller font size of 1.25 ram or something to make it a bit more clear what we're gonna be doing here. List style none, so so far nothing too fancy here. Padding zero, margin zero, the same sort of reset you'd normally do but then we need all of them next to each other and how do we do that? Well, we used to have to do like a nav list and then we choose our allies and do a float left and of course this is like more modern now, we're not using tables, we're actually using CSS for this and look like it worked, they're all next to each other and then you might say like, okay, margin right of one ram to space it out, you don't want this one to have it, so you add a little bit of CSS to take that margin off, we won't stress too much about that right now but there we go, we get these items actually floating one next to each other. Now this does actually cause a problem though because if I go back on my nav list itself or let's just go to my nav and I give this a background of light blue, there's no background, what's going on? Well here, if I take off this float, the background's working and as soon as I float, the background disappears and yeah, we had the fun days and the old days of having a clear fix to deal with this and it was using a pseudo element of after and even because it was the old days your pseudo elements back then had the single colon so you probably were doing it with one but we'll leave it like that I guess and then you'd have to have your content because it's a pseudo element and then you'd have a display table and I think it was display table for Internet Explorer. Don't ask me which version but I'm pretty sure that's why it was a display table and then you'd have a clear both and what this did, I'm not gonna get into how floats worked and the issues with them but if you wanted to go below your floated items you'd need to clear, so we're clearing all our floated items and then the parent here would always have to have a clear fix on it and then your background would come back. Oh, the fun days, that was never great and just anytime you knew that the children would be floating you'd throw a clear fix on the parent and it was just what we had to do and another issue actually with floats before we move to a modern look at this is what if I wanted to line this up on the other side? Well, we can't do a float right because if you look at the word lorem right now when I float that to the right, lorem actually goes all the way to that side, which is kind of annoying but just the way floats work, it takes the first item to the right and then the next and the next and the next the same way with left, it puts the first item on the left and the next and the next and the next always a not very fun to deal with. I think we might be able to say margin left of auto. No, that doesn't, oh, because it has the full width. Anyway, there was ways you could move it over. Of course, if you wanted to actually like center this navigation, we didn't have a float center as much as people wished we did. So often actually it was very magic numbery. You'd get your width of the navigation then set that as a width and then margin left and margin right of auto. But then if your navigation changed with the text inside changes, you add a new navigation item, the width of it changes, it breaks and then you have to fix it and it's all a bit of a nightmare. Whereas of course today, this would basically stay the same, but then on my nav list, dot nav list, we could just do a display of flex and then a gap of two REM and look at that, it's working. If I want it on the other side, I just have to do my justify content, justify content of end and it moves to the other side or if I want it in the middle, I do a center and it moves to the middle. I could even space things out differently instead of center, I could use space evenly or something, so much control, so easy to play around with. So yeah, it's pretty amazing and actually we went from having a time when we had to use HTML tags for everything including styling your fonts and doing, we have all these attributes to style stuff and just load it up. It probably worse than the div soup that we have today with our table-based layouts and everything, it was just HTML like crazy. People today are actually taking it to the opposite extreme and making amazing CSS art without having any divs or any extra HTML like your HTML element, your body and that is it. If you want to know what I'm talking about, there is a video 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, Steven 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 call on the internet, just a little bit more awesome.