 So now let's look at CSS, Cascading Style Sheets, and you may have noticed when we covered all those essential tags that I didn't make mention of any attributes, because, well, it turns out that the large majority of things that used to be accomplished with attributes in HTML tags is now accomplished by using CSS. CSS is all about applying properties, aka styles, to the elements of the page. And these properties are things like positioning elements, sizing them, sizing the text, changing the font, the font style, whether it's italicized or bold and so forth, changing the color of the text, applying borders to elements, giving things background colors or background images, and a few other things, so that mainly covers it. In total, there are somewhere around 100 different CSS properties, though in practice we stick to using most commonly about 30 so. When we express a property, we write it as name, colon, value, semi, colon. So here, for example, here are two properties, first font, hyphen, weight, colon, bold, that means make the font bold for whatever element this is being applied to, and then border hyphen with five px, five px meaning five pixels, that means give the element a border which is five pixels wide. So you'll note here in the case of our first property, the font, weight property, the value is expressed as basically just a fixed word. There's like three or different possible values for font, weight, there's normal, there's bold, and I forget what else, but those are the primary ones. And then for other properties, like border width, it's expressed as a unit of measurement. So there are a few standard units of measurements used in CSS. When it comes to font sizes, you'll see pt as in font point size, and you'll also see em, which is the em measurement is something that comes from typography from type setting. It's something to do with the height of a lowercase m or something like that. Anyway, it's different measurements of font size. And then also you'll see measurements in terms of pixels for things like widths and heights, and that is just written as px. So you'll see five px here means five pixels. And then other times you'll see things measured in terms of percentages. So if something takes, is given a width of 70%, that means that you want it to take up 70% of whatever it is, whatever other element is contained within or something like that. So that's just written with a percent sign. And then when it comes to expressing colors, you can specify the precise color using hex. And there's actually two forms. You can use three hex digits or you can use six hex digits. When you see number sign FFF, that's a color signifying white, because the first digit is the red component. The second digit is the green component. And then the third digit is the blue component. And they're all set to F, meaning the brightest value rather than the darkest. So if you turn up the red, green, and blue all the way, that means you get white, right? 0000 would be black, total black. And the second example here, number sign followed by six hex digits. Well, the first two digits are the red. The second two digits are the blue, sorry, green. And then the third two digits, the last two digits are the blue. So this means the red is, there's no red, there's no green, and blue is set to E9. So this is some shade of blue. Basically, the difference between the three digit form and the six digit form is just how precise do you want to be. Obviously, the six digit form allows for more precision. And then finally, you also see colors expressed sometimes as just words. There's a fixed number of words. I think like 100 different shades of color expressed as words like there's red, there's light red, there's green, light blue, and some other number. There's a list you can look up of CSS colors that tells you what color names are available. So those are examples of what CSS properties look like. But how do you specify which element a property is being applied to? And one way, the simplest and most direct way is to simply give that element an attribute called style. And then in the quotation marks of that attribute, just write the property or the list out the properties that you want. So in this case, we have our div and we're applying the style font-weight with the value bold. And we just happened to have one property in there, but we can actually list as many as we like. And so because of the style attribute, this div will be presented with the text in bold. Now, for text properties, things like font-weight, font-size, font-style, etc., font-color, those get inherited by the elements within an element. So here we have this span contained within a div, and the div has the bold style applied to it. So the span within that div is going to inherit that same property. So the text in the span is going to be bold as well. If we want to change this, we have to apply a contradictory style to the span itself. So here we give it a style attribute with the value font-weight colon normal. It's no longer bold, it's just normal. Again, be clear that this inheritance behavior only applies to text properties. It doesn't apply to other properties, like say for borders or positioning elements. So directly applying styles with the style attribute is one way to do it, but it's actually the way that's most frowned upon. You're really not supposed to do things that way. It's considered bad practice. Alternatively, the much better thing to do is to apply styles to elements using what are called rules. And these rules you write inside a style tag which you place in the header of your document. And notice here that the style tag should have a type attribute with the value text slash CSS. I believe actually most browsers will work fine if you just admit that attribute, but it's good practice because it's supposed to be there. The standard says it's supposed to be there because in theory we could have different kinds of styles other than CSS. In practice those CSS are the only kinds of styles supported by the browsers. So it's kind of strange that we have to specify that hey, this is CSS and not something else because there isn't anything else other than CSS, at least as of yet. In any case, I would recommend you always write type equals text slash CSS. Anyway, so how do you write these rules? Well, a CSS rule has the form selector or selectors, multiple selectors, followed by a pair of curly braces inside which you list one or more properties. So the selector or selectors, as you can probably imagine, is the part which specifies which elements we're going to apply these properties to and then the properties are the properties which we're applying to those elements. There are actually about a dozen different kinds of selectors, though there are just a few that we use most commonly. The simplest kind of selector is surely one that just specifies the name of a tag, which simply means to apply these properties to all tags of this type. So here we have a rule with the selector div and two properties. So these two properties, font, weight, bold, and border width, four pixels, will be applied to all div tags. So that's surely the simplest kind of selector, but it's rather kind of ham-fisted because how often do you want to apply a style to every single element of one particular type? Usually you want to single out specific elements. So for that purpose, we can give elements what are called IDs and classes. Here we have a div and by its attributes we are giving it the ID poem and we're giving it two classes, Apple and Banana. The idea of an ID is that it is totally unique just for that element. So if an element has an ID, it only has one, and the ID which it has should be totally unique to that element. No other element here should have an ID that's also poem. A class on the other hand is meant to identify potentially multiple items, so we can have a bunch of different elements all with the same class, and a single element can have multiple classes, as the div here does. Also understand that when we write the classes in the class attribute, it doesn't matter which order we list them in, so we could have written Banana, Space, Apple, and it would have met the same thing. So once we've used attributes to give elements IDs and or classes, we can then specify them in our selectors, and we specify an ID in a selector by writing number sign followed by the name of the ID, so this rule here means that the element with the ID poem should have the properties font, weight, bold, and border width four pixels, and we specify a class in a selector by writing dot, then the name of the class. So here the class Banana, all elements of that class are given the two properties font, weight, bold, and border width four pixel. So ID selectors and class selectors are by far the most common selectors you're going to use, but things can get a little bit more interesting. We can write say here div dot banana, and that means that all divs that are members of the class Banana, they are given these two properties. So here if in our document we happen to have an element which is a member of the class Banana, but which is not a div, then this rule will not apply. Now when we throw a bunch of CSS rules into our document, the possibility arises that there might be some sort of conflict. There might be contradictory styles being applied to the same element. So the question is how does the browser resolve these conflicts? Well the rule is simply this. First off, if the style attribute is being applied, then the properties specified in that style attribute, they always take precedence. So if in the style attribute I make something bold, and then in some other CSS rule I make it not bold, something other than bold, the style attribute is going to win out, and that thing is going to be bold. Do keep in mind, I told you already, that using the style attribute is not considered good practice. It's something you're supposed to avoid, but do understand that it always takes precedence. But aside from the style attribute, when it comes to choosing between different rules, the order of precedence is simply that the thing, the selector with the most IDs, takes precedence over the selector with the most classes, and then that takes precedence over the selector with the most tag names. And finally, if there's a tie, then the browser just uses whichever rule it read last. So the order in which you write your rules can be significant. Generally though, I would say you should try and avoid having things come down to a tie breaker based on the order in which you write your rules. It's just something which is a bit too subtle and you're going to start confusing yourself when your document gets complicated. In any case, consider an example. Here we have two separate rules, one with the selector div.apple and one with the selector ID of limerick. And both of these rules contain a border-width property. One specifying a border-width of four pixels, the other specifying a border-width of eight pixels. So the potential arises that in the document we might have a single element to which both of these rules apply. We might have an element which is a div, which is a member of the class apple, but which also has the ID limerick. And if that's the case, the question is, well, which of those two border-width properties takes precedence? Is the border-width going to be four pixels or eight pixels for that element? So going by our rule, the first criteria is which of these two rules has more IDs. And the answer is that, well, only the second one, the number sign limerick, that's the only one that has an ID specified in the selector. So that's the one here that's going to take precedence. Now, if we consider a very similar example, except here instead of ID of limerick, the second selector specifies a class of apple, well, again, we have conflict because there are going to be elements to which both of these rules apply. Any div, which is the number of the class apple in this case. So the question, again, is which takes precedence? And the answer is, first, we look at the number of IDs, and neither of these selectors specify any IDs. So they're equal there. So the tiebreaker then is which has the most classes specified? And the answer is, well, they both have an equal number of classes specified. They just have one, the class apple. And so from there, the number is which selector has the most tag names in it. And only the top one here has any tag names. It specifies div. So that's the one that's going to take precedence. And the elements are going to take four pixel borders, not eight. They are the simplest, but also most essential types of selectors we use in CSS. As I mentioned, there are a few others, and we'll cover those in a supplement.