So now we're going to talk about cascading style sheets. Like our lecture on HTML, my goal is absolutely not to make you the world's greatest graphic designer because that is a lifetime of effort all by itself. I want to make you just kind of crude Cascading Style Sheet hacker. This class is kind of a back end development class but we need to know enough about the front end so that our back end stuff looks kind of roughly like it. And that's kind of one of the cool things about CSS is the back end developer should know enough CSS to make it so that thing doesn't look dismal and then just hand it to somebody, because that's the whole idea of the separation it concerns, is that it allows things to do. And so here we start with our picture of the universe right, browser running on your laptop, web server running in the cloud somewhere or perhaps on your laptop. Sometimes all these running on a laptop when you're doing development but web server, database server, talking HTTP back and forth, talking SQL to the database server. So we hit click on it. We go get in HTML file, the HTML file comes back, we parse it, it starts parsing in the DOM. But one of the things that happens is there is a reference in here to a CSS file maybe. And so then it has to go, Oh hang on, I got to go get that CSS file, pulls at the CSS file in and then the CSS affects the DOM too. And so the combination of the CSS plus the HTML lead to the pixel perfect layout of what it is that you're seeing on that screen. And so in CSS and HTML we are still focusing on defining how the browser is going to render stuff. Soon we will be learning how to code stuff and how to talk database. But for now, we're really talking about the browser and that's why a lot of the sample code doesn't have to run off of a web server because we're not really doing anything dynamic. When we start doing dynamic stuff, you have to have a web server, but here we don't have to have a web server. So if you're going to have Firefox there is a better code that could be really useful to you and you probably use Chrome, but some of us use Firefox in addition to Chrome because there are some really cool things that you can do with the Chrome Web developer tool that's not the same as developer console. It does a lot of cool things and lets you debug your CSS quite nicely. So you might want to go to Firefox and install this and use it or actually probably works in a bunch of different things. So that's different than just the Web Developer console because it's very much about CSS and other design things. So I've said this before, HTML is very old, well over 20 years old now and it started sort of with this gray background and blue links and underline and we were just happy to have a list of things, right? The stuff we talked about in the previous lecture, there's an ally tag, there's an anchor tag, there's an image tag and not much else, righ?. Not much else. And now we have this sort of beautiful, corporate, commerce based, end user oriented, money generating UI look and feel. And so CSS, is that which enables this beautiful look and feel. And like I said, I'm not going to tell you how to be good at CSS. So if you look at my web site webapplicationsforeverybody.com and use the Web Developer plugin to shut off CSS, that's one of my favorite things to do, is shut off CSS; and what happens is, when you shut off CSS you see the navigation independent of the styling. And one of the things you should do for your web site for accessibility and for many other reasons, is have what's called semantic market and that is, your markup without CSS should still make sense. Right? And so if you were to look at this with turning CSS off, you would see that there's links and there's a list of links and this list of links really is this list of links right here. Isn't that pretty cool? And then there's another list over here. And look how pretty this is. I mean literally, if I wasn't trying to impress you with this website, this is a completely functional website. Oh and yes! There is the next thing you see is a video and then you see some stuff. Right? And the thing that's interesting about this, for those of us who are not visually impaired is, for visually impaired people this is exactly how they see your website. They see none of this. Right. They see none of this little, Oh look at that little cool shading, isn't that so awesome? Well no, you can't see that, that's for visual folks. And so, this is where you want to separate the visual elements from the semantic elements. And it's not just for people with limited vision, it is for us itself and as developers, we want to keep this is pretty and as simple as possible and then allow a really good graphic designer to create the beautiful look and feel. Again, as back end programmers we have to make it so it doesn't look crappy. So if you look around my website, you can clearly see that I'm far more a back end developer. I use bootstrap and the simplest CSS, It doesn't look shamefully bad but it also doesn't look pretty. Somebody someday,might help me and actually make beautiful CSS for this. My goal is to build a really beautiful markup and then have adequate CSS, so it's not shamefully bad. And then have someone more talented than me make it really beautiful, like say that Yahoo page, someone very talented really made that beautiful. That's not me, I don't have that skill, not at all. So if you look ultimately you have sort of this HTML. Right? And it has CSS that loads etc., etc. and in these CSS there's all kinds of highly detailed markup kinds of things of how much space, how wide this little gray bar is and what font we're going to have for that and how much space you're going to have here and how much space you have here. All this is in this CSS. Okay? And so you can think of the browser loads the HTML, the browser loads the CSS and combines those two things together to produce pixel, for pixel, for pixel the beautiful, visually beautiful look and feel. But it's important to keep your HTML technically beautiful or semantically, It's semantic HTML. And so again, we have that sort of the back end and sort of slightly front end developer, which is really what this course is aimed at. You know, we're going to generate some HTML, we're going to try to make this as simple as possible. We'll pull in some CSS and that's going to tell how to make these things work and in the CSS, the CSS is a set of rules that say, you know what, you see that body tag, this is what I want to happen on that body tag; see that paragraph tag, any paragraph tag, this is what I want to happen on that tag; see this anchor tag, oh there's no anchor tags, sorry, no anchor tags. But you get- oh here's H-1 tag. See this H-1 tag, see that, I want that to be blue. And so but these are two files. And so what happens is I code this up, I build this and I build a really bad CSS that just gets me through the day but then I can hand this and then someone else can just edit this and keep hitting refresh and make it prettier and prettier and prettier. And sometimes you're both, the developer and the designer but it also allows really talented developers to really specialize in building this and really talented designers to specialize in making developers look really good. So the CSS syntax is very different than HTML and it's also different than PHP and it's different than JavaScript. And so HTML and CSS are really and truly programming languages but they're not procedural programming languages. HTML is a declarative programming. You say this is a paragraph, that's a paragraph, you figure out how to show it. The same is true for CSS. It is a declarative language meaning that you don't write loops, you don't have variables, you don't control logic or steps, you just declare all the things that you want to happen, they kind of all happen at the same time basically. And so this is the syntax of the CSS programming language, even though it's very different than any procedure programming language. And a lot of people by the way, love non-procedure programming. I mean like, I love HTML, I love CSS and I hate PHP. And that's because PHP is procedural and it requires far more detail, say do this, then do this, then do this, then do that. That's not how CSS works. It's like find the body tags, find them all, do them all, do it, done. The syntax of CSS is pretty simple and pretty elegant and a lot of people just learn CSS without even taking a class. There is some kind of a selector. The simplest selector is body tag. And then there's a curly brace and that's the start of the things that we want to apply to the body tag. And then we have a set of properties and you have to look these properties up on the web or in a cheat sheet or whatever. Font family happens to be the property that we set to set the font. And then we're saying I would like this to be Arial and if the aerial font is not available I would like a generic sans serif font. So this font family happens to be a thing where you give a series of options in decreasing priority order and then you know you separate this with a colon and you finish with a semi-colon. And so there can be many of these things here between the open brace and the close brace but that's the basic CSS syntax. So you saw in a previous slide where was all sort of jammed together. White space doesn't matter but when humans do this, they tend to indent and make it look pretty, even though the indentation is not really syntactically important but cognitively for us poor humans that have to read it, it is cognitively very important. All right. So we have the part that the rule applies to body tag and we have a series of key value pairs basically, property value, property colon value pairs and we have to go read and learn what each one of those things does and how we use it. But the web is great for this, you're like, what is the CSS property for transparency? And here's a little tiny sample and you copy and paste that. We learn by copying and pasting or stack overflow will tell you, what's the best way to put a two pixel border around a button? I mean like Stack Overflow will have like 5000 answers for that. So you might want to get yourself a cheat sheet. I don't really memorize CSS, well maybe that's because I'm a back end programmer not a front end programmer. I know a few things like margin and padding and strong and bolding, emphasize an anchor tag and all that stuff. But I have to look stuff up all the time and so I've gotten better at it because I use CSS more but things like, how padding works and how margin works, that's really something that you probably need a cheat sheet for a while. So we're going to talk about a number of CSS properties but just understand that this is by no means, the, you know, end all and be all. So coming up next we're going to cover some of the CSS properties.
