Open styles.css, which we have recently created. All the styles that we are going to write should be written in this file.

We will first clear the browser default margin and padding using the universal selector in CSS (*). So, our CSS for this will be:

*{
margin: 0;
padding: 0
}

Let's style the title of the page first. If you check out the HTML source code of the page, you will see that it is an H1 element. So, our CSS for this will be:

h1{
padding: 20px;
text-align: center;
color: #5093C2;
}

The preceding code makes the title appear in the center of the page. It also adds a light blue color to it. We have also created some space around it using the padding property of CSS. Refresh your page to verify it.

It's time to decorate the table element. Our CSS for it will be:

table{
  width: 800px;
  margin: auto;
text-align: center;
}

The preceding code makes the table position to the center of the browser. First, we applied a width of 800px to it and then we applied an auto positioned margin to it. Since the browser now knows the width of the table element, it will automatically divide the extra space on each side of it. This will make our table centered to the browser screen. The last property, text-align is used to align the text present inside the table.

Let's apply some more styles to the elements present inside the table:

td, th{
  padding: 10px;
  border: 1px solid #888888;
}

In the preceding CSS code, we have applied styles to the td and th elements of the table element. We created some space around the text using padding. We also applied a border to each cell. It is a solid border of 1px width and color #888888.

It's time to design the application's links. We will try to make them appear like a button so that it appears more clickable. Our CSS for it will be:

a{
display: block;
text-decoration: none;
width: 100px;
margin: 10px auto;
padding: 5px;
text-align: center;
background: #ccc;
color: #444;
font-size: 20px;
box-shadow: 4px 4px 0px #888;
font-weight: bold;
}

Click on the New Todo file and let's style it:

form{
  width: 300px;
  margin: auto;
  background: #ccc;
  padding: 20px;
  border: 1px solid #444;
}

We applied proper width to the form and made it appear at the center of the screen. We have also given a decent background color to it. Padding and border is also applied to make it look more spacious and flat.

Next, we have to design the labels and input fields. If you check out the HTML source of this page, you will see that every label, and its associated input field, is wrapped inside a div which has a field class. Remember that these classes and the HTML structures are not written by us. These have been autogenerated by Rails. We are just working with the CSS file.

Now, we will use the field class to apply style to the elements present inside the New Todo view. Here we will design the label, input field, and textarea element:

.field{
  padding: 10px 0;
}

.field label{
	font-weight: bold;
}

.field input, .field textarea{
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 18px;
  width: 280px;
}

We applied a decent space inside the field with div element. Here, we have give two different values to the padding property. The first value is for creating spaces to the top and bottom, whereas the next value will be used for the left and right side.

Next, we applied style to the label element of the field element. We have made it appear bold using the font-weight property. Lastly, we gave both the input fields and textarea the same set of CSS styles. We made them look spacious using padding. A border property is applied to get rid of the browser default border around the input and textarea elements. We also applied border-radius to make the corners a little rounded. Finally, we fixed the width of both the textarea and input elements so that they appear properly aligned.

It's time to design the last element in this HTML page, the Create Todo button:

.actions input{
  padding: 8px;
  border: 1px solid #CCC;
  border-radius: 5px;
  font-size: 18px;
  width: 280px;
  background: #83B5D8;
  color: #444;
}

Most of the CSS styles that we applied here are similar to what we have applied to the input and textarea element. Here, we have added two extra properties, background and color to make it look different and stand out properly in the form.

We have successfully designed the New Todo and Edit Todo pages. We are now only left with the Show Todo page. So, without any further delay, let's first check out the page. Click on the Show link.

Most of the content is already styled by us. We are only left with designing the text on this page, the code is as follows:

p{
  width: 350px;
  font-size: 20px;
  margin: auto;
  padding: 10px 0;
  color: #444;
}

p#notice{
  color: #76a3da;
}

We applied a fixed width to the p element and made it appear to the center of the screen using the margin property. We also applied a decent font size to them. Now, let's separate them from each other using the margin and padding properties.