Time for action – styles in action

Let's put the border-radius and box-shadow effects to good use in our task list application. First, we will center the task list on the page. Then we'll put a box around each task with rounded corners and a shadow. Let's open taskAtHand.css and make some changes. You can find the code for this section in chapter2/example2.1.

First, we'll change the style for the <div id="main"> element which contains the task-name text field and task list. Let's give this section a minimum width of 9em and a maximum width of 25em. We don't want the task list to get too wide or too small to make it easier to read. This will give us the beginnings of a reactive layout. We will also set the top and bottom margins to 1em, and the left and right margins to auto to center it on the page.

Note

A reactive layout is one that reacts to its environment by adjusting its layout to fit the device it is displayed on. By using reactive layouts, you can ensure that your application works...