Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Ruby Build a Todo List Application with Rails 4 Build a Todo List Application with Rails 4 Writing Test Helpers

Will Lam
Will Lam
7,027 Points

Where did all the CSS come from??

Where did all the CSS come from at the end? I can't find where Jason cut and pasted it .. he vaguely mentioned that he wrote some CSS before.. even though it shouldn't touch anything that's production in real life.

I found it very disjointed and wondering what the heck happened? I couldn't find it in the source files either.. unless I'm missing something entirely (or I'm just really dense...?)

1 Answer

Jason Seifer
STAFF
Jason Seifer
Treehouse Guest Teacher

Hi Will Lam you can find the css in the "Cleaning Up Our View" project files. Here's the relevant parts that go in application.css:

div.alert {
  border: 2px solid #aaa;
  padding: 10px;
}

div.flash.success { border: 2px solid green; color: green; }
div.flash.error   { border: 2px solid red;   color: red;   }
div.flash.notice  { border: 2px solid blue;  color: blue;  }

.clear { clear: both; }

div.nav {
  border-bottom: 1px solid #aaa;
  margin-bottom: 20px;
  padding: 10px 0 0 5px;
}

div.nav h1 {
  float: left;
  margin: 0 1em 0 0;
}

div.nav a { text-decoration: none !important; }

div.nav ul {
  float: left;
  list-style: none;
  clear: right;
  margin: 0 0 0 1em;
  padding: 0;
}

div.nav ul li {
  float: left;
}

div.nav ul li a {
  display: block;
  width: auto;
  padding: 8px 10px 8px 10px;
  background: #eee;
  color: #aaa;
}

div.nav ul li a:hover {
  background: #aaa;
  color: #eee;
}