• Web

Adding CSS for Style

From the class:  How The Web Works

So far, our web server is serving two different resources. We have the HTML file up here, and the JavaScript file down here. So when we load up the HTML file, we have a link in there to the additional JavaScript files-- so two HTTP requests get made for this app.

I want to add a third one, which is for something called a CSS file. Now CSS stands for Cascading Style Sheets. And it's a technology that lets us add some additional styles to the elements on our page. So it's what makes the application look pretty.

Now to start us off with CSS, I'm going to add an additional route, an additional end point here, for that particular resource. So I'm going to copy the app.jsk statement, and just change this to a CSS. And we'll add that file in a second. Now the header, or the content type header here, is-- as you might have guessed-- instead of JavaScript, text/css. And same for the file. So we'll read the file from disk, and then send it down the wire this way.

Next up, let's go into our HTML file and link to this CSS file. Now the tag that we'll use to do this link is lo and behold called Link. And Link was originally designed to be able to link to any external resource. But it's most typically used to link to style sheets.

So we provide an REL attribute, that stands for relationship, and we set that to a style sheet. And then an href attribute, which we'll set to the actual URL for the resource. So in this case, it'll be app.css.

And we generally put that right up on top, so that it gets parsed first by the browser. And that way our app will be styled almost as soon as it's loaded. And so then you can put the JavaScript file down below.

And finally we need to go into our app folder and actually add this file. So I'll add a file called app.css. And inside the CSS file, we can define rules that style particular elements on the page. Now we're not going to spend too much time talking about how these rules work, but let's add a simple style to tell the browser what the body tag should look like. So the body tag is going to be this tag here, so everything inside of this body tag.

And I'm going to pick a font family-- we'll just say Ariel-- and I'll center the text in the center. And one last thing, let me just set the color here to a light gray color. And here's our new application in the browser-- and notice the text is gray and centered in the center of the page here.

And down in the Network tab of the debugger, notice we get the initial document, with the get request. And now we're making two additional requests-- this is the first one for CSS, and notice the type here, style sheet. And then another one for the application JavaScript file.

And if you right click, and view the page source, you'll see what the browser had to work with. And so this is the initial document here. And then this is the second request for the CSS file, and the third request for the JavaScript file.

So at this point, you've seen all the elements, or all the things that typically make up a web application. We have the initial HTML document, and then we embed links to other resources in that document-- like images, or style sheets, or JavaScript files. And you've seen how the web server then responds to these different URLs, and returns or sends back the right resource in the body as text. And then the client can determine what it is that it wants to do with that resource, like run JavaScript, or parse a CSS file and make our website look a bit prettier.