Preview

Start a free Courses trial
to watch this video

Serving a Static CSS File

3:30 with Jay McGavren

Our site works great, but it could look a little prettier. We can apply colors and other formatting to our HTML file using a CSS style sheet. CSS files should be placed within the `public/` directory because that's where you should keep static files for a Sinatra app. Static means "unchanging". ERB templates aren't static; they need new data embedded in them each time they're rendered. But this CSS file is static, because it's going to have the same content every time it's served to a browser. It's more efficient to serve it as a static file, in part because Sinatra won't have to do any processing on it.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Visit the "Downloads" section on this video's page to download the style.css file we used in our project.

Our site works great, but it could look a little prettier. We can apply colors and other formatting to our HTML file using a CSS style sheet. This isn't a course on CSS; our goal is teaching you how to use a CSS file together with Sinatra. So for now, we've simply prepared a CSS file for you. (If you'd like to learn how to make your own CSS style sheets, just check our CSS Basics course.)

If you launch a workspace from this video's page, you'll get a project with a new public/ directory that has a style.css file.

We placed the style.css file within the public/ directory because that's where you should keep static files for a Sinatra app. Static means "unchanging". ERB templates aren't static; they need new data embedded in them each time they're rendered. But this CSS file is static, because it's going to have the same content every time it's served to a browser. It's more efficient to serve it as a static file, in part because Sinatra won't have to do any processing on it.

To use the CSS file in our pages, we're going to need to reference it from the HTML. To do that, we're going to need to add a few elements that were missing previously. You can learn more about the HTML elements we used in this course.

First of all, HTML documents should really begin with a DOCTYPE declaration, telling the browser that the document they're about to receive is HTML: <!DOCTYPE html>. The whole document should be nested inside an <html> element: <html>\n</html>. Within that, our page content should appear within a <body> element: <body>\n</body>. Let's move our existing content inside the <body> element, and ensure it's indented appropriately. And before the content in the <body> element, we're going to need a <head> element: <head>\n</head>. This is where information related to rendering the document goes, and that includes links to CSS stylesheets.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Welcome to our Wiki!</h1>

    <p>Visit /PageName to view a page.</p>

    <p>Or, you can <a href="/new">create a new page</a></p>
  </body>
</html>

To link to our style.css file, we need to add a <link> element within the <head> element: <link>. Next, we need to use the rel attribute to specify what the link's relationship is to this document: rel= This link will be the document's stylesheet, so we'll say: "stylesheet". And lastly, we need the path to the stylesheet. We use the href attribute, just like we've been using in anchor tags: href="". The value should be the path to the stylesheet file on the server, which would be: /public/style.css. But Sinatra makes files in the public/ directory appear as if they live within your application's root directory, so you should remove the public/ from the path: /style.css.

    <link rel="stylesheet" href="/style.css">

Let's reload our page. If your HTML matches what we've shown thus far, then the CSS rules should be able to find and style all the page elements, and you should see something like this. Looks a lot better, right? Everything's centered nicely, and our link appears as a big red button.

But that's the only page on the site that has any styling. To make this work on the rest of the site, it looks like we'll have to go through the other ERB templates and make the same changes.

Or will we? Sinatra actually offers a better way. We'll learn about that next.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Our site works great but it could look a little prettier. 0:00

We can apply colors and other formatting to our HTML files using a CSS stylesheet, 0:02

this isn't a course on CSS, 0:08

our goal is teaching you how to use a CSS file together with Sinatra. 0:10

So for now, we've simply prepared a CSS file for you. 0:14

If you'd like to learn how to make your own CSS style sheets, 0:17

just check the teacher's notes. 0:20

If you launch a workspace from this video's page, you'll get a project with 0:22

the new public directory that has the styles.css file in it. 0:26

You can also visit the teacher's notes for info on how to download the CSS file. 0:31

We placed the style.css file within the public 0:35

directory because that's where you should keep static files for a Sinatra app. 0:38

Static means unchanging. 0:42

ERB templates aren't static, 0:44

they need new data embedded in them each time they're rendered. 0:46

But this CSS file is static because it's going to have the same content 0:49

every time it's served to a browser. 0:53

It's more efficient to serve as a static file partly because Sinatra won't have to 0:55

do any processing on it. 0:59

To use the CSS file in our pages we're going to need to reference it 1:02

from the HTML. 1:05

To do that we're going to need to add a few elements that were missing previously. 1:06

I won't go into great detail about these elements, 1:10

you should visit the teacher's notes if you'd like to learn more. 1:13

So let's start by adding these elements to our welcome template. 1:17

First of all, HTML documents should really begin with a !DOCTYPE declaration, 1:21

declaring they're about to receive an HTML document. 1:25

There's a special syntax for the DOCTYPE, 1:28

it begins with an exclamation point, and then the value is HTML. 1:31

Next, the whole document should really be nested inside an HTML element. 1:36

Within that, our page content should appear within a body element. 1:41

Let's move our existing content inside the body element. 1:47

And ensure it's indented appropriately, and 1:53

before the content in the body element, we're going to need a head element. 1:56

This is where information related to rendering the document goes, and 2:03

that includes links to CSS style sheets. 2:06

To link to our style.css file, 2:09

we need to add a link element within the head element. 2:11

Next, we need to use the rel attribute to specify what this links relationship is to 2:14

this document. 2:19

This link will be the document stylesheet, so we'll give it a value of stylesheet. 2:21

And lastly, we need the path of the stylesheet, 2:27

we use the href attribute just like we've been using in anchor tags. 2:29

The value should be the path of the stylesheet on the server, 2:33

which would be /public,/styles.css. 2:36

But Sinatra makes files in the public directory appear as if 2:43

they appeared into your applications root directory. 2:46

So you'll need to remove the public and 2:48

one of the slashes from the path before it will work. 2:51

Leaving us with just /styles.css. 2:53

Let's save this and reload our welcome page. 2:57

If your HTML matches what we've shown thus far, then the CSS rules should be able to 3:02

find and style all the page elements and you should see something like this. 3:06

Looks a lot better, right? 3:11

Everything centered nicely and our link appears as a big red button. 3:12

But that's the only page on the site that has any styling. 3:16

To make this work on the rest of the site, it looks like we'll have to go 3:19

through the other ERB templates and make the same changes, or will we? 3:22

Sinatra actually offers a better way. 3:26

We'll learn about that, next. 3:28

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

Building Web Apps with Sinatra

Serving a Static CSS File

Related Discussions

Related Discussions