 Welcome to lecture 5 and 6 on Cascading Style Sheets. This is now the addition to HTML that we take our structure, our content that we have written in HTML and we finally give it a nice layout and a nice look. So that's what CSS is all about. We cover the background of what CSS is, where it comes from, the principles. In general, I'll do lots and lots of examples of how things work, what you can do. And then specifically, in the end, we go into the so-called box model, which is an important thing to understand. And flexbox, which is a concept that has greatly facilitated how to position things. And as a last part of this lecture series, we go into responsive web design, which is all about changing the look of your website when you, for example, resize. The learning outcomes are rather similar to the previous lecture with the big difference that now, of course, they apply to CSS, not to HTML, but otherwise they're exactly the same. So nothing changes there. Again, as in the previous lecture, there's lots of text here. The slides are very verbose to give you examples. But there are actually more concepts in CSS than in HTML, things you can understand. HTML is very straightforward. CSS already has a couple of difficulties. For example, if you define layouts that are somehow contradicting each other, which one counts or things like that, but you will see that in a while. The literature reference here is all optional readings. So it's up to you. Essentially, it's, again, a lot of references to tutorials and standards. So here is the CSS standard, if you're any how interested. But then there's, again, the W3 Schools tutorial, which is very helpful. And then there are some detailed examples on the different parts we cover. In particular, I would encourage you to look at the reference number eight. It's a very good guide to Flexbox how to position things, which will come in very handy in the first assignment. The coursebook covers CSS in chapter three. They cover some things less than we do. For example, the cascade, we discuss in more detail other things they might do that I skip here. So it's a complementary reading. HTML has some styling. So you can, for example, you have the B tag, which makes something bold faced by default. But in general, it's very good practice to keep the content, the structure separate from the style. So this is something you see everywhere in programming is separation of concerns. HTML has the structure, CSS has the style. And as you have learned, or as you will learn, even if you have styling in your HTML, you can actually use CSS to change all of that. So it doesn't really make sense to put style into HTML. Instead, we use nowadays typically cascading style sheets or CSS short. We'll later on discuss why it's called cascading, but essentially it's sheets, it's document describing the style of a website. And we have a definition for that. So CSS is the language for describing the presentation of web pages, colors, layout font. And then an argument why it makes sense to separate them so you can easier maintain them. Now CSS is, in theory, quite easy because it's only a few concepts. There are many things you can do, but in practice this can be really hard. And this nice picture of a monk here on the right side displays very well the pains that we often have. That, for example, you would like to have the text within the box, but suddenly the box is shorter than the text and it somehow doesn't look very nice. This can be frustrating. A lot of you will experience this hands-on in the first assignment that it's not as easy as it seems. Originally, this goes back to the very early times in HTML. CSS is developed by the W3C consortium. So that's why you get all these references in the beginning on W3C schools and so on. It used to be a single standard, a single specification, but at some point they decided to break it down into modules into separate standards basically so that they can evolve quicker. So you see, for instance, in CSS3 there is a module that describes the fonts or a module that describes the user interface. And the idea is that then you can change the fonts standard without moving this anyhow and so on. It's easier to maintain. But that's not that important to know. Now let's directly go down and start. Apart from the underlying part, you know this. There is a paragraph tag. There is some text in between it and there is an m tag. And now we will introduce CSS. And we can do so in different ways. This is one of them by adding the attribute style equals and then in quotation mark we put CSS code. In this case, we just write background minus color colon tomato, which gives the paragraph the background color tomato red. This is actually also what I've used in the previous lecture. For some examples, I marked the diff tags to show you how they look like. That's exactly what I used. So we can look at that. It's all in the material. So it's the inline example and you see it's exactly the same. I've just assigned this style attribute to the paragraph tag. If we open this, there should be no surprises. You see that my paragraph has this tomato color. And the second paragraph is just a regular one. So it doesn't have any color. So that's a start. It's not very surprising. It just gives the text some background. We can do exactly the same thing in a slightly different way. So we leave our paragraph exactly as it is. And instead, we go into the head of our HTML document and we add a style tag. And what we do then is very similar. We write background color tomato. You have seen this, but we also add the P in curly brackets. And well, the difference is here we have the attribute directly in the P tag. So it's very clear where it belongs. It belongs to the paragraph. Here the style tag is in the head. So we have to say the background color of what should be tomato. So we have to say it should be P. This is called a selector in CSS. So we select the paragraph. The difference here is that we actually give the background color to all P tags. So not only to one, but every single one. If we look at the second example. You see that's exactly what I've done. It's a bit nicer for method than in the slides. And you'll see that now both paragraphs should be read because I assign it to all paragraphs here. So there's actually a slight difference in how it looks like. Here and compare to the first example. So what this is is essentially specifying CSS code in three different ways. I've shown you two. I've shown you the so-called inline definition. And that means you add this style attribute and you just add CSS without any selector, without any description of what tag it applies to because it's clear. I've shown you the style tags. That's the so-called internal definition. So we put the style tags into our HTML head. And then we can add these selectors. So we can write h1 all the headings. One should have background color red. Or and that's something I haven't shown you yet, but you can also move the whole thing to a separate CSS file. So again, we would go into the head. And we would add the link tag, which I've already shortly mentioned in the previous lecture, saying that it's a style shield file CSS and we just reference it. I can show you that simply for having this complete. So if I take this style away here, then as you would expect, the styling disappears. But instead I can now add the reference to my style sheet file, which I have to copy as well because I don't know all the details by heart. And I'll just say, please open the file style to dot CSS. Let's see what I've done that completely correctly. Now it's the ref attribute. You see, I don't remember those things either. And now if I create this file and I put the relevant code in there, it should work as before. So if I do style O2 dot CSS and I just put the selector in there without the tag, this should again look as before. Yes. So you see the difference now. It's exactly the same look, but I've moved the CSS code to a different file. And that's of course in general the preferred way because you want to properly separate the files. You want to make it easy to maintain. Otherwise, if everyone works on the same file, it's easy to end up in conflicts with your colleagues. But these three things you can do and you can combine them. So you can have an HTML file that links to a style sheet that has an internal definition and that has inline elements. All of that is fine and it's also very common to see the combinations. Similarly, you can have multiple external CSS files. That's again very common. For example, you might have your own style, but you might import other styles that have been defined by other people or organizations that look a certain way. So then you combine things perfectly fine as well. Okay, now you have seen already that you can define these rule sets and this is what we do in CSS. In general, we call everything that is in this curly bracket a rule set. So it's a set of rules how to style elements in HTML. This in the beginning, the P in this case is called a selector, as I've already mentioned. So that's for selecting which elements to style. This here, the stuff before the column, font size and background color. These are the so-called properties. So those are the things we change and they have values. So in this case, we set the property background color to the value tomato. And those things together are called a declaration. So I declare this. In line CSS, as already mentioned, you do not need the selector and the curly braces because it's clear that you are selecting the element that has the style attribute. So this is just that we are on the same page because I'll use these words all the time. So all of this is a rule set. This is a selector property value and together it's a declaration. Now, selectors are coming essentially in three different ways. You have seen the first one, you can select by element. And that basically means you select a tag. For example, I want to have all the paragraphs styled in a certain color. Then you use an element selector. That's what we have used so far. Give all the paragraphs color tomato. And now you'll understand why we had those class and ID attributes in HTML. You can select classes and you can select IDs. So if you do a dot and then a class name, it means assign the style, the rule set to all elements that have this class. And you remember the class is an attribute that can be reused. So you can have, for example, class red elements. And then you can give this class to several different HTML tags. A single HTML tag can also have multiple classes. We can look at that later. And then if you have a unique element, you can give it an ID. ID, my paragraph. And then you can use the hash to uniquely identify this element and give it a style. There is again an example that we can look at. So we have the class ID tag here. And you see that I have an internal definition here. I also have some inline styles, but that's not relevant. But essentially I give all the divs the background color teal. So all of them get this kind of greenish color. I give everything that has class red bg, the red background color, and I give the element with the ID blue div, the background color blue. And you'll see down here I have a number of divs. I have one here and I have one here and here and here and here. So they should all get background color teal. I have a number of elements with class red bg. So one, two, three. The interesting thing you should note here is that they are different tags. So I have a p element and I also have a div element, but I can use the same class for them, the same styling. And then finally I should have exactly one element with ID blue div here. Otherwise it would be invalid. And now let's have a look at this. So this is pretty ugly because of the colors I've chosen, but you see that it works in general. So you see that the elements that have red bg, this divs are containers here. That has a red background, obviously. Spring 2019 should also be red. And you see that a regular div has background color teal that's here. So generally this works, but we're already getting some interesting things and we'll discuss that much more later. The interesting thing is that we are having conflicting definitions here. For example, if you look at this part here, that's a particularly interesting example, we're having a div. So the div should have background color teal. But this div is also of class red bg, so it should have background color red, and it has ID blue div, so it should be blue. So actually we're having three different background colors that should be applied to the same element. And there are rules for which one counts, but of course this means we have to have some kind of rule set for how to count the different properties. The other thing you'll see is that here this is a div, so it should have background color teal, but I actually have an inline definition that gives something else. And that's actually what happens. I have this gray background. In general, this example shows you that you can have these different selectors and they work. The interesting question is now, what happens if you combine them, if you introduce contradicting definitions? Well, get back to that in the next part.