So now we're going to just talk a bit more about how we do images, colors, and fonts and then we'll sort of wrap up CSS. And so when I fell in love with HTML, I didn't fall in love with the web right away. I didn't think it was all that great. It was just a way to click things differently, we had other things like Gopher that allowed us to click stuff, but when we saw inline images and the ability to wrap text around images, that rocked my world. And part of the web that was so successful, had to do with vanity to some degree, where you could make a page that is you and there is a page of me which makes me very, very happy, because I'm so vain I probably think this page is about me. And so one of the features that I loved the most is this wrapping, so I love how it does auto, so as you move things back and forth it auto lays out, and I think that's really cool. I know some people want to lay out pixel perfect but I love the notion of larger and smaller screens, responsive, adaptive, I think that's essential. We can argue about that later but what I love is the ability to float an image to the right and then have the wrapping happen around it. Okay? And so here we go. Let's show you how to do this right. And so we'll talk about the nav bar later but for here what we have is this image. And so you can see that this image in the layout comes right before the header one so the image would normally be right there basically. But then what we do with the style we say float:right and that says, hoist it out of the normal flow and then float it to the right margin and then use it as a justification boundary. And so that pulls it over here. And so that's why this sort of comes up here, there's no image anymore and now this lays out here. Now the other thing that I've got is a margin of 1 em, and so that gives me the margin of 1 em, gives me a little space right here. So one of the things you do in CSS is you talk about sizes and you've got pixels and sizes and the em is actually a really useful size. So what the em is, is the width of an M in the current font size and these fonts can go up and down as you zoom your page in and out. And so what it really says is I would like space that's equal to the width of an M. So you kind of see that this is an M of space this way, an M width. Actually, so the M is sideways here and M with the vertical space. And so it means that if you change this and zoom it in and out this space will change correspondingly. So that's one kind of way to say one letter's width that is taken from the size of the surrounding text. I think that's really cool. I mean pixels were dangerous and font sizes were dangerous but these ems are a great relative size. So, float right pulls the image, shoves it over changes the thing. Now if this was long enough you would see that eventually it would start wrapping here, but you can also force it to clear the float. And there's an attribute on any tag you want, but I use a break tag which is, break tag is like go back to that new beginning there. Clear equals all says, whatever that float was, if we haven't already sort of gone beyond it, the next thing, this next paragraph, here has to start at the left margin, even if it creates a little bit of white space. So that's how that white space got created here. The hanging indent was effectively cleared and so this thing had to be, this line here had to be forced back to the left margin because of the break, clear equals all. And so that's a floating image which I think is really nice and I love it because I can resize this and it just resizes automatically. And if you resize it really bad it'll actually pop it up so that this picture is on top and I think it's important to do those kinds of things because increasingly we have narrower and narrower ways to view these things and so just imagine that everything is really big and broad. It's not always that way that we're using a super large screen monitor. It's great when you can use them but it's nice to have a website that responds to changing widths, quite naturally. So colors. So colors are important. There is a color attribute, there's a background color attribute and so they have a number of built in colors. These aren't necessarily the most beautiful color but I love to use them to do things I'm trying to say, what happened, how come that little tag is not working or that CSS rule is not working? I'll say like bg color red and then it goes red, and I'm like, oh I hit the wrong one or something. And so these colors aren't really great for graphic designers but they're great for developers who just want to have something stand out so you know what you're doing. Right? So these colors are like aqua, black, blue, fuchsia, et cetera and they're the default ones that every browser supports. Like I said they're not really officially gorgeous. Now, there's also a way for any place that's saying color to have an advanced color and you see the advance color by this pound sign. And so what this really means, it's a hexadecimal. Hexadecimal you can go look that up, it's base 16. All it is is a number system that has zero through nine and then a, b, c, d, e, f. So f is actually equivalent to 16 and so this is the number 16 or 16 except it's only one column. So Hex is a way to sort of in a more dense way represent numbers but that doesn't matter. Ff is the biggest number and zero, so zero through f. There are two red numbers and these are 16 times 16 so this is really 0 through 256. Each one of these is somewhere between 0 and 256. So the red is 0 through 256, the green is 0 through 256, and the blue is 0 through 256. And in a sense what we're capturing in this little thing is like with these sliders where you're dragging back and forth. I mean 255, not 256. 0 to 255, right? And so that's all you're doing. And then you're changing this color by combining the red, green, and blue to the level that you want to combine them together. And there's also a set of colors that are just three, where you say #245, this is the red. It's like 224455 and so that sort of reduces the color space. And so you can have three hex digit colors which is red, green, blue but it just sort of duplicates those things and it's a way to use fewer colors. In the early days we used to worry about web pages that used too many different colors because the computers couldn't represent as many colors but that's probably 15 years ago since that actually was a problem. Fonts. The default font in 1990 was Times Roman. Partly because I think when Tim and Robert were inventing the whole thing they thought of this as a highly respectable thing and were writing documentation like journal articles because it was physics. I mean they were trying to represent physics documentation, so they just picked Times New Roman. Or maybe that was the default of whatever NeXT computer they happened to be using. I don't know how, I just know that I hate Times New Roman. And so the first thing I do is switch to some kind of a sans serif font because I think that just looks more modern unless I'm writing a journal article or New York Times article, that's where Times New Roman comes from I think. And so I just, I'm always changing my fonts. And so the font-family is one of the first things I always do in any CSS. And so font-family and there's other things like font size. And so you look at font families and it's kind of a little bit different because, if you look at margin it's a width, it's really easy, but in a font you have a list. And what happens is your list is sort of your preference in priority order as the graphic designer. And you basically say, if this is Trebuchet MS, I think that's a Microsoft font, and then Helvetica might be a Mac font and Arial I think might be a Microsoft font, so you're trying to hope to find one of these things. And then what's really cool is there is always a fallback. So it says every browser must have a serif font, a sans-serif font, monospace, cursive, and fantasy. Cursive and fantasy are kind of stupid because they're kind of not predictable. But these three are super useful so you can always sort of fall back to some browser-supported sans serif, serif font, or monospace font and that's why you see these things at the end because these are the fallbacks. Font size. You can have relative font sizes. These are a little dicey. You start at medium you can kind of go down and you can go up. Folks tend to prefer like 12 pixel height, things like that. You can set the font's weight, bold or normal, normal or italics. The reason these two things are separate is because you can do both bold and italics. You know, some blah, blah, blah, blah, bold, well I don't really know how to draw bold in text, but you get the idea. You can do bold and italics so it's not just one of the it's not bold italics or normal, it's bold or normal, normal or italics and so you can apply both of these things. You can do things like cause everything to be underlined the default of course is none. You can have over line or line through, and you see this a lot. People use line through when they're showing that they changed something, okay? Now going back to font size pixels. So it turns out that pixels, it's not the most popular way to do it, like 12 pixels tall because we can zoom our screens in and out especially for accessibility on different devices, and then the 12 pixels would be the same. But what happens is, is most browsers conveniently ignore the pixels and if you're zooming it in it says oh 14 pixels and then it just makes them bigger. Because otherwise if it really literally took your 14 pixels literally, as you zoomed pages in and out than that 14 pixels would stay the same. Which is really not what you want. So if people get sloppy and use 14 pixels it works. This is kind of zoomable. Font size is kind of a hard thing. Links. Again, the whole beginning of this came down to hypertext right. HTML, Hypertext Markup Language. And so we've got some interesting styling that we can do for links. The default was blue and underlined anything that was clickable and purple and underlined anything after you got done clicking. And it turns out that if you look at Google searches they still use this styling because it turns out, it's not really good for every page that has every clickable element, but if you're actually making a list of things that are actually clickable it's not a bad convention and we just all use it. And so Google searches style this way. But you can, in CSS, control a lot of how the styling works. So you can basically say every anchor tag is supposed to be bold, if it's a linked tag before you visited it it's going to be black, after you visited it it's going to be gray. Hover. That means when you come up, if this is our little area, you come across and it can change color while your mouse is there and as your mouse leaves it changes color back. And so you can have a bit of animation. And again part of this is to attract attention to the clickable places so you kind of come across and it goes like pink, back to blue, right? And so you can do that, in this case I'm actually changing the background color, changing it's font color and taking away the underline. Active is not so useful. It's after you've clicked on it while the next remember request response cycle. You've clicked on it and it's retrieving the next page but it still is showing the old page, during that brief instant, hopefully brief instant, you can actually change the color of the link while it's reading the next page which kind of is useful if it was going to take a long time. You could say, oh it shows like it's kind of a red or something, says, don't click this because you already clicked it once. But most of the time the page is gone in a blink of the eye so you don't really use it, but you can do it. So this is like the state of a link, right? You can style based on the link state. Have I visited it or not, am I hovering over it, have I clicked on it and that you can do. I think you can do this for almost any element. But it doesn't always work the same in different browsers but the anchor tags, this works really, really well and so anchor tags are a big part of what we do. Things like Google search results like I say make really good use of all of these things to help you because what search results usually are is a bunch of links that you can click on. You type, web applications for everybody, and then you've got a bunch of links and you can look at them to help you find what you're going to do and really augments the navigation activity in a user friendly and user engaging way. So I've got these samples at co.CSS and Web Applications for Everybody and they're all really designed so that you can sort of watch them, you can look, you can inspect element, right click and you can see all the CSSes, et cetera, et cetera, et cetera. And so I'm not going to go through every single one of these in the form of a lecture but there's a lot of useful stuff here so I would recommend that you go all the way through this and just kind of get the basics of CSS. So again I just took you through a very beginning CSS. It's wonderful. I am not a graphic designer but I so love to use CSS because I just kind of throw a little padding somewhere or a color or move something to the right or make an image larger or smaller or put a little border around an image. It's really quite nice and I can do the stuff that I want to do and then I can say as long as I don't get sloppy in my HTML markup I can just hand it to somebody and then they can hand it back to me and say look I really made your stuff beautiful and that's really quite cool. And you got to think that this is also not done evolving. We're at a pretty good point with HTML5 and modern CSS but it's going to keep evolving as mobile and other things happen and sometimes they're like, oh you've got to use this WebKit or Mozilla options to curve buttons, now those have become standard. But it's always kind of an evolving thing as we come up with better ways to represent our markup.
