 Okay, in the second part we start off with a number of basic text styling things Just to give you an impression what else you can do apart from colors But you can just look in any of the references I've given you for tutorials for lots and lots of examples of what you can do with with CSS Here are just a number of Different properties that you can declare that help you to style text And they all fairly straightforward, so you have text minus a line that simply gives you the alignment is the text centered left right or justified The indent is how is the first line of a paragraph or of a block? Indented so for example if you declare it with 10 pixels, then there is a 10 pixel indentation I can show you that font family is Essentially what you use to declare what kind of font to use So by default the browser uses the standard font that it has But you can declare this and there is quite a complex way of doing that You can basically start saying I want a very specific font You give the name and then you can give fallback you can say that okay if this font does not exist Then use the family of Helvetica fonts or things like that The best way to learn that is to actually look up in a reference because it doesn't make sense to list all of them Then you can have a font style so it can be normal. It can be italic. It can be oblique So different ways of styling your font and you have a font size, of course The different sizing units will go into them in a second and finally you can have the weight Is it regular normal font or is it bold-faced font? so that's all you can do there and We can just look at an example. I've made here. So you see that is all inline styles and I've basically just done a couple of things I have Centered and right aligned text. I have indented a paragraph So you'll see that there there is a slight break at the beginning here I use a specific font and this is essentially the fallback I've mentioned I say that I want this font if it doesn't exist Use this font family if that doesn't exist use mono space, which is sort of a general General type Then I have some italic And finally I have the weight bold font with a size 3 He also see that even in inline CSS I can of course have multiple declarations. So you just have the Column and the space and that's how you combine different things If you look at this it gives you exactly what I want to do so No surprise until the center text. So then this is centered as I wanted to here We have it right aligned here You have a paragraph with a certain indent and you see this if I make my Window smaller so that it wraps around You'll see that it's only the first line that has this indent Here I've changed the font to this courier new type I have italic text and finally I have bold text, which I've also changed the size of So that's just the number of things you can do For text Now you've seen the length units. I've written here pixel em Here I've written pixel em rem percent Those are different units for defining size or space And the important thing is that there are absolute and relative sizes So pixel is an absolute size. It's always 16 pixel if I declare that And this is really bad for accessibility because It's 16 pixel no matter whether you have a I don't know a 60 inch screen or a tiny smartphone It's always 16 pixel or if you have a very high density screen on phones It's again only 16 pixels. So it means that sometimes Uh The things should differ for example if the user says in the browser I would like to have a larger font size than usual Then maybe 16 pixel is not a good choice Or if you have a phone with a very high density resolution, you maybe should use 32 instead of 16 So that's a bit problematic. What you can do instead is use relative sizes And for example em let's start with that Is simply the unit of the base font size So if the user sets the default font size to 16 pixel, then 1 em is exactly 16 pixel But if the user changes it to 32 because he or she can read Not so well, then suddenly 1 em is 32 pixel. So it basically means you adapt that to the user And it changes also if For example, the browser setting on a phone is different than automatically this changes This is very good. The problem is em refers to the font size that is The parent element. So if you change the font size in your parent element Then basically you get nesting problems and I believe I can show this here But there is an issue to that so For example, here I use 2 em So let's say my base font size is 16 pixels. Then I should get 32 here Here I do 2 em again and I want to have 30 32 pixels the problem is it basically takes twice Of what I have here. So instead of 32 I get 64 here So basically em always refers to the parent element And if somehow the the font size of the parent element has changed then it changes here as well So it adds up in this case meaning This is the regular font size This is exactly double the size and this will be four times the size if we look at that So you see that This you can imagine is roughly double this and obviously this is much much larger So even though I've used the same unit here the result is very different To avoid that you can use rem Which is relative em and that's exactly what we want. That's always referring to the Parent to the to the absolute size. So no matter where you use it in your nesting It's still two times the standard font size And in this case you will notice I have the p tag in the same hierarchy as the the other one Still it is just double the size. So it's exactly what I would like to have. It's the root em So this is very good for for relative sizes and you should for accessibility reasons you should avoid pixel and use relative sizes instead Now you have seen colors and you actually have seen two different ways of setting the color You have seen the preset color names. So I've used red. I've used tomato I've used blue and there are a number of really bizarre names If you're interested in why here is a link on on the history of why we have those weird names But there are also three more standard ways of defining the the color So yeah, I have used the hex value already in some of the examples You can also set it via rgb or hsl. So those are standard ways in computers to send color This is just red green blue from zero to 255. This is hue saturation likeness Which is percentage and I believe a value between zero and hundred but not sure and hex is just hexadecimal So you again have two digits for red two digits for green two digits for blue So these are the standard things you typically see these color names are not often used And you have seen that I use the background color. You can also just set the foreground the text color So instead of using background color as a property you use color Again, there are enough examples in here. So I'm setting the color in different ways Instead of the background color, so that's not very Exciting but of course it's a super important thing that is used very widely Okay, so so much for colors and sort of basic tags I've basically shown you how to define css inline internally externally. So these three different combinations and how to combine them I've shown you how to define properties for so-called selectors And you can do a bit of coloring and text layouting The other thing that we have seen and that's when it gets interesting now is that we can do contradicting things So we could say color all paragraphs red And then we could say color all the elements with id para one green And then you'll see that here we have an element that is both a paragraph And has the id para one And of course, this is somehow a contradicting declaration So the question now is it red or is it green or is it maybe something else? And that's what we look at next And this is where the cascading comes from so the c in css This basically means that there is a different Order in how important different declarations are and which one wins in the end This is something that's important to understand. So as a very first part you can define three You can define css At three different places. So not the declarations we have talked about so far the inline external and so on But you can define it in In your computer in different ways. So you have the user agent. This is really the browser So for example, if I have firefox then firefox has a number of settings For example, maybe the setting is that the standard font size is 12 pixel Then You have the author of a website So if you are writing html and css code, you can just as we have done so far You can use inline internal external definitions to define the style And finally you have the user and that's the end user that is going to your website That person might also be overriding might have their own css settings For example, you might have a special tool for accessibility that makes everything larger So This order is exactly top down If the user the end user defines something it's the most important thing So if you as a website designer say the font size is 16 pixel But the end user says it's 32 then it will be 32 So this one is more important than the author And the author if you develop a website is more important than the default the browser default So that's the general order And then we have another thing That we can add every css declaration can have an importance And that's if you add this exclamation mark important And basically this means that okay this declaration here is especially important Those are Number of things we'll go into which one counts when And then finally we have a so-called specificity So a selector is More or less specific and there are again some rules for that but As an intuition, you could say that Here we assign something to an id. That's a unique element So somehow this is much more specific than saying all paragraphs So in the example, I just gave you before the id Selector is actually the one that wins because it's much more specific But we'll get into details now So um The general order of independent of importance is like this First the least important thing is the user agent. So whatever you have in your browser Then It's the user So if you as a As a user on your computer you define I want to have 32 pixels That's more important than the default then the website Developer defines his or her css And that changes everything Then the website designer could add the important flag And that's then more important than the things that don't have an important flag And finally the end user has the final say if he or she adds a slash exclamation mark important it overrides everything else So that's what I meant on the page before when I said in the end the user can Choose their own font size for example So this is the order How it works Which means that as a designer of the website you can never be sure that it actually looks exactly as you want in the end Because the user can override everything Now um At any of these points you can have uh things that are somehow contradicting So for example the one we look at now is the author If we write our own css our own Inline definition Then we can have contradicting things as for example in in this example here we have a declaration with two overlapping uh properties and then The more important one is the one that has a higher specificity um And there are a number of rules for this and we'll go into that now into some uh detail First of all you have we have the three different ways of declaring we can do inline We can do internal and we can do external The inline style has the highest specificity. So it's always the one that wins um The id selectors have a higher specificity than a class selectors. So Uh id is one single unique element and class is more of a group So id is more important and class selectors are more specific than tag selectors So a group of elements is still more specific than saying all paragraphs for example And finally you might have uh You might even have declarations that have exactly the same specificity Then it's simply the last one the the last one in your code that wins So let's look at that uh because this is an important and and rather difficult concept But here we have some html and css code. So you see that here we have inline and internal declarations two h1 Rule sets one says color is blue color is red one class uh selector color is black And then we have an inline one here as well and now The first interesting one is this one here. It's the same origin. So both of it is an internal uh declaration of the author and we have The same specificity. So h1 is a tag selector. This is also a tag selector So they are kind of contradicting and then as we said the later one wins So the color will be red because it basically overrides the previous definition So that's the first thing the next one Here we have a contradicting thing because h1 could either be red or it could be black Uh, and in this case the class is more specific than the tag Which means this declaration here wins. So the color is black And finally we have uh paragraph h1 so the color should be red But we also have this inline declaration And as discussed the inline one is more specific than the internal declaration here So this one wins. So in this case, we will have a green text color And the inline one is also more specific than the class. So it doesn't matter here whether it's h1 or class It simply means that inline is more important than this internal definition So these things are rather complicated and it will probably take you some time to to understand them And in particular this this order here is very tricky. So I do not Expect that you know this perfectly by heart, but you should have some kind of intuition Similar specificity you can actually calculate. So there are number values on that and it's actually more complicated than we have discussed here So there there is more detail to it But we don't go into that depth here if you want to you can look it up in the references Okay now We have looked at the selector so far and we have seen the tag selectors the class and the id selectors But they can actually be a bit more complicated And that's what our so-called combinators So a combinator is basically a combination of different selectors and then things are Meaning are applied to different elements. So we have three different ones here and they are Yeah, different order. The first one is the simplest. It's simply a list of different selectors So in this case font size 2 rem is assigned to every element that is in That has id el1 or that has Id el2 and you could add as it says up here It's only examples. This can be any selector. So you could do comma p comma table or whatever So it's just a list of things So that's the most straightforward one. It's simply to reuse the same thing for more than one selector The next one is a so-called child combinator in this case. I say that The element child el2 id el2 that is a child of el1 should have font size 2 rem So only if in my html tree there is an element that has id el1 and that one has a direct Child a direct nested tag with id el2 that one will get this combinator add this font size There is a very similar one if you have a space It simply means it doesn't have to be a direct child. It could be further down in the nesting We can look at that. Oh, yeah, right. I have visualizations to that. So the direct one here basically means I have an element with id el2 and under there. There's something with el2 That one then gets the font size and everything else that is here. It doesn't matter Similarly for the descendant there could be el1 There's anything under it And then further down in the hierarchy somewhere. There's something that's called el2 that one then gets the font size 2 rem so these are More complicated combinators. I have them all here. So You'll see that here is the direct child one. Here is the descendant one Here is again the direct child one and here is another one we'll get to in a second But you can look at the details and figure out how this works so For example, if we have a p tag a paragraph that is directly under a b tag Then it should be yellow And if we look at that, maybe we have it somewhere here We have a b tag and it includes a p tag. So this one should be Should be yellow here. It says red Um We have to change that here the situation is slightly different because we have a b In between there's a different tag and then the p tag. So this is a Descendant so this one should be red. I believe unless I have mixed them up Yeah, you see I've mixed up the color this one should be yellow And this one should be red. So it's exactly the other way around But you can look at the code in detail to figure this out Now you have already seen maybe in the code that there was something else and those are the siblings There are two different ones. There's the plus and the tilt combinator And the plus means we have a direct neighbor So we have an element with id el one and we have an element with el two and they have the same parent element so that means They will have or el two will have font size two rem Then there's the more general one. That's the tilt And that means that there can be stuff in between. So here El two has to come directly after el one here. There could be something else in between So that's a general sibling Again, if we look at that in code, uh, you could see that We have the case here div p Here for example We have a div and on the same hierarchy level. We have a b a b and a p And the p tag here is a sibling So it's on this they both have the same parent element div has a body as a parent and p has also the body Uh, so this would be affected by the tilt. Uh, it should have background our color teal That's so that's exactly what we have here. If we would use the plus Instead the direct sibling it would not work because there are two other elements in between So it's not a direct sibling a direct neighbor So these are combinators. Um, and then we can change our selectors in even different ways Uh, and there are two different things. One is called the so-called attribute selectors. Um, and that means You can basically Specify in a bit more detail what exactly you want to target. So for example here We have an a selector. So we want to target all a tags all links But only those that have attribute target equals blank Uh, so basically only the links that open something in a new window Will be affected by this style Or if we go into forms, for example, we can select all the input tags all the input fields But only the ones that are of type button So this makes it possible to to specify in a bit more detail which things we want to affect And the input is actually a good example If you think that the input tag has lots of different shapes It can be a text field. It can be a button. It can be a radio button So it makes sense to say I only want to have the button that you can click for instance So basically These uh square brackets mean that we select only the tags that have a specific attribute Now You can make this as complicated as you want to you can look this up in four. For example, you can say Select all the links that have the attribute target set So somehow target shows up in the tag and has a value, but we don't care what the value is Or you can say Take all the attributes that have a class that starts with top So the tilt here indicates the class attribute should start with top So lots and lots of ways to make this really complicated I do have some in the In the eighth file here, so you can look this up a little bit in this case. I only style The hyperlink that has blank as a target that becomes pink and you'll see that I have two different links here I have a regular Have a link that has target blank. So this one should become pink and the other one should not become pink And we'll quickly confirm that Yeah, you see the first link has a pink background color. The second one doesn't Now you can of course do all of this with classes as well You could assign classes to the different links that distinguish this, but it's sometimes good to be able to do this Another thing is called a pseudo class So that basically describes the state of an element And the shape the form of that is that you have a selector as before For example, we have a p then you have a cologne and then you add a pseudo class So that's something that describes the state. There are again lots of possibilities Check them out if you want to But here we have a number of typical ones. For example, you know that hyperlinks links that you click on have different states so They can be just a regular link But they have this hovering behavior. So sometimes they get a different color when you go over them Sometimes they get a different color when you click on them and sometimes they get a different color when you have Uh used them before when you have visited them And that's exactly the pseudo states here. So the link is just the regular state Visited it is if you have clicked on it hover if if you go over it and active is when i'm currently clicking So that way you can assign for example different sizes background colors Any kind of strange behavior that you like And there are as I said lots of Elements that you can use for example, you can select all the elements that are disabled Think about a form I want to have all the input fields that are disabled right now and they should be gray um I want to select Only the seventh child of a diff for example So if you have five or six paragraphs in there, you can select a specific one of them Um And so on you can select form elements, uh that are invalid. This is something we'll not discuss here But this is for example used to when you Have to check what's in the form someone has to register for example And you want to check whether the password is valid Then maybe you select all the fields that are invalid and add a Light red background color. So uh, so those are pseudo classes. It's basically in what state the element is Again, there is a A file on that. So we have the different link colors Depending on their state, uh, we select all the disabled elements of type input um We select everything that is checked that applies for example to the checkbox in a form um, and We select everything that's invalid, which I believe we're not using here um And if you look into the details, you'll see that this in fact works. For example, we have the link the standard Link has a background color black And it's white text if I hover over it the background should change to gray You see that now it's gray and the back and the regular text color is black if I click on it It gets background red and color white So that seems to work and finally if I Uh have visited it it changes to blue with a white background. I'm not sure that works here Because I don't save that information, but if you would Remember that if you would revisit the site, this would have a blue background And for example, you see that the the disabled element here has white background red text I don't know why this has red background. Let's check That's probably this one because it has in Invalid input and I don't know why the input is invalid. We have probably Yeah, it's an email field and an email field in html requires an add I don't know how smart this is Yeah, so not very smart, but you see that it has some kind of checking on the syntax And it changes if it's invalid So there are some options we can do with these pseudo classes that can be quite useful The last thing I'm bothering you with now is pseudo elements They don't describe the state, but they instead select a part of an element And they have this double colon instead of a single one There are not that many options there and I'm not honestly not quite sure how useful they are in practice But nevertheless, we cover two here only If you have text elements, you can select for example the first line or the first letter And this is something I have also in here. So you'll see that Down here, I have a single rule set where I select all the paragraphs and the first letter in all the paragraphs And that one is much much larger and bold And if you have looked at the example, you'll see that this is the case here So this letter is much much bolder and larger than the rest And I've done that purely by CSS. So the paragraph does not have any special elements or anything like that. It's just a paragraph So those are the pseudo elements, I can select part of an element But as I said, there are not that many options and they're maybe not that useful Okay, so that's it for the second part Uh, you have learned a little bit how CSS definitions are counted So you have this order of where are they defined in your browser or by the user or by the author Uh, and more importantly, you have the specificity. So how specific is a selector for an element? Which one is more important? And then on top of that we learned about a bit more advanced selectors So how to combine different things? For example, the ancestors select a child of something else And you have seen pseudo classes and pseudo elements pseudo classes are for the state So they select elements that are in a specific state Uh pseudo elements select part of an element. So for example, the first letter of a paragraph This is so good, we'll stop here for that and the third part we'll look at the CSS box model Which is very important to understand how things are drawn in CSS