BRIAN YU: Using HTML, we now have the ability to build web pages with a number of different components and nested tags within each other to describe the structure of any web page we want. 

Of course, our web pages right now look pretty simple. They all have a white background. Everything's from the same font. Everything is aligned on the left-hand side of the screen. 

And what we might like to do is add some styling to our web page, make it look a little more aesthetically pleasing, make our web pages look a little bit more personal. 

And that's what CSS is going to allow us to do. CSS, which stands for a Cascading Style Sheets, is a language that's going to let us add style to our web pages by adding some additional attributes to our HTML elements. 

Let's take a look at how that's going to work. Here we have a very simple HTML page written in index.html that just says we have an HTML page, whose title is hello. And inside the body of the web page, we have in H1 tag that says we have a big heading at the top, that says hello world. 

If we take a look at what this page actually looks like, as by running HTTP server, and then loading index.html, you'll see that in big black letters we have hello world. 

How might we want to change the style of this? Well, one thing we might want to do is change the color of the text. We might want hello world to be in blue instead of black, for example. 

How would we do that? Well, it turns out we can add an attribute to this H1 tag. Recall that we've used attributes before to add additional information to tags that we've used. 

We added in an HREF attribute to our anchor tags to specify what URL we want users to be taken to when they click on a particular link. We added a source attribute to our image tag to specify what image we actually want to display in the web page at that particular position in the page. 

And likewise, we can add another attribute to our H1 tag called style, which is going to let us add CSS, some Cascading Style Sheets code that is going to let us choose how we would like to style this particular HTML element. 

So I'll set the style equal to some string in quotation marks. And here's where I actually begin to write some CSS code. 

And what I'm going to write is color:blue, followed by a semicolon. And even if you've never seen CSS before, what you might guess this is going to do is take this H1 element, this heading that appears in my web page, and change its color to blue. 

Let's take a look. If I go back to my web browser and refresh the page, indeed now hello world, instead of being in black, has now changed to be in blue instead. 

So let's now dissect this and understand what exactly is happening when I'm specifying this color. Here, we added a style attribute to H1. And then in quotation marks we're including the CSS code. 

Color here is one of many different CSS properties, style attributes of elements that we have the ability to change if we would like to. The colon says, what comes next is the value for the CSS property that should be there. 

And here we're specifying blue to mean the color of this H1 element should be blue. And the semicolon comes at the end just to finish the thought. The color of this H1 element is going to be blue. 

And we can apply this style, not just to H1s, but to other HTML elements as well. I could beneath it add a paragraph that says, this is my web page. And by default, it's going to be black. 

If I refresh the page, only hello world is in blue because I only added the style color:blue attribute to the H1 tag and not to the paragraph. 

Of course, if I wanted the paragraph to also be blue, I could say the paragraph style is color:colon. And that, when I reload the page, is also going to display both hello world and this is my web page both using blue. 

Of course now at this point, this should strike you as potentially suboptimal design. Here I've repeated the same code, saying the H1 has a color of blue, the paragraph has a color of blue. Maybe I just wanted the whole web page to be blue. 

But rather than adding color:colon blue to every single HTML element, we can do better than that. So instead, I'll remove the style attribute from the H1 and from the paragraph and instead add it to the body. 

I'll say for the body, let's give this body a color of blue, which means for all of the elements contained within it, both the heading that says hello world, and the paragraph that says this is my web page, I would like for all of that to show up with a color of blue. 

Now if I refresh the page, it looks exactly the same. Hello world is still blue, the paragraph that says this is my web page is still blue. But now, rather than including that CSS property twice, I've only included it once. 

And the children element, so to speak, the things that are nested within body element, are all going to inherit the CSS properties from the parent element, so to speak. So H1 and the paragraph are getting the color information from the body tag, where we specify that for the body the style should have a color of blue. 

Now if I were to change that to color:colon red instead, for example, and then reloaded the page, now both elements, the heading and the paragraph, will both change their style to be red instead of blue. 

So now we've seen the ability to change the color of an HTML element as by adding a style attribute to that HTML tag, and then specifying the color CSS property, followed by whatever color we want to make that particular HTML element. 

But there are other properties we can add as well. One thing you might want to change, for example, is the alignment of a particular HTML element. By default, everything in HTML is left-aligned. The heading is along the left, the paragraphs are left-aligned, the images are left-aligned. 

We might often want something to be right-aligned or in the center, for example. So to do that, we could take, for example, for this H1 tag, let's add a style attribute back to it and say, text-align:center. 

Text-align here is the name of the CSS property that determines how things should be aligned for this particular HTML element. And center is one of the possible values it could take on. It could be left or center or right. 

And here I'd like to say for this H1 tag, let's go ahead and take the element and center it. Such that now if I go back to index.html and I refresh the page, we now see that hello world has been centered. 

And we could do the same thing. I could have instead put the style on the paragraph instead of the H1. And if I do that, well, then instead of the heading being centered, then the paragraph is going to be centered. Hello world is left-aligned. This is my web page is centered. 

And if I think this is my web page right now looks a little bit small, I can change the font size of a particular element using CSS as well. Here, what I'd like to do is specify that the text alignment is centered. 

But I would also like to specify that the font size, font-size, is going to be large, for example. I could be very precise and specify something like I want it to be a 24-point font, for example. But here I'm just saying that I want the font size to be large. 

And now I can go back, refresh the page. And now you'll notice, this is my web page got a little bit bigger because I specified that I wanted the font size to be large. 

And here you'll notice that for the first time we're applying multiple CSS properties to the same HTML element. On this paragraph, I've said that I want the text alignment to be centered and I want the font size to be large. 

And you can do that. Every CSS property followed by value just has a semicolon at the end of it. And so that semicolon separates multiple possible CSS properties that you could add to an HTML element. 

I could say the text element is going to be centered and the font size is going to be large as two distinct thoughts that are separated by that semicolon. 

So now we have the text is red. We have this paragraph that is centered. We have a font size that is large. And there are many, many other properties that we could add to this page as well. 

For example, if I wanted the background color of my entire page to be blue, for instance, I could up in the body say that for the whole body of the page the color is red, meaning text that shows up on the page, that should be red. 

But maybe I want the background color using the background-color property to be blue, for example. Now, if I go back to this web page and refresh it, I now see that the background of this page is blue. I have a heading in red, a centered paragraph that's large, and then a background that's all blue. 

And so you can add more and more of these CSS properties to your HTML elements to get them to look how you want them to look, changing their color, changing their size, changing their alignment, and so forth. 

So let's now take a look at a more sophisticated web page that we might want to add some CSS styling to. So here, I'll go ahead and remove the styling that's already on this page. 

And in this case I'll add some H2s. Recall that H2s, like H1s, are headings. They're just a little bit smaller, generally used for subsections of a web page, for example. 

And so here is maybe a subsection 1 of the web page. And beneath that, I have a second subsection of the web page. And maybe there's some paragraphs of text. This is some text. And then beneath 2, this is some more text. 

And here for instance, imagine that I wanted to take both of these subsections, subsection 1 and subsection 2, and give them the same style. I would like for both of the subsection headings to be centered, for example. And I'd like for both of them to be blue instead of black by default. 

Because right now if I were to load this page, you'll see that I have subsection 1, subsection 2, followed by this is some text. And the web page is very simple. 

So how might I do that? Well, on this H2 element, I might say, let's add some style information. This time I want the text alignment to be centered. 

And I would like for the color to be blue. So again, some CSS code that lets me specify how I would like for this CSS element to be aligned and what color I would like it to have. 

And I can do the same thing for the other subsection if I would like for it to be styled the same way. I could say, style equals text-align:center; color is blue. 

And so now by doing that, if I go back to the HTML page and refresh it, you'll notice the result is exactly as I intended it for it to be. Each of the subsections is now centered. And instead of being black, they're blue. S been able to add my custom styling to this HTML page. 

Of course, this again should strike you as potentially suboptimal design. Here, I've repeated almost the exact same code in two different places. I've specified that the style for this H2 is text-align:center, color is blue. And I've done the same thing for the subsection beneath it. 

Of course, before when everything I wanted to just have the same color, I could factor things out into the parent element and say, I want the body to have a color of blue, for example. 

But in this case, we can't quite do that, because I don't want all of the text of the page to be blue. I only want these H2 elements to have a color of blue. 

So how do I solve this problem? Well, it turns out there are multiple places where you can add style information that the web browser is able to read and understand as CSS. 

One is what we've done so far, which is called inline styling where I've literally added to an HTML element that I want to add style to, a style attribute inside of which are the CSS properties that I would like to add to that element. In this case, aligning the text to be centered and changing the color to be blue. 

But you could also include style information up in the head section of the web page by adding a style tag inside of which is going to be all of the style information for this particular website. We might consider this to be factoring out the style information from the actual body of the page where we had this inline styling to instead put the styling information at the top of the page where the same style information might be shared by multiple HTML elements. 

So here what I would like to do is specify that for H2s, for any H2 that shows up in the body of the page, I would like to style it in this particular way, giving it a text alignment to being centered, and giving it a color of blue. 

How do I do that? Well, up here in the style section of the head of my web page, I'll go ahead and type H2 to mean I would like to style all of the H2 elements. And then I'll add a pair of curly braces to mean here's how I would like to style anything that is an H2 element. 

I'll type text-align:center, followed by a semicolon. And then I'll say color:colon blue. And that's all I need. Here, between lines 9 and 13 of index.html, I've added some CSS code that says for every H2 element that shows up inside of this page, go ahead and center it, and go ahead and color it blue. 

So now I don't even need these style attributes on these H2 elements anymore. I can delete them. And this will arguably clean up your code a little bit more too. So that inside the body of your HTML page, you can really focus on the structure of the web page and leave the style for the style section of the web page instead. 

So here we specified that H2s should be centered and should have a color of blue. And now if I refresh the page, it looks exactly the same. The subsections, which are my H2 elements, are colored blue. And they're centered. 

But now I factored it out. So it only shows up in one place at the beginning of my HTML file, which means that if I ever want to change something, if I ever want to align these on the right-hand side, for example, instead of in the center, or I want to change the color to red instead of blue, I can change it in one place, refresh, and then you'll see the change resulted on the web page that shows up when the user reloads the page, for example. 

And so this I would argue is a bit better design. I've been able to say that for every H2 element I would like to style it in a particular way. In this case, setting the text alignment to something, setting the color to something as well. 

What might happen, though, if I wanted to style all of the titles, not just the subsections, but also my big section heading at the top that says hello world, for example? How might I go about doing that? 

Well, let's say I want my H2s to be centered and I want them to be blue. But I also want hello world to be centered and blue as well. Well, you might imagine that one thing I definitely could do is go up into the style section of my web page and say that for every H1 element I'll go ahead and say that every H1 should be text aligned, to be centered, and every H1 should also have a color of blue. 

Where now if I go back and refresh the page, well, now my big H1 at the top of the page, in addition to my two H2 elements that are representing the subsections within this section, are all centered and blue as well. 

But here, again, we've fallen into the same trap. And if we look at the HTML file, we can see it. We've repeated the same styling code for both H1 and H2. For both of them, I've specified that we would like the text alignment to be centered. And for both of them, we want a color of blue. 

So how do we solve this problem? Well, CSS lets us solve this problem by giving HTML elements something called a class. And a class just describes a category of HTML elements that all should be styled a similar way. 

They don't all need to be H1s, they don't all need to be H2s. It could be any elements. But it's a way of giving a name to a particular category or class of elements such that they can be styled according to particular rules. 

Let's try this now. Here is the body of my web page where I have an H1 tag that says hello world. Two subsections that are H2s, underneath which are two paragraphs. 

I'm going to add to H1 a class that I'll set equal to any name that I'd like, some name that's going to describe the category of things that I would like to style. And I'll go ahead and call this title. But again, you could call it anything you'd like, some description that is going to describe what you want to style. 

And in addition to this H1 element having a class of title, I'd also like to give both of my H2s a class of title as well. 

So why have I done this? What can I do now? Well, now if I scroll back up to the style section of my web page, instead of repeating the same code twice, I can instead say that I don't just want to style H2s to have a centered text alignment and a color of blue, but I want anything with a class of title to be styled in this particular way. 

And in CSS, the syntax for that, is to use the notation, dot, and then title. The dot signifies that the name of a class is coming next. And then title is the name of the class that I want to style. 

So what does this all mean? I've given three HTML elements a class name of title, the H1, and then both of the H2s. And then in the style section of my web page, I've specified that for any element that shows up in this web page that has a class of title, I want to go ahead and center it, and to also make its color blue. 

So if I go back here now and refresh the page, I see that the page looks exactly the same, but I haven't repeated myself. Now the big title at the top, as well as the titles for each of the subsections, show up centered and blue. 

And now of course the reason this is useful is not only because I'm just avoiding needing to copy/paste, but also it makes it easier to change the page if I ever want to change the styling in the future. If I ever wanted to change the color from blue to green, for example, I do that in one place. And I go back and refresh the page, and all of those titles have changed, the H1s and the H2s. 

If I decide I want to change the font, for example, which you can do by using something called the Font Family CSS property. And let me make this a Sans Serif font instead of a Serif font that have the little glyphs at the end of all the letters. 

I'll go back and refresh. And I've now been able to change the font of the headings as well, both the H1s and the H2s, all by saying that all of these titles are going to have a class name of title. And then specifying exactly how I want to style anything that has that particular class name. 

And it turns out that an HTML page doesn't need to have just one class. We can have many classes that describe categories of HTML elements that we would like to style in particular ways. 

Say, for example, that it's not the titles that we want to make green, but it's all of the text underneath the subsection headings that we would like to make green instead. I'll go back to index.html. 

And here I'll say that the only thing that I want to style titles as is I would like for the titles to be centered. And I'll create another class that will apply to the paragraphs. 

I'll give this paragraph a class name of-- I'll just call it green because it's a text that I want to color green, for example. And I'll give this paragraph a class of green as well. 

And now I'll specify that anything that has a class name of green I would like for the color to be green. Such that now if I go back and refresh the page, I see that the headings, the H1s and the H2s, are all centered. And the text is now green. 

And it turns out that HTML elements can have multiple classes as well. If I would like for my big title at the top, for instance, to be both centered and to have a color of green, I can give it multiple class names. 

I can say for this H1, I want to give it a class name of title. But I also wanted to have a class of green. So I space separate the two names of the classes-- title, space, green. And of course I'm using these names, but they could be called anything, again. 

And I'm just here specifying that for this particular HTML element, this H1 element, it should have two classes, a class of title and a class of green. The former meaning that it's going to be styled to be text aligned centered. And the latter meaning that we're going to color it green according to the rules that are defined here in the style section of my index.html file. 

If I go back to the page now and refresh the page, we now see that my title, the big H1 at the top, is now not only centered, because it has a class system of title, rather. But it's also green because it has a class name of green as well. So you can apply multiple of these CSS properties or class names to any particular HTML element. 

Of course, now our HTML file is starting to get a little bit long. We have a whole bunch of style information here between lines 8 and lines 18 of my HTML file. And then I have the body of the page that appears beneath that. 

So we might want to try and factor things out into separate files. And so this is yet another way that you can include CSS inside of an HTML page. 

You could use inline styling, which we saw at the very beginning where we added to an HTML element a style attribute that was equal to some sequence of CSS properties and values. We could also add a style section to the header of the page where we specified some style information. 

But we could also separate things into a different file altogether. I'll create a new file that I'm going to call style.css. And I'm going to take all of the style information that was originally in the style section of my HTML page, and I'm going to move it into styles.css. 

So now inside of styles.css, I've specified that anything that has a class name of title you should center. And anything that has a class name of green you should just color green, for example. 

So go back to index.html here. And I'll remove this styling code from the page. And instead, I'm going to add a section to the header information of my web page, recalling again that the header is just where I'm storing other data about the page that my browser will need to know in order to render it. And I'll add a tag called a link tag, which will let me link this HTML file to another file, for example. 

The relationship it's going to have is it's going to have a relationship of style sheet, meaning that the file I'm about to link is going to be a style sheet for this page. And then I'll specify HREF equals styles.css, meaning I would like to link the styles.css file. And that should be the style sheet for this file, index.html. 

So now if I go to this page, reload the page, I see that again everything looks exactly the same. But I've simplified my HTML page a little bit. There is no longer any actual CSS code inside of index.html. 

I've just specified up here on line 8 that to get the style information for this page, you should look in a file called styles.css. Why is this advantageous? Well, for one, you might imagine that oftentimes if you're running a website, you might have multiple different pages on that website that all need to be styled in similar ways. 

Maybe the banner along the top is going to be the same color. Maybe you want to use consistent fonts throughout all your web pages. And so in that case, it would be pretty tedious and repetitive to have to repeat the exact same CSS code across all of your different HTML pages. 

By factoring things out into a .css file, we could just add this one line, this linking of styles.css into this HTML page into all of the HTML pages that we're later going to use, which will have the effect of making sure that we can write CSS once and have it used in a whole bunch of other HTML files. 

And conversely, right now, inside of index.html, we're including a single CSS file, styles.css. But you could easily imagine that if we had multiple different CSS files that were describing styles for different parts of a much larger web page, we could include as by linking multiple different CSS files here inside of the same HTML page to apply a whole variety of different styles to all of the elements that show up in this web page. 

Let's take a look at some examples of other CSS properties that we might want to apply. Recall back when we were talking about HTML, we saw that we could use HTML in order to create tables of data, rows and columns. But those tables look pretty simplistic. 

Let's try and recreate one of them now. I'll go ahead and remove styles.css from index.html. And inside the body, I'll have a table. Recall that inside of a table, I can use the TR element to create rows. 

And let me create for myself a couple of cells using TD elements for table data. I'll create cell 1, cell 2, and cell 3. And I'll go ahead and repeat this row a couple of times to give myself maybe three rows worth of data. I'll change the number in cell 4, cell 4, cell 6, cell 7, cell 8, and cell 9. 

So what I have here is a table inside of which are three rows. And every row has within it three cells where I might be storing some table data. 

I'll go back here and refresh the page. And we'll see that we now have a table. Insofar as it is three rows, each row containing three cells, but it's not particularly well-styled. 

So how might we like to style this web page to make it look a little more aesthetically pleasing? Well, for one, you might imagine that this whole table should probably have a border around it. 

So how do we do that? Well, it turns out that we can go up to the header section of the page. We'll go ahead and add a style section back to this HTML page. 

And I'll say, for all of the table elements that show up on this page, let me give it a particular border. And in this case, I'll specify I want the border to be a one-pixel solid black border. 

I could have specified something else, like a five-pixel dotted blue border. But one-pixel solid black border is the border I'd like for now. I'll go back here, refresh the page. And I have a one-pixel solid black border that surrounds this entire table. 

What else might I like to add to this? Well, maybe I don't just want a border to be around the whole table, but I'd like for every individual cell to have a border around it as well. 

So how might I go about doing that? We'll go ahead, and instead of styling the table, I want to style the individual table data cells that show up inside of that table. 

And recall that the tag for that is TD, TD for table data. And here I'd like to specify that for the table data, I'd also like to give it a border of one-pixel solid black. I'll go back to the page and refresh it. 

And now I have one big border around the entire table. And now around each of the cells, I have a smaller border that goes around that individual cell. 

Now it might be slightly annoying that right now when two cells are next to each other they each have borders. So effectively I have a double border between many of these cells right now. 

I could collapse those borders. And you'd only know how to do this by looking up online as to what the documentation is for how to collapse borders. 

But it turns out that tables have an additional CSS property that you can add to them called border collapse. And if I say border collapse is collapse, then the result of that is going to be that rather than have these doubled-up borders that show up inside of my table, when I refresh the page, all the borders collapse. So I just have a single one-pixel solid black border that surrounds all of the cells and surrounds the table. 

So this just goes to show there are many, many CSS properties that you could apply. And we've only looked at a small number of them over the course of today. But you're definitely welcome to take a look at other CSS properties that exist to look at how else you might be able to style your HTML elements to get them to look the way you want them to look. 

In this case, what else might we want to do to this particular table? Well, right now everything does seem to be a little bit jammed packed together. There isn't a whole lot of space that shows up between these table cells, for example. 

So I might like to say, for each of these individual table data cells, I'd like to give them a little bit of padding, a little bit of space, that separates that cell from other cell information, for example. 

And so to do that, it turns out there is a CSS property called padding. And for every table data cell, I'll add some styling. 

I'll say, I'd like for there to be padding-- let's say five pixels' worth of padding around table data cells. So I'll do that. Refresh the page. And now the cells are a little more spaced apart from each other. Looks a little bit better. 

What else might I want to do? Well, maybe these top three cells at the very top, the cell 1, cell 2, cell 3, maybe I'd like for that row to have a slightly different background color because maybe these are going to be the header cells of a table, for example. 

So I'd like for their background color to be blue, for example. How might I go about doing that? Well, I could try to add-- for these table data cells, I'd like for it to have a background color of blue, for instance. And then refresh the page. 

But that didn't quite work. Rather than just changing the styling of the top three cells, I've changed the styling of all nine of the cells that show up here because I've specified for every table data cell go ahead and give it a background color of blue. 

How can I solve this problem? Well, we can solve this problem by taking advantage of CSS classes again. Maybe for this particular table row, I'll give it a class called header. And then I'll say that for anything that has a class of header, again, using the dot notation to mean I'm introducing a CSS class here, I would like to give all of those things a background color of blue. 

So I've applied the header class to just the first row of the table, the row that has cell 1, then cell 2, then cell 3. And then on lines 21 through 24 here, I specify that just for the things that have a class of header, go ahead and give those a background color of blue. 

I'll go back here, refresh the page. And now only cell 1, cell 2, and cell 3, those all have a background color of blue instead. 

Now it turns out that CSS actually has some additional ways that you can do this idea. In HTML, if you have a road that is going to be a header row, oftentimes instead of calling them TD for table data, there's another HTML element you can use instead called TH for table header, for example. 

So if I replace all of these TDs with THs, and then I can specify that for all of the table header cells, I would like to give those a background color of blue. Now if I go back to the page and refresh it, you'll see that I have cell 1, cell 2, and cell 3 as table header cells that all have a background color of blue as well. 

So you can mix and match, adding new HTML elements. And then using CSS to determine how it is you would like to style those elements in particular ways. And you can keep playing around with this, adding more style, changing the spacing, changing the border, changing the font, to try and get things to look a little bit more professional, a little more Web 2.0, as you might call it. 

But it turns out that we might do this so often and spend so much time trying to just get the styles to look right, that many people have already written what you might call CSS libraries, collections of CSS properties and values that just make it easy to style a website very quickly and make it look good. 

And one of the most popular of these CSS libraries is a library called Bootstrap. Bootstrap is a CSS library that just includes a whole bunch of CSS code that you can apply to your HTML pages to make them look a little bit better, just to begin with. 

How do you use it? Well, if we go to getbootstrap.com, and I'll go to Documentation, and scroll down a little bit, under the Quick Start section, you'll notice that here it's just a line of code that you can copy/paste into your own HTML file to add Bootstrap to that particular HTML page. 

It looks very similar to what we've seen before. It's a link tag, rel equals style sheet, meaning we're going to link a CSS style sheet into our HTML page. But instead of the hyperlink reference, the HREF being the name of styles.css or some other local CSS file that we've stored inside of CS50 IDE, instead it's going to be a URL to Bootstrap's own CSS files. 

So I'll go ahead and take the slide, copy it. And then in my CS50 IDE, I'll get rid of the style section of my web page. And I'll just go ahead and add Bootstrap's CSS by copying in that line of code into the header section of my web page. 

And now, inside of body, I'll just create a H1 that says, hello world. A simple page that we've already seen before, but now with the difference that over here on line 8 I've added in Bootstrap CSS into this web page. 

What is it going to look like now if I load the web page and take a look at it? Let's see. I'll go back, I'll refresh the page. And you'll notice that Bootstrap has chosen slightly different fonts, it's chosen slightly different sizes. Already things look a little bit different. 

So how can I continue to take advantage of the features that Bootstrap has to offer? Well, let's go back to get bootstrap.com. And we'll go to the Documentation section of the page. 

And then along the left-hand menu bar, you'll notice a button that says Components. When you click on Components, you'll be taken to all of these different components or parts of an HTML page that you can add that Bootstrap has already styled for us using Bootstrap's own CSS code. 

And the first one alphabetically is alerts. So you might imagine that you want your web page to display some sort of alert to the user who is on it. And let's scroll down and see what these alerts look like. 

Here's a simple-- what they're calling a primary alert, which has a background of blue. There's a danger alert, which has a background of red, which might be quite common. A warning alert that has the background of yellow. 

So how do I actually take one of these alerts and actually put it into my page? Well, let's scroll down. And here's some sample code. 

Here is a div element. And a div HTML element is just an HTML element that's going to describe some vertical section of your code. You can think of a div as just a section of your web page. 

And we're giving it some classes. We're giving it a class of alert and a class of alert-primary. And what that's going to do is it's giving it two classes that Bootstrap knows about. And Bootstrap's own CSS presumably says that anything that has a class of alert and anything that has a class of alert-primary should be styled in these particular ways. 

So let me just copy this code and paste it into my HTML page. I'll go ahead and add some tabs. That will just make things look a little bit cleaner. 

HTML doesn't technically care whether you indent everything. But because HTML is so hierarchical, it can often be good design and good style just to look at everything nested and indented properly so that you can get a visual sense for what elements are nested within other elements, for example. 

And so here, I've added a div that has a class of alert and alert-primary. And role equals alert just tells the browser that this div is going to be an alert. And then here is the content of that actual alert. 

So I might replace it by saying, this is my alert, for example. And now if I go back to index.html and refresh the web page, I see not just this big H1 at the top, but also this is my alert that appears with a blue background styled already with a particular font chosen by Bootstrap immediately beneath that. 

And so you can look at Bootstrap's components that it offers on its website to look at a whole bunch of CSS elements that you can add to your web page without needing to worry about making sure the colors are exactly right and making sure the fonts are exactly right, because someone else has already done the work of figuring out what combinations of colors and CSS properties look good. And they have just given it to us in the form of a CSS library that we can take advantage of just by adding some classes to our HTML elements in order to create a better styled web page. 

So we've now seen a variety of different ways that we can add styling to our web page. We can use inline styling by adding a style attribute to any of our HTML elements to specify how we would like to style that page. 

We can put a style section into the header part of our index.html page, or any other HTML page to specify how we would like to style particular HTML elements or particular classes of HTML elements. 

And we also saw how you can actually create a .css file to link in a style sheet that either you have created or that, in the case of Bootstrap, for example, someone else has created. 

But all of this is using CSS, Cascading Style Sheets, this language of specifying properties of CSS, things like text alignment and color and font families and borders, as well as values that should correspond to them, in order to determine how a particular HTML element should work. 

And using CSS in combination with HTML, you now should have the ability to take a page and style it however you like.