add css

1. the images need to go to public/images dir.

 

2. the comments in css file:

/* ...............*/

 

3. see the example css below, we will explain one by one:

 

.container {
  width: 710px;
}

body {
  background: #cff;
}

header {
  padding-top: 20px;
}

header img {
  padding: 1em;
  background: #fff;
}

section {
  margin-top: 1em;
  font-size: 120%;
  padding: 20px;
  background: #fff;
}

section h1 {
  font-size: 200%;
}

/* Links */

a {
  color: #09c;
  text-decoration: none;
}

a:hover {
  color: #069;
  text-decoration: underline;
}

a:visited {
  color: #069;
}

 

Each rule refers to a class, an id, an html tag, or some combination, followed by a list of styling commands.

 

 

body {
  background: #cff;
}

 this rule will change the background color of the body tag to baby blue.

(#cff stand for a color.)

 

note: html color can be coded with 3 hexadicimal numbers, 1st number for red, 2nd number for green, 3rd number for blue.

#fff is pure white.

#000 is pure black.

 

 

header img {
  padding: 1em
  background: #fff;
}

 this rule puts a padding layer of 1 em (roughly the width of the letter M) around the img inside a header tag.

it also make the backgroud #fff, which is white.

 

 

.container {
  width: 710px;
}

 

this rule styles an element with class "container", in this case, the width is 710 pixels.(that is 18 blueprint columns).

you must noticed the "." before container.

the dot in ".container" indicates that the rule styles a class called "container"

 

While, the pound sign "#" indicated a rule to style a CSS id, in the same way a dot indicates a class.

 

 

4. 

nav {
  float: right;
}

nav {
  background-color: white;
  padding: 0 0.7em;
  white-space: nowrap;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0.2em 0;
}

nav ul li a {
  padding: 0 5px;
  font-weight: bold;
}

nav ul li a:visited {
  color: #09c;
}

nav ul li a:hover {
  text-decoration: underline;
}

 here, "nav ul" styles a ul tag inside a nav tag, 

"nav ul li" styles an li tag inside a ul tag insdie a nav tag, and so on.

 

5. next we will make the link of "sign in now" better:

 

a.signup_button {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  width: 190px;
  color: #fff;
  background: #006400;
  font-size: 150%;
  font-weight: bold;
  padding: 20px;
}

 

6. we have used "round" class before, which function is round the corners of buttons, etc.

we will define this css now.

 

.round {
  -moz-border-radius:   10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}