4.1 Adding Style

By itself, HTML is very limited when it comes to changing or adding style to our documents. And really, we wouldn't want to use HTML anyway, because we've been there. And older versions of HTML, we had elements that we could use to change the font such as the font style, the size, the color, we could also do some other things and it was a nightmare. So we have learned from our mistakes, we don't use HTML to do anything as far as styling is concerned, and I'm not gonna go into the whole History of that because it's really irrelevant. We use a language called CSS and that's really all that you need to know. CSS stands for Cascading Style Sheets and it allows us to completely separate our markup which is what we have here from our style and that's really what we want. Now we can add style using CSS in three different ways, really one of those is the best way, but I'm going to show you all three. The first is what we really don't want to do unless if we are prototyping something because it's really easy to get started with. And that is by simply adding a style attribute to our elements and we can use this attribute on just about any element, so I'm adding this style attribute to the body. So this means that whatever I specify inside of this style attribute is going to be applied to everything within the body. And I am going to change the color you'll right now, it defaults to black, I want to change it to blue, so I have color followed by a colon and then the value for color. Now in CSS terminology, we have color which is the property, and then we have the value for that property. And instead of using an equal sign, we use a colon. So let's save this, let's go to the browser and we are going to refresh and we see that the color of the text changes to blue. Now we are not limited to having just one property inside of the style attributes. We can use a semicolon after that and then we just define another property. There's one called text dash decoration, and we're going to say, underline and I'm going to go ahead and end that with a semicolon so that if we ever decided to add something else to the style attributes, then we could just do that. So the color is blue, and everything should be underlined now, so whenever we refresh, yes, we see that, is the case. Now, the problem with this approach, is that, it's not very different from what we used to use with the HTML elements. In this case, the style is what we call tightly coupled to the markup. So instead of using a style attribute on our element, inside of the head, we can add a style element and then we can do essentially the same thing that we did before. We want the color to blue, we want the text decoration to underline, but then we have to say okay, what do we want to apply those properties to. And we have what's called a CSS selector, it's going to select an element within our document and it's going to apply those properties. Well, in this case, we want to apply those properties to the body element, so we just say body, that is the name of our element and I'm going to paste in those properties so we have the color is going to be blue. The text decoration is going to be underlined and those properties are contained within a pair of curly braces, so we have the selector which is the body element, followed by an opening curly brace. We have our CSS properties and their values and then we have a closing curly brace. So we can get rid of this style attribute here, we can go back to the browser and we're going to see the same results that we saw before. Now this approach is slightly better because now we have a style that can be applied to the entire document, as opposed to an individual element. But we can take this a step further and we can define our styles inside of an external file, so that then we could link to that file and use it in not just this document, but in any of the other documents that we might create. So let us go to, File, New and let's call this first dot CSS. So I'm going to save first CSS and we are going to copy this selector and paste it into this CSS file and let's format the whitespace, so that it's a little bit, easier to read. And then we're going to get rid of this style element and instead we're going to use an element called link. Now there are three things that we need to specify here, the first is an attribute called rel, and this is going to be a stylesheet equit and we can see that brackets was prompting us for that value. So we have link, we have the rel attribute set to stylesheet. The next is Type and once again we see that brackets is prompting us with a value. The type is text slash CSS and then finally we have the href attribute. This is where that file is actually located and that is here inside of the same folder as our index HTML. And then we want to close that tag, now there's not a closing tag like this for link. Instead, we can use something that's called a self closing tag, which looks like that. So now we can go back to the browser, we can refresh and voila, we have the same results. And as I mentioned before, the beauty of this approach is that we can use this CSS file in any webpage now. So let's create another one. Let's save this as second.HTML, we're going to copy everything that we have inside of index and paste that into second HTML, but let's change something instead of the title being introduction to web development. Let's just say second page and we can do the same thing for this h1 element just so that we know that we are looking at the second page and let's go to the browser. Let's duplicate our existing Tab and let's open up second dot HTML, we see that the same styles are applied. So if we decided that okay, we no longer want to have blue underlined text instead, we want red underlined text or, let's just change the color, let's get rid of the underline because usually we wouldn't want our text underlined. And if we look at both of these pages, we're going to see that the color in both of them is going to be red, so the second page, the color is red. Let's go back to index HTML, the color is red as well, so this makes it very easy to maintain the style that we have throughout multiple pages. Now contrast that with some of the other approaches, like for example, if we used the style here, then we would have to change the color value. So let's say that color is blue, and then we would have to change that to red, then we would have to go to the second HTML. And we would need to do the same thing here, it would have the style attribute which would be set to blue, and then we would have to change that to red. So instead of going to each individual webpage, we just have to open up that CSS file, make the changes that we want to make and then we would see those changes along all of the pages that reference that CSS file. And so now that you know how to add style to your web pages in the next lesson, we're going to look a little bit more at CSS, we've seen how we can apply styles to a certain element by specifying that element name within our CSS. But we can also select other elements using the different selectors and we will look at that in the next lesson.