This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
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.
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.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up